Traps to Developers
-
CSS
min-width: auto
(по умолчанию) имеет приоритет надflex-shrink
,overflow: hidden
,width: 0
; задайтеmin-width: 0
.- Горизонталь и вертикаль различаются:
width: auto
растягивается,height: auto
по содержимому;margin: 0 auto
центрирует по горизонтали, но не по вертикали (вflex-direction: column
работает). - BFC (
display: flow-root
) предотвращает схлопывание margin и «обнуление» высоты родителя с float-потомками. - Новый stacking context создают
transform
,filter
,opacity
,position: fixed/sticky
,z-index
+absolute/relative
и др.;z-index
действует только внутри контекста. - На мобильных
100vh
включает скрытые панели; используйте100dvh
. position: absolute
ориентируется на ближайший «positioned» ancestor, а не на родителя.float
не работает внутри flex/grid-родителя.- Процентные
width/height
не работают, если размер родителя не задан. display: inline
игнорируетwidth
,height
, вертикальныеmargin
.- Пробелы между
inline-block
элементами рендерятся; в flex/grid — нет. box-sizing: content-box
(по умолчанию) не включает padding/border; включитеborder-box
.- Указывайте
width/height
у<img>
для предотвращения CLS. - Загрузка файлов не показывается в DevTools; используйте
chrome://net-export/
. - Внутри
<script>
строка</script>
ломает парсинг.
-
Unicode
- Отличайте code point и grapheme cluster (последнее — то, что видит пользователь).
Комментарии (100)
- Маршрутизаторы могут тихо обрывать простаивающие TCP-соединения; настройте TCP-keepalive или HTTP-заголовки.
- Возвращать
null
изOptional<T>
— антипаттерн; Kotlin и аннотации уже решают это. - UTF-16 в Java/C#/JS — деталь реализации; в Go строки — просто байты.
min-width: auto
работает не везде; CSS-свойства нельзя читать изолированно.- Регексы, YAML, LF/CRLF,
rm -rf $DIR/
— каждый язык/платформа имеет свои подводные камни.
Комментарии (42)
This is one of the features that Ruby cribbed directly from Perl. The Ruby documentation seems really bad, in particular “interpolation mode” is grievously misleading.Perl’s documentation is far more clear about the consequences:(https://perldoc.perl.org/perlop#Regexp-Quote-Like-