В декабре 2023 года Google Chrome представила обновления в CSS за прошлый год. В этой статье мы выделили самые главные нововведения и рассказали о них кратко, просто и с примерами кода.  

— Архитектурные изменения
— Обновления CSS в типографике

— Работа со цветом в CSS 2023

— Адаптивный дизайн

— Управление CSS-анимацией

Архитектурные изменения

Рассказываем, какие фишки были добавлены в CSS в 2023 году, которые помогают в вёрстке.

Поддержка sin() , cos() , tan() , asin() , acos() , atan() и atan2()

В 2023 году Chrome, Firefox, IE и Safari стали поддерживать тригонометрические функции sin() , cos() , tan() , asin() , acos() , atan() и atan2(), которые являются вспомогательными по отношению к функции calc(). 

sin() , cos() и tan() возвращают значения синуса, косинуса и тангенса угла или радианы. 

asin() , acos() и atan() работают наоборот: они принимают синус, косинус и тангенс и возвращают угол или радиану. 

Пример кода: 

Эти функции позволяют располагать объекты вокруг точки и, конечно, производить вычисления, чтобы выровнять блоки.

:nth-child стал точнее

Псевдокласс :nth-child был введён давно: он позволяет выбрать элементы определённого индекса, чтобы определить стили только для него. К примеру, вы можете задать стиль для второго пункта в спиcке:

Теперь можно добавить правило An+B. К примеру, если An+B будет равен 2n+1, стили можно будет задать для 3, 5, 7 пунктов, и так далее. 

Добавлена поддержка @scope в браузеры

Пока @scope поддерживают только IE и Chrome. Это селектор, который позволяет точечно выбирать нужные блоки без долгой писанины. Например, если вы хотите выбрать изображение внутри карточки и применить к нему стили, раньше вам пришлось бы писать что-то вроде: 

Теперь можно сделать это быстрее при помощи @scope:

Продвинутые вложения

Перед вложением каждый селектор надо было явно объявить отдельно друг от друга, из-за чего задавать стили было муторно: объявление селекторов приходилось копипастить друг за другом и вносить мелкие правки для каждого блока. 

Было так: 

Стало так: 

Правка была сделана для того, чтобы облегчить файлик со стилями.

Подсетка subgrid

Введена функция subgrid, которая позволяет встроить сетку внутрь сетки! В лучших традициях Xzibit.

Пример синтаксиса:

Обновления CSS в типографике

Рассказали, какие обновления в 2023 году в CSS улучшили типографику: работу со шрифтами, переносами и буквами.

Инициал initial-letter

Инициалом называется первая буква в предложении, которая оформляется отдельно: обычно она больше, выполнена в другом шрифте и цвете, как в средневековых манускриптах. 

Свойство initial-letter позволяет оформлять инициал. Функция не поддерживается только в Firefox. 

Перенос текста: balance и pretty

Часто разработчики понятия не имеют, какой текст будет находиться на сайте, когда выйдет в продакшн, а блоки заполнены Lorem Ipsum. Когда придёт копирайтер и сдаст тексты, может возникнуть ситуация, при которой переносы в блоке будут смотреться криво.

Свойства balance и pretty решают эту проблему и позволяют установить правила переноса строк. Balance позволяет создать гармоничные блоки текста, которые будут выглядеть сбалансировано. Pretty позволяет переносить текст так, чтобы не оставалось висящих слов, союзов и так далее.  

Работа со цветом в CSS 2023

Рассказали, какие фичи в CSS в 2023 году позволяют экспериментировать со цветами.

Добавлена поддержка CSS Color 4

CSS Color 4 — это цветовое пространство для HD (и выше) экранов. Теперь в стилях можно задать правила передачи определённого цвета, а браузер сам подстроится под устройство пользователя и выдаст те цвета, которые подразумевал разработчик. 

Говоря проще, если у одного пользователя монитор хуже, а у другого — лучше, до Color 4 первый увидел бы сайт некрасивым. Теперь оба юзера увидят красивые сайты, потому что стили будут подстраиваться под отображение цветов.

Смешивание цветов

Добавлена поддержка color-mix(), который позволяет смешивать цвета. Рассмотрим пример ниже.

Здесь смешиваются цвета #04ff00 и #00ffff. Вы можете выбрать, какой процент от второго цвета будет примешан в первый. В этом примере примешано 76%. 

Также добавлен запрос prefers-reduced-transparency, который так же позволяет изменять прозрачность блоков.

Адаптивный дизайн

Рассказываем о фичах в CSS 2023, которые упрощают разработку адаптивных сайтов.

Адаптивные контейнеры

Теперь для блоков можно задать значение @container, которое установит поведение блока при определенной ширине и высоте. Пример: 

Здесь ширина блока может быть равной 400 пикселям или больше, но не меньше. В этом случае вступит в силу правило, которое изменит сетку внутри блока.

Стили контейнеров

Работают примерно так же, как в предыдущем примере. Если на блок распространяется стиль родительского компонента, можно задать новые настройки при помощи @container style().

К примеру, у нас есть блок, который показывает, какая сейчас погода. Если на него распространяется стиль rain, то есть пошёл дождь, мы меняем градиент в блоке на серый: linear-gradient(140deg, #5dc3ff, #31debd).

Селектор :has()

Этот селектор позволяет выбрать все блоки по определённому признаку. К примеру, .card:has(img.hero) выберет все блоки, в которых есть img.hero.

В примере выше, если в блоке есть медиа, применяется новый стиль сетки.

Обновление медиа-запросов

Добавлена функция @media со значениями fast, slow или none. По сути они отвечают за то, сколько FPS будет у вашей анимации, как бы странно это ни звучало.

Дело в том, что некоторые приложения могут разрабатываться для устройств с низкой частотой обновления, к примеру, для электронных книг. Чтобы сэкономить ресурсы устройства, можно выбрать значение slow для обновления @media.

Управление CSS-анимацией

Рассказали, какие новые функции упростили работу с анимацией. 

Автоматические анимации

Появилась функция document.startViewTranstion, которая самостоятельно определяет, какой должна быть анимация перехода между, например, двумя слайдами. Функция анализирует первый слайд и второй слайд, определяет разницу и подбирает оптимальную анимацию между ними.

Линейные замедления анимаций

Функция linear() позволит указать точки экстремума для линейной анимации. Не путайте её с linear!

Пример использования: 

Конец прокрутки экрана

Если вы смотрите сайт со смартфона, вы можете дойти до конца страницы и попытаться листнуть его дальше конца, пока палец находится на экране. Уверены, вы баловались так хотя бы раз в жизни. 

Теперь конец прокрутки можно задать с помощью scrollend, который не позволит показать несуществующее содержимое страницы, как ни старайся прокрутить экран.

Пример кода: 

Управление анимациями прокруткой

Теперь в CSS можно настроить анимации содержимого страницы в зависимости от того, какой процент страницы прокручен. Сделать это можно при помощи @keyframes. 

Например, вот анимация, которая масштабирует элемент по оси X и одновременно меняет цвет его фона:

Анимация элементов в другом дереве

Когда вы хотите настроить анимацию элемента, часто случается так, что они находятся в соседних деревьях. Или элемент, который необходимо анимировать, не является дочерним элементом скроллера, который необходимо отслеживать. При анимации в CSS при этом система будет искать нужный элемент, проходя вверх по дереву.

Теперь указать элементы из соседнего дерева в анимации можно при помощи timeline-scope.

Пример: 

Содержимое сайта до его загрузки

В CSS появилась @starting-style, которая позволяет браузеру прочитать стили блоков, которые ещё не отображаются на сайте. Так браузер сможет заранее просчитать стили для этих блоков. Функция полезна, к примеру, если вам нужно сделать попап, и он должен загружаться быстро.

Плавные оверлеи

Теперь в CSS можно задать overlay, который позволит сделать плавную анимацию для всплывающих окон и других блоков, которые изначально не отображаются на странице. Раньше такие блоки показывались бы немедленно после того, как пользователь вызвал их.

Заключение

Если вы дочитали эту статью до конца, вы — большой молодец. Это мой последний материал в 2023 году. Спасибо вам, что весь год были с нами, и с наступающим вас! Пусть у вас всё будет хорошо. :)