Новые фичи CSS на июль 2020
Рейчел Эндрю рассказала про новые фичи CSS, поддержка которых потихоньку начинает появляться в браузерах — "CSS News July 2020".
В последних версиях Firefox и Chrome появилась поддержка Flexbox Gaps. Благодаря ей можно задавать расстояние между flex-элементами. Это свойство работает также как grid-gap, grid-row-gap, grid-column-gap в гридах (префикс grid- теперь необязателен).
В Chrome Canary добавлена поддержка свойства aspect-ratio, с помощью которого задаётся соотношение сторон контейнера. Например, aspect-ratio: 2 / 1 говорит о соотношении 2:1 (две единицы приходятся на ширину, одна на высоту).
В Firefox с помощью флага layout.css.grid-template-masonry-value.enabled можно включить экспериментальную поддержку раскладки "Masonry". Авторы спецификации пока сомневаются, что Masonry должна быть частью спецификации CSS Grid, так что в будущем возможны изменения.
В конце 2019 года в Firefox в гридах появилась поддержка subgrid. Благодаря ей дочерние гриды могут наследовать количество треков и их размеры от родительских гридов. Команда разработчиков Edge планирует добавить поддержку subgrid в Chromium в этом году.
Планируется добавление медиа-выражения prefers-reduced-data: reduce. С его помощью можно, например, заменить тяжёлые изображения на плейсхолдеры, если у пользователя в браузере включена опция снижения потребления траффика.
В Firefox и Chrome Beta доступен псевдоэлемент ::marker. Благодаря ему можно гибко стилизовать маркер у элемента списка. Также с его помощью можно добавить маркер к любому элементу на странице.
Рейчел призывает потестировать новые фичи и поделиться своим фидбеком.
https://www.smashingmagazine.com/2020/07/css-news-july-2020/