Hacker News Digest

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 (последнее — то, что видит пользователь).