Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.

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

CONTAINER QUERIES (размер)

Что такое Container Queries размеров?

Container Queries позволяют писать стили, применяемые к дочерним элементам контейнеров, когда этот контейнер соответствует определённым условиям медиа (обычно это ширина).

<div class="element-wrap">
  <div class="element">
  </div>
</div>

.element-wrap {
  container: element / inline-size;
}
@container element (min-inline-size: 300px) {
  .element {
    display: flex;
    gap: 1rem;
  }
}

Когда это должно быть важно?

Если вы когда-то думали: вот бы решения о стилизации зависели от размера этого элемента, а не всей страницы, как меня заставляют делать @media-запросы. В этом случае вам пригодятся @container-запросы! Люди, работающие с дизайн-системами или с веб-сайтами, активно использующими компоненты, вероятно, чаще всего будут использовать Container Queries для стилизации в зависимости от размера, потому что размер всей страницы плохо подходит для определения размера компонента.

Поддержка

Простое демо применения

Перемещайте разделитель посередине, чтобы изменять структуру календаря в зависимости от занимаемого им места. Сам по себе он имеет три точки разрыва.

CONTAINER QUERIES (стиль)

Что такое Container Queries стиля?

Container Queries стиля позволяют применять стили, когда определённое пользовательское свойство (Custom Property) имеет определённое значение.

.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  button { } /* You can't style .container, but can select inside it */
  .other-things { }
}

@container style(--variant: 2) {
  button { }
  .whatever { }
}

Когда это должно быть важно?

Вы хотели когда-нибудь добавить примеси в CSS? То есть при задании одного свойства получать несколько. Довольно популярны стали примести благодаря Sass. Их можно реализовать при помощи Style Container Query. Но точно так же, как после переменных Sass переменные CSS оказались более полезными и удобными, Style Container Queries, вероятно, окажутся более мощными и полезными, потому что они учитывают каскад, их можно вычислять и так далее.

Поддержка

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

CONTAINER UNITS

Что такое Container Units?

Container Units (в буквальном смысле единицы измерения (units), то есть px, rem или vw) позволяют задавать размер элементов на основании текущего размера элемента контейнера. Аналогично тому, что единицы измерения viewport 1vw составляют 1% от ширины окна браузера, 1cqw — это 1% от ширины контейнера (хотя я бы рекомендовал использовать вместо них cqi, «логический эквивалент», означающий «направление строки»).

Используются следующие единицы измерения: cqw («container query width», ширина container query), cqh («container query height», высота container query), cqi («container query inline», строка container query), cqb («container query block», блок container query), cqmin (меньшее из cqi и cqb) и cqmax (большее из cqi и cqb).

Когда это должно быть важно?

Если размер чего-то внутри элемента должен зависеть от текущего размера контейнера, то, по сути, единственный способ это реализовать — container units. Примером этого может быть типографика. Типичный элемент Card может заслуживать увеличенного текста заголовка, когда он рендерится больше, без необходимости добавления имени класса для управления этим. (Я люблю вот это демо.) Даже container query по сравнению с этим неудобен.

Поддержка

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

В этом элементе используются единицы измерения container query не только для font-size, но и для padding, border, margin.

Псевдоселектор :HAS()

Что такое селектор :has()?

Селектор:has() позволяет условно выбирать элементы, когда элементы глубже в дереве DOM, чем исходный элемент, соответствуют селектору, помещённому внутрь :has().

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

Когда это должно быть важно?

Если вам когда-то нужен был «родительский» селектор в CSS, :has() может выполнить эту задачу, но он гораздо мощнее, так как после выбора нужного родителя можно снова углубиться вниз. Джей Томпкинс назвал это «семейным селектором». Также можно скомбинировать его с :not() , чтобы создать селектор того, когда элемент не «имеет» внутри совпадающего элемента.

Поддержка

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

VIEW TRANSITIONS

Что такое View Transitions?

Существуют два типа View Transitions:

1. Переходы на одной странице (требуют JavaScript)

2. Переходы на множественных страницах (только CSS)

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

if (!document.startViewTransition) {
  updateTheDOM();
} else {
  document.startViewTransition(() => updateTheDOM());
}

Для переходов на множественных страницах понадобится этот тег meta:

<meta name="view-transition" content="same-origin">

Тогда любой элемент, для которого нужно выполнить переход между страницами, должен иметь применённое в стилях абсолютно уникальное view-transition-name, как на исходной, так и на конечной странице.

Когда это должно быть важно?

Пользователи лучше смогут понять интерфейс, если элемент перемещается в новую позицию, а не сразу же оказывается там. Существует концепция анимации под названием tweening, при которой анимация автоматически создаётся на основании начального и конечного состояния. По сути, View Transitions — это и есть tweening. Вы можете управлять аспектами анимации, но по большей мере анимация создаётся автоматически на основании начального и конечного состояния DOM, без необходимости чёткого определения подробностей анимации.

Поддержка

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

Вот пример view transition на одной странице:

NESTING

Что такое nesting?

Nesting — это способ написания CSS, позволяющий записывать дополнительные селекторы в рамках существующего набора правил (ruleset).

.card {
  padding: 1rem;

  > h2:first-child {
    margin-block-start: 0;
  }

  footer {
    border-block-start: 1px solid black;
  }
}

Когда это должно быть важно?

Nesting — это, по большей мере, способ повышения удобства создания CSS, но то, что оно позволяет группировать связанный CSS и избегать многократного повторения селекторов, поможет избегать ошибок и повышает читаемость CSS. Вложенный CSS также может оказаться выстрелом в ногу, потому что способен мотивировать писать CSS, без необходимости соответствующий вложенности в HTML, повышая специфичность и снижая универсальность части CSS.

.card {
  container: card / inline-size;
  
  display: grid;
  gap: 1rem;
  
  @container (min-inline-size: 250px) {
    gap: 2rem;
  }
}

Единственное важное отличие от вложенности в стиле Sass заключается в том, что невозможно комбинировать & напрямую.

.card {
  body.home & { /* totally fine */ }
  & .footer { /* totally fine, don't even need the & */
  &__big { /* nope, can't do this */ }
}

Поддержка

SCROLL-DRIVEN ANIMATIONS

Что такое Scroll-Driven Animations?

Любую анимацию, которая привязана к скроллингу элемента (часто это сама страница) теперь можно реализовать на CSS вместо необходимости привязывать события скроллинга DOM в JavaScript. Существует два варианта:

• Прогресс скроллинга элемента. (animation-timeline: scroll())

• Текущая видимая позиция элемента внутри элемента. (animation-timeline: view())

Когда это должно быть важно?

Представьте полосу индикатора прочтения, которая заполняется от 0% до 100%, когда пользователь скроллит вниз по странице. Её можно реализовать при помощи анимации, движущей background-position элемента, привязанного к общей позиции скроллинга страницы. Реализация такой системы на CSS вместо JavaScript полезна для производительности.

Ещё одна важная ситуация, в которой пригодятся scroll-driven animation — это воспроизведение анимации при попадании элемента во viewport (и выходе из него). Вы можете в большой степени управлять подробностями, например, моментом начала и конца анимации в зависимости от степени видимости элемента.

Поддержка

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

Вот демо с зумом изображения при скроллинге страницы: https://codepen.io/chriscoyier/pen/MWxaxVQ/1dbc568d8f8404b5c9ba2fe6388bca0d

ANCHOR POSITIONING

Что такое Anchor Positioning?

Anchor positioning позволяет размещать элементы относительно того, где находится другой элемент. В такой формулировке звучит довольно очевидно, но такова их функциональность. Мы объявляем элемент с anchor и даём ему название, а затем можем позиционировать элементы сверху/справа/снизу/слева (или по центру, или логические эквиваленты) от anchor.

Когда это должно быть важно?

Освоившись с ними, вам придётся меньше заботиться о том, как DOM позиционирует элементы (если учитывать вопросы accessibility). На текущий момент позиционируемый относительно другого элемент должен быть дочерним элементом; также необходимо существование контекста позиционирования, в котором он должен работать. Это может определять, где элементы будут находиться в DOM.

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

Поддержка

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

На момент публикации он работал только в Chrome Canary со включенным флагом «Experimental Web Platform Features».

SCOPING

Что такое Scoped CSS?

Области видимости (Scoping) в CSS реализованы в виде правил @scope, объявляющих, что блок CSS применяется только к конкретному селектору. И опционально перестаёт применяться к другому конкретному селектору.

Когда это должно быть важно?

Можно задавать области видимости CSS, применяя класс и организовав вложенность в этом классе. Но у @scope есть некоторые интересные особенности. «Пончиковая» область видимости обладает уникальной способностью:

@scope (.card) to (.markdown-output) {
  h2 {
    background: tan; /* прекратить делать это, когда мы доберёмся до Markdown */
  }
}

Ещё одна полезная возможность — более логичная proximity-стилизация. Это довольно сложно объяснить, но когда вы это поймёте, то всегда будете обращать внимание. Возьмём для примера темы. У вас есть селектор .dark и селектор .light. Если вы всегда применяете их только к странице целиком, то всё в порядке, но если вам оказывается нужно встроить их, потому что они имеют одинаковую специфику, то тот, который вы определите позже, будет более сильным и может «победить», даже если это не имеет смысла. Минимальный пример:

.purple-paragraphs p { color: purple; }
.red-paragraphs p { color: red; }

<div class="purple-paragraphs">
  <div class="red-paragraphs">
    <div class="purple-paragraphs">
       <p>some text</p>
    </div>
  </div>
</div>

Можно подумать, что элемент paragraph здесь будет иметь цвет purple, но на самом деле он будет красным. Это очень неудобно, но исправимо при помощи @scope. При совпадении селекторов с областью видимости, как сказал Bramus, «они оба взвешиваются по близости к корню области видимости», а поскольку здесь ближе light, он и победит.

Однако мой любимый пример — это возможность добавить в DOM тег <style>, а затем применить стили с областью видимости только к этой части DOM без необходимости давать имена.

<div class="my-cool-component">
  <style>
    @scope {
      :scope { /* выбирает верхний div без необходимости выбора его по классу или чему-то ещё */
      }
      .card {
      }
    }
  </style>

  <article class="card">
  </article>
</div>

Поддержка

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

CASCADE LAYERS

Что такое слои?

Cascade Layers (каскадные слои) в CSS — это чрезвычайно мощный синтаксис, влияющий на силу стилизации группы стилей. Опционально можно именовать и упорядочивать слои (если не упорядочивать их явно, они будут упорядочены в исходном порядке). Стили в более высоких слоях автоматически побеждают стили в низких, вне зависимости от силы селектора. Самыми сильными становятся стили, не находящиеся внутри слоёв.

<body id="home">

@layer base {
  body#home {
    margin: 0;
    background: #eee;
  }
}

body {
  background: white;
}

Мы привыкли думать, что body#home — гораздо более мощный селектор, а значит, фон будет иметь цвет #eee. Но поскольку здесь присутствуют стили без слоёв, они победят и сделают фон white.

Можно создавать любое количество слоёв и заранее их упорядочивать. Думаю, создание слоёв с большой вероятностью станет оптимальным решением для реализуемых с нуля проектов и примет примерно такой вид:

@layer reset, default, themes, patterns, layouts, components, utilities;

Тонкость заключается в том, что правила !important в более низких слоях на самом деле сильнее.

Когда это должно быть важно?

Очевидная польза использования слоёв CSS проявляется при работе над проектом, использующим стороннюю библиотеку стилизации. Можно поместить эту библиотеку на более нижний слой, чем слои, которые пишет ваша команда, после чего вам не придётся беспокоиться о конфликтах силы селекторов со сторонней библиотекой. Ваши стили, находящиеся на более высоком слое, всегда будут выигрывать, что с большей вероятностью приведёт к написанию более чистого и удобного в поддержке CSS.

Например, одним ключевым словом layer можно поместить на нижний уровень весь Bootstrap, а все написанные вами после этого стили будут выигрывать, даже если сам Bootstrap использует селектор с большей силой.

@import url("https://cdn.com/bootstrap.css") layer;

h5 {
  margin-bottom: 2rem;
}

Поддержка

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

ЛОГИЧЕСКИЕ СВОЙСТВА

Что такое логические свойства?

Логические свойства (logical properties) — это альтернативы свойствам, указывающим направление. Например, в языке с написанием слева направо наподобие английского или русского направление inline горизонтально, а направление block вертикально, поэтому margin-right эквивалентно margin-inline-end, а margin-top эквивалентно margin-block-start. В языках с написанием справа налево наподобие арабского margin-inline-end меняется на эквивалент margin-left, потому что это сторона конца inline-потока элементов. Существует множество свойств и значений CSS, имеющих подобный компонент направления (border, padding, offset, set), поэтому сложность заключается в том, чтобы разобраться в потоке inline и block, а также использовать корректное значение start или end.

Когда это должно быть важно?

Часто при объявлении информации о направлении в CSS вы подразумеваете «в направлении inline текста». Это может показаться странным, но представьте кнопку и пространство между значком и текстом. Если применить к значку margin-right, чтобы отодвинуть его от текста, то при переводе страницы на язык с написанием справа налево это пространство будет находиться не на той стороне значка. На самом деле вы подразумевали margin-inline-end значка. Если закодировать сторону при помощи логических свойств, страница будет лучше автоматически переводиться без написания дополнительного условного кода.

Поддержка

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

ЦВЕТА P3

Что такое цветовое пространство Display P3?

Мы привыкли к использованию в вебе цветового пространства sRGB. Именно оно используется в шестнадцатеричных значениях цветов и в функциях rgb(), hsl() и hsb(). Сегодня многие дисплеи могут отображать гораздо более широкий диапазон цветов, чем способно описать sRGB, поэтому нам не хочется быть ограниченными только этим цветовым пространством. Цветовое пространство Display P3 примерно на 50% шире sRGB, оно расширяется в направлении более насыщенных и ярких цветов. Новые функции CSS, способные даже использовать различные цветовые модели, обладающие собственными полезными свойствами, позволяют нам объявлять цвета в этом пространстве.

Когда это должно быть важно?

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

Например, функция oklch() (а значит, и цветовая модель OKLCH) может отображать любой цвет, который может отображать любой другой метод (плюс P3); она примерно так же удобна для чтения, как и hsl(), и имеет «равномерную воспринимаемую яркость», из-за чего первое число (lightness) ведёт себя гораздо более предсказуемо, нежели в hsl(). Это ужасно удобно для работы с цветом в вебе. Но это не единственная новая цветовая модель и функция! Лично я считаю, что в общем случае для градиентов лучше всего подходит цветовая модель oklab.

Поддержка

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

Можете редактировать эти блоки <style>, потому что я сделал их display: block; и contenteditable:

СМЕШЕНИЕ ЦВЕТОВ

Что такое color-mix()?

Функция color-mix() в CSS позволяет, как можно догадаться, смешивать цвета. Такая функциональность уже давно присутствовала в инструментах обработки CSS и, как это часто бывает в эволюции CSS, теперь она стала нативным CSS.

Когда это должно быть важно?

Вам когда-нибудь нужно было затенить или осветлить на лету уже имеющийся цвет? Это способна сделать color-mix(). Смещение цветов может выполняться в конкретной цветовой модели, то есть вы можете воспользоваться преимуществами этой модели. Например, из-за перцептивно равномерной яркости OKLCH логично использовать её для настройки яркости. При помощи color-mix() можно создавать целые цветовые палитры.

Поддержка

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

MARGIN TRIM

Что такое margin-trim?

Свойство margin-trim удаляет все margin в указанном направлении от выбранного контейнера в конце этого направления. Представьте, что у вас идут пять блоков подряд и у всех них есть в контейнере правый margin. Можно выбрать :last-child, чтобы удалить правый margin. При помощи margin-trim можно обеспечить удаление margin из самого родительского элемента.

.container {
  /* предотвращает появление "лишнего" margin в конце элемента */
  margin-trim: block-end;

  /* виновником может быть подобный элемент, но это может быть и что угодно */
  > p {
    margin-block-end: 1rem;
  }
}

Когда это должно быть важно?

Вы знаете, насколько великолепно свойство gap в flexbox и grid? Оно оставляет пространство только между элементами. Если вам нужно оставить пространств между элементами, но вы находитесь в положении, когда невозможно использовать gap, то margin-trim ужасно удобно, потому что с его помощью вы применяете margin направления ко всем дочерним элементам и не волнуетесь о том, что какой-то дополнительный сложный селектор выберет первый или последний и удалит этот ненужный последний margin. Возможно, это даже станет best practice.

Поддержка

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

Распространённым примером здесь может послужить последний параграф, когда его нижний margin создаёт внизу больше пространства, чем со всех других краёв. Благодаря margin-trim мы можем гарантировать, что он обрезан, без необходимости выбора этого последнего параграфа и его ручного удаления.

TEXT WRAPPING

Что такое text-wrap?

Вероятно, вы не помните, что делает свойство text-wrap. Оно способно делать text-wrap: nowrap;, но мы обычно используем для этого white-space: nowrap;. Но теперь у text-wrap есть две новые возможности:

• text-wrap: balance; — попытка создания строк одинаковой ширины при переносе текста.

• text-wrap: pretty; — избегание «сирот».

Когда это должно быть важно?

Заголовок, одно слово которого перенеслось на следующую строку и стало «сиротой», выглядит очень некрасиво. Раньше не было идеального способа решения этой проблемы, если не использовать неуклюжие трюки наподобие вставки   вместо обычного пробела между последними двумя cловами. Балансировка заголовка позволяет предотвратить это, но кроме того и пытается сделать множественные строки текста одинаковой ширины. Использование pretty больше подходит для предотвращения появления «сирот», так что его можно использовать и для текста тела.

Поддержка

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

SUBGRID

Что такое Subgrid?

Subgrid — это опциональная часть применения grid в CSS, которая важна, когда вы встраиваете сеточные элементы. Задав значение grid-template-columns: subgrid; или grid-template-rows: subgrid; для элемента уровня grid, вы говорите «наследуй эти столбцы или строки из моего родительского grid там, где это релевантно».

Когда это должно быть важно?

Смысл использования grid при создании структуры, по сути, заключается в выравнивании. Без subgrid дочерние элементы не будут иметь доступ к строкам grid родительского grid, а значит, не смогут и выравнивать элементы. Subgrid позволяет заполнить этот пробел. Когда вложенность DOM важна для функциональности или accessibility, например, как в <form>, subgrid может обеспечить правильное выравнивание элементов.

Поддержка

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

За чем стоит следить

Похоже, развитие CSS и не думает притормаживать. Есть множество аспектов, за которыми стоит наблюдать и ждать.

• CSS Mixins & Functions — настоящие примеси и функции, принимающие параметры

• Relative Color Syntax — способ манипулирования частями цветов интуитивно понятным и мощным образом.

• Interop 2024 — всё, на что мы можем сделать ставку для обеспечения в ближайшем времени кроссбраузерной совместимости, в том числе и описанный выше relative color syntax.

• Свойство CSS field-sizing должно помочь в решении давней и сложной проблемы автоматического изменения размеров элементов формы, например, textarea и input, под содержащийся в них контент.

• <selectmenu> в HTML — это, по сути полностью стилизуемый через CSS <select>, и это очень круто.