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-