2024 год стал еще одним удивительным годом для CSS!

Переходы между документами и анимация при прокрутке позволяют добавить больше интерактивности в ваши приложения с помощью нескольких строк CSS. Теперь вы можете анимировать height: auto;, стилизовать полосы прокрутки и изменять размер текстовых полей в соответствии с их содержимым.

Многие функции стали базовыми и доступными в этом году благодаря эксклюзивным аккордеонам, всплывающим окнам @property и @starting-style — все они совместимы с основными браузерами.

Благодаря упорному труду разработчиков браузеров, авторов спецификаций и вкладу сообщества CSS в этом году совершил ещё один большой скачок вперёд.

Компоненты

Определение размера поля field-sizing

Без field-sizing для создания поля ввода с размером содержимого вам пришлось бы либо угадывать средний размер текстового поля, либо использовать JavaScript для подсчёта символов и увеличения высоты или ширины элемента по мере ввода текста пользователем. Теперь это можно сделать с помощью одной строки CSS.

textarea, select, input {
  field-sizing: content;
}

В следующей демонстрации показано, как ведут себя входные данные без field-sizing и с field-sizing.

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

Анимация по высоте: автоматическаяheight: auto

Часто запрашиваемая функция CSS — это возможность анимировать до height: auto. Небольшая вариация этого запроса — переход к свойству ширины вместо высоты или переход к любому из других встроенных размеров, обозначаемых ключевыми словами min-content, max-content, и fit-content.

Начиная с Chrome 129 вы можете использовать свойство interpolate-size или функцию calc-size() для включения плавных переходов и анимации от длины к ключевым словам внутреннего размера и обратно.

Самый простой способ включить это поведение — сделать так, чтобы вся страница была настроена на него, объявив interpolate-size: allow-keywords в :root.

/* Opt-in the whole page to animating to/from intrinsic sizing keywords */
:root {
    interpolate-size: allow-keywords; /* 

В большинстве случаев использования interpolate-size должно быть достаточно. Если вам нужен больший контроль над чем-то, например, для выполнения вычислений с полученным значением в пикселях или для перехода между двумя ключевыми словами для определения размера, используйте calc-size() вместо этого.

Эксклюзив <details>

Распространённым шаблоном пользовательского интерфейса в интернете является компонент «гармошка». Этот компонент состоит из нескольких раскрывающихся виджетов, которые можно по отдельности развернуть (или свернуть), чтобы показать (или скрыть) их содержимое.

Этот шаблон можно создать в Интернете с помощью нескольких <details> элементов. Обычно они группируются визуально, чтобы показать, что они относятся к одной категории.

Чтобы создать эксклюзивную раскладку, добавьте атрибут name к элементам <details>. При использовании этого атрибута несколько элементов <details>, имеющих одинаковое значение имени, образуют семантическую группу. При открытии одного из элементов <details>, входящих в группу, ранее открытый элемент автоматически закроется.

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

Настраиваемый стиль <details>

В Chrome 131 у вас появилось больше возможностей для оформления структуры элементов <details> и <summary>. Теперь вы можете использовать эти элементы при создании раскрывающихся или аккордеонных виджетов.

В частности, изменения, внесённые в Chrome 131, позволяют использовать свойство `display` для этих элементов и добавляют псевдоэлемент ::details-content для оформления расширяющейся и сворачивающейся части.

Например, чтобы создать горизонтальный аккордеон, примените к каждому элементу <details> гибкий макет, который будет располагаться в направлении строки.

details {
  display: flex;
  flex-direction: row;
}

Помимо использования большего количества типов отображения, содержимое элемента <details> автоматически оборачивается в псевдоэлемент ::details-content . Все дочерние элементы элемента <details> , кроме <summary> , помещаются в этот псевдоэлемент.

Вы можете использовать этот псевдоэлемент для управления частью раскрывающегося элемента, которая расширяется и сворачивается.

Позиционирование якоря position-anchor

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

Для создания привязки требуются два элемента: привязка и позиционируемый элемент (элементы).

Якорь — это элемент, к которому ориентируются позиционируемые элементы. Превратите элемент в якорь с помощью одной строки CSS:

.anchor {
  anchor-name: --over-easy;
}

Позиционируемые элементы — это элементы, которые позиционируются относительно якорного элемента. Они указывают на якорный элемент, относительно которого они должны быть позиционированы, с помощью position-anchor и второй строки CSS, чтобы указать сторону или область, в которой они должны быть расположены.

.positioned-element {
  position: fixed;
  position-anchor: --over-easy;
  position-area: block-end;
}

В следующем примере милое яйцо является якорем, а текст «Слишком просто» — позиционируемым элементом.

Свойство position-area предлагает множество вариантов! В демонстрации используется логическое значение свойства block-end, но есть также center, button и множество других вариантов. Una создала графический интерфейс, который поможет вам визуализировать варианты:

.scroller {
  scrollbar-color: hotpink blue;
  scrollbar-width: 10%;
}

Переходы между видами документов

В 2023 году Chrome стал первым браузером, в котором появились переходы между представлениями одного документа. Это интересное дополнение к веб-платформе, которое позволяет создавать плавные переходы между различными представлениями вашего сайта. В этом году Chrome продолжил развивать веб-платформу, добавив в Chrome 126 переходы между представлениями разных документов.

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

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

@view-transition {
  navigation: auto;
}

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

Помимо поддержки переходов между представлениями в разных документах, Chrome также добавил несколько дополнительных функций для более удобной работы с переходами между представлениями, например view-transition-class.

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

Анимация, управляемая прокруткой, является распространённым шаблоном UX в интернете. Анимация, управляемая прокруткой, связана с положением прокрутки в контейнере прокрутки. Это означает, что при прокрутке вверх или вниз связанная с ней анимация перемещается вперёд или назад в соответствии с реакцией.

В следующей демонстрации, если ваш браузер поддерживает CSS-анимацию при прокрутке, изображения будут разворачиваться по мере прокрутки. Смотреть ДЕМОНСТРАЦИЮ

События прокрутки привязки

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

Два новых события snap: scrollsnapchange и scrollsnapchanging.

scroller.addEventListener('scrollsnapchange', event=> {
    console.log(event.snapTargetBlock);
    console.log(event.snapTargetInline);
  })

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

scrollsnapchangingСобытие готово к запуску и вызывает обратный вызов в тот момент, когда у скроллера появляется новая цель привязки. Это полезно для мгновенной обратной связи по UX, предоставляя механизм немедленного визуального обновления в зависимости от взаимодействия пользователя.

scroller.addEventListener('scrollsnapchanging', event=> {
    console.log(event.snapTargetBlock);
    console.log(event.snapTargetInline);
  })

Объединив эти события, вы сможете создать удобный интерфейс для выбора элементов с помощью жеста прокрутки. Следующая линейка отмеряет значения в четвертях дюйма и использует анимацию при прокрутке для выделения выбранного значения. Событие scrollsnapchanging используется для немедленного обновления значения в поле ввода, а событие scrollsnapchange используется для поддержки и подтверждения выбранного значения.

Опыт разработчика

Наследование фона ::backdrop

Исторически сложилось так, что ::backdrop псевдоэлемент ниоткуда не наследовался. Начиная с Chrome 122, этот ::backdrop псевдоэлемент был преобразован в элемент, зависящий от дерева, что означает, что он наследует все наследуемые свойства от своего родительского элемента.

Благодаря этому изменению можно переопределять значения пользовательских свойств для определённых элементов, и ::backdrop будет иметь к ним доступ. Например, ::backdrop связанный с открытым <dialog> элементом, теперь может получить доступ к пользовательским свойствам, доступным в этом <dialog>.

light-dark()

Системные цвета в CSS могут реагировать на текущее используемое значение color-scheme . Например, если вы укажете color: CanvasText в правиле CSS, цвет соответствующих элементов будет светлым или тёмным в зависимости от значения color-scheme .

В следующем примере используйте раскрывающийся список для управления color-schemediv. Поскольку div оформлен в системных цветах, он поддерживает как светлые, так и тёмные стили.

Функция light-dark() предоставляет разработчикам такую же возможность. Эта функция принимает два аргумента, оба из которых должны быть <color>.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

При изменении значения color-scheme используется либо первое, либо второе значение light-dark() .

• Если используемая цветовая схема light или неизвестна, то возвращается вычисленное значение первого значения.
• Если используется цветовая схема dark, то возвращается вычисленное значение второго цвета.

@property

2024 год ознаменовался тем, что @property наконец-то стал базовым, доступным с самого начала. Поддержка @property в разных браузерах — это очень важная веха, поскольку с помощью @property и его CSS.registerProperty аналога вы можете регистрировать пользовательские свойства определённого типа, управлять их наследованием и задавать им начальное значение.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Регистрируя пользовательское свойство определённого типа, браузер знает, как интерполировать его значения при использовании в переходах и анимациях.

При анимации пользовательского свойства ваш CSS становится более лаконичным и удобным для чтения, как показано в следующем фрагменте, в котором свойство --angle анимируется от 0deg до 360deg.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes adjust-angle {
  to {
    --angle: 360deg;
  }
}

div {
  --angle: 0deg;
  animation: 10s adjust-angle linear infinite;
  rotate: var(--angle);
}

Всплывающий API

Popover API предоставляет способы создания многоуровневых интерфейсов, таких как всплывающие подсказки, меню, обучающие интерфейсы и многое другое.

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

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

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

Эффекты ввода с помощью @starting-style

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

В следующем примере вновь добавленные элементы <div> затухают от yellow до исходного цвета фона, который является прозрачным.

div {
  transition: background-color 0.5s;
  background-color: transparent;

  @starting-style {
    background-color: yellow;
  }
}

Другой вариант использования - анимация диалоговых окон при открытии.

dialog[open] {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

Не забудьте установить transition-behavior на allow-discrete при анимации дискретно анимируемых свойств, таких как display.

paint-order

При использовании text-stroke свойство paint-order может управлять порядком наложения или отображения заливки текста и обводки. Это может быть полезно, если вы хотите, чтобы обводка отображалась поверх заливки.

Порядок рисования по умолчанию такой: fill, stroke, затем markers.

На следующем видео показано, что результат обводки текста нежелателен, если текст сначала заливается белым цветом, а затем обводится чёрным. Если сначала обвести текст, а затем залить его, результат будет намного лучше!

CSS-код для управления этим — одна строка. Задайте paint-order для рисования обводки перед заливкой, указав эти ключевые слова в указанном порядке.

h1 {
  paint-order: stroke fill;

  color: white;
  -webkit-text-stroke: 5px black;
}

Попробуйте сами в этом CodePen:

Некоторые люди говорят, что возможность управлять paint-order наконец-то сделала text-stroke пригодным для использования в производстве. Что вы об этом думаете?

Вложенные объявления CSSOM

Чтобы исправить некоторые странные ошибки, связанные с вложенностью CSS, в спецификацию вложенности CSS был добавлен интерфейс CSSNestedDeclarations. С его помощью объявления, которые следуют за правилами стиля, больше не сдвигаются вверх.

Это означает, что следующий фрагмент CSS-кода придаёт элементу .foo цвет фона green вместо red цвета, который был бы без CSSNestedDeclarations.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }
    
    background-color: green;
}

С помощью CSSNestedDeclarations правило CSS преобразуется в следующее, сохраняя объявление background-color: green в исходном положении:

↳ CSSStyleRule
  .type = STYLE_RULE
  .selectorText = ".foo"
  .resolvedSelectorText = ".foo"
  .specificity = (0,1,0)
  .style (CSSStyleDeclaration, 1) =
    - width: fit-content
  .cssRules (CSSRuleList, 2) =
    ↳ CSSMediaRule
    .type = MEDIA_RULE
    .cssRules (CSSRuleList, 1) =
      ↳ CSSNestedDeclarations
        .style (CSSStyleDeclaration, 1) =
          - background-color: red
    ↳ CSSNestedDeclarations
    .style (CSSStyleDeclaration, 1) =
      - background-color: green

Это дополнение появилось в Chrome 130 и дополняет более ранние изменения, которые упростили разбор вложенных стилей.

Информация, использованная в статье, взята с сайта команды разработчиков Chrome DevRel.

Более подробно о новых возможностях в CSS читайте в источнике.