Итоги CSS в 2023 году: что изменилось

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

1. Архитектурные изменения
2. Обновления CSS в типографике
3. Работа со цветом в CSS 2023
4. Адаптивный дизайн
5. Управление 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() работают наоборот: они принимают синус, косинус и тангенс и возвращают угол или радиану.

Пример кода:

			:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}
		

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

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

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

			li:nth-child(2) {
  background: yellow;
}
		

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

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

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

			.card > .content > img.hero
		

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

			@scope (.card) {
    img {
        border-color: green;
    }
}
		

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

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

Было так:

			dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}
		

Стало так:

			dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}
		

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

Подсетка subgrid

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

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

			.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
		

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

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

Инициал initial-letter

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

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

			p {
  font-size: 2rem;
  max-width: 36ch;
  color: var(--tangerine);
  background: white;

  &::first-letter {
    initial-letter: 3 2;
    font-weight: 800;
    padding-right: 1rem;
    background: linear-gradient(
      to right,
      var(--razzmatazz),
      var(--goldenyellow)
    );
    color: transparent;
    -webkit-background-clip: text;
  }
}
		

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

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

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

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

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

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

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

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

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

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

			color-mix(in oklab, #04ff00, #00ffff 76%)
		

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

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

			@layer demo {
  svg {
    --transparency: 50%;
    
    @media (prefers-reduced-transparency: reduce) {
      --transparency: 95%;
    }
    
    .body {
      fill: hsl(none none 100% / var(--transparency));
    }
    
    .body-outline {
      fill: black;
    }
  }
}
		

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

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

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

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

			@container (width >= 400px) {
    gap: 1rem;
    grid-template: auto auto / 1.75fr 1fr;
  }
		

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

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

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

			@container style(--rain: true) {
  .weather-card {
    background: linear-gradient(140deg, #5dc3ff, #31debd);
  }
		

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

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

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

			.card:has(.card__media) {
  grid-template-areas:
    "title"
    "blurb"
    "author"
    "media";
  padding-bottom: 0;
  --color: #6300ff;
}
		

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

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

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

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

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

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

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

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

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

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

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

			:root {
  --spring-easing: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
  );
  --spring-duration: 1.333s;
}
		

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

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

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

Пример кода:

			addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});
		

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

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

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

			@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}
		

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

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

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

Пример:

			.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}
		

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

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

			@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}
		

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

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

Заключение

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