Каждый Новый год связан с определенными ожиданиями, особенно в постоянно меняющемся мире веб-технологий. Давайте попробуем предсказать, какие изменения и нововведения грядут в мире CSS.

Gap

Предсказание: значительно реже будет использоваться свойство margin и все чаще gap

Управление отступами и интервалами становится приоритетом родительских элементов. Мы постепенно уходим от отступов и пробелов, хаотично разбросанных в дочерних блоках. Пришедшее с CSS Grid свойство gap изменило наш мир и теперь является частью спецификации Flexbox. Полагаю, что в 2020 году gap станет основным способом позиционирования элементов на странице. Кроме того, Flexbox перейдет на позиционирование, основанное на gap.

Логические свойства

Предсказание: на смену margin, padding, border придут логические свойства - синонимы

В 2020 году в мир веб-технологий придут новые системы измерения: блочные и инлайновые.

Расслабтесь: для логических свойств реализована встроенная поддержка, и Вашей команде не придется специально отрабатывать новые автоматизмы. Но знайте, что переключившись на синтаксис “будущего”, Вы получите целый ряд преимуществ. К тому же, скорректировать привычки гораздо проще, чем кажется. Просто сделайте это и не пожалеете.

А вот и небольшой экскурс в изменения:

• height/width - block-size/inline-size
• margin/padding - margin-block/margin-inline & padding-block/padding-inline
• borders - border-block/border-inline
• overflow - overflow-block/overflow-inline
• text-align - start/end
• float - block-start/inline-start/etc

Media Queris

Предсказание: будет больше prefers-*, чаще и осознаннее медиа-запросы будут использоваться дизайнерами.

В 2019 для веб-страниц были реализваны настройки уровня ОС. Пользователи и разработчики отлично приняли это нововведение. Таким образом, в 2020 году нет причин для замедления этого процесса. Прогресс не стоит на месте и Вы уже можете ознакомиться с некоторыми новыми функциями уровня ОС. Причем, Windows лидирует в некоторых направлениях.

Вот предварительный список некоторых нововведений:

• prefers-contrast
• prefers-reduced-transparency
• forced-colors
• light level
• foldables

Houdini

Предсказание: будет больше интересных работ со слоями, изображениями и эффектами анимации.

Конечно, все хотят знать новые CSS-трюки. На протяжении нескольких лет мы видим прогресс в работе с цветами, и эта тенденция сохранится. В 2020 году мы получим больше креативного и значимого пространства для отрисовки макетов. Обратите внимание на Houdini - отличное место для экспериментов с визуальными эффектами.

Рискованное предсказание

Наконец, хочу предсказать появление пакетного менеджера для CSS, который позволить работать с традиционными CSS-модулями, CSS-in-JS модулями и ворклетами Houdini. По значимости и влиянию на развитие технологии это будет подобно NPM для JavaScript.

Спасибо за внимание.

Перевод статьи Adam Argyle “5 CSS Predictions For 2020”.