🎨✨ Современные тренды CSS: эволюция функций

Рабочая группа CSS выпустила новый модуль Values and Units Level 5: меньше кода, больше возможностей – звучит как мечта? Давайте вместе разберемся, как эти новшества изменят нашу работу и сделают веб красивее.

Привет, друзья! Я Кирилл Мыльников, frontend-разработчик в компании Usetech. Рабочая группа CSS выпустила публичную версию модуля Values and Units Module Level 5, включающую разнообразные улучшения CSS для удобства и упрощения кода. Новые возможности этого модуля позволят разработчикам создавать стильные и современные веб-сайты более эффективно и креативно. Как обычно, пройдем сначала теорию, вспомним и перейдем к практике

Темы, которые разберем:

1. attr()
2. toggle()
3. sibling-count(), sibling-index()
4. first-valid()
5. -*mix, -*progress
6. calc-size()
7. random(), random-item()

attr()

Да, функция attr в CSS была значительно усовершенствована! Теперь атрибуты элемента с префиксом data-, независимо от их типа, могут быть использованы в любом свойстве CSS. Это открывает новые горизонты для динамической стилизации элементов, обеспечивая разработчикам гибкость и функциональность. Указав тип данных и при необходимости задав значение по умолчанию, можно более эффективно управлять отображением контента и поведением элементов веб-страницы.

Пример

<div data-width="89"></div>
<div data-width="100"></div>

<style>
 div {
   width: attr(data-width px);
 }
</style>

toggle()

Действительно, функция toggle в CSS предоставляет удобную возможность циклически переключать значения для элементов или их потомков, что значительно упрощает код и делает стили более гибкими. Позвольте мне дать пример использования: предположим, что вам нужно задать стиль "disc" для нечетных уровней вложенности и "square" для четных уровней вложенности в списке ul > li > ul > li. Вместо того, чтобы явно задавать стили для каждого уровня вложенности, вы можете просто использовать { list-style-type: disc, square; } и функция toggle автоматически будет переключать эти значения циклически для потомков, позволяя избегать дублирования кода и делая управление стилями более элегантным и эффективным.

Пример

/*
 Если у нас есть вложенные списки:
 - Первый уровень будет disc
 - Вторым уровнем будет circle.
 - Третий уровень будет square.
Если уровней больше, они будут повторяться снова:
disc, circle, square, disc, circle...
*/
ul {
 list-style-type: toggle(disc, circle, square);
}

sibling-count(), sibling-index()

Благодаря новым функциям в CSS, которые позволяют оперировать количеством элементов и их порядком, теперь нет необходимости устанавливать кастомные стили для каждого элемента и писать отдельные селекторы с nth-child. Это значительно упрощает процесс стилизации элементов и делает код более компактным и понятным. Теперь можно легко задавать различные стили в зависимости от порядка расположения элементов в контейнере без необходимости явного указания каждого элемента.

• sibling-count – возвращает количество родственных элементов
• sibling-index – возвращает позицию элемента в списке

Пример

/*
 Пример: если внутри контейнера находится 4 div,
 их ширина составит 25% (100% / 4),
 а высота -- 100px, 200px, 300px и 400px.
*/

div {
 width: calc(100% / sibling-count());
 height: calc(sibling-index() * 100px);
}

first-valid()

Появление нового метода, который принимает аргументы и использует первое валидное значение, может значительно упростить работу с переменными CSS. Проблема с переменными заключается в том, что они считаются всегда валидными, даже если это не так, и установка резервного значения будет проигнорирована. С помощью метода first-valid можно объединить все резервные значения в одно, что делает работу с переменными более надежной и удобной. Теперь, в случае, если первое значение не является валидным, будет использовано следующее в порядке очереди, и так далее, пока не будет найдено валидное значение.

Пример

/* Без фона */
div {
 --a: 40px;
 --b: red;
 background: gold;
 background: var(--a);
}

/* Синий фон */
div {
 --a: 50px;
 --b: green;
 background: red;
 background: first-valid(var(--a), var(--b));
}

*-mix()

С появлением новой функции mix() в CSS, было упрощено объединение различных функций *-mix(). Теперь, если вам нужно смешать цвета, можно использовать что-то вроде color(green, 50%, blue), аналогично можно смешивать и длины. Эта функция также применима к функциям трансформирования, что делает процесс работы с CSS более гибким и удобным. Теперь можно легко совмещать различные свойства и получать желаемый результат, не усложняя код и улучшая его читаемость.

• calc-mix()
• color-mix()
• cross-fade()
• palette-mix()

Пример

div {
 color: mix(70%, green, blue);
}

*-progress()

Данный подход представляет собой создание пропорционального прогресса заданного значения от начального к конечному. В итоге получается число в диапазоне от 0 до 1, которое можно использовать в различных операциях. Это удобно сочетается с ранее описанным семейством функций *-mix(), позволяя более ярко и гибко управлять промежуточными состояниями между значениями.

Пример использования пропорционального прогресса в сочетании с функцией *-mix():

Тут можно выделить три функции:

• progress()
• media-progress()
• content-progress()

Пример

div {
 width: calc(100% * progress(50px from 0px to 100px));
}

calc-size()

Эта функция позволяет безопасно работать с внутренними значениями, такими как auto, max-content, fit-content. Она особенно удобна при создании переходов и анимаций, где требуется точное управление размерами.

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

Хотя функция calc() отлично работает с определенными значениями, она не способна обрабатывать внутренние значения, такие как fit-content или auto. В таких случаях функция size предоставляет более удобное и безопасное решение для работы с размерами, особенно в контексте анимаций и переходов.

Пример

details {
  transition: height 1s;
}
details::details-content {
  display: block;
}
details[open]::details-content {
  height: auto;
}
details:not([open])::details-content {
  height: calc-size(any, 0px);
}

random(), random-item()

В CSS ранее не хватало встроенных инструментов для работы с случайными значениями, но в этом модуле появились две новые функции: random-item(), возвращающая случайное значение из списка, и random(), выдающая случайное число в определенном диапазоне.

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

Пример

.random-square-2 {
  font-size: 16px;
  width: random(160px, 320px);
  height: random(10em, 20em);
}

.random {
 /* случайное значение от 100px до 300px*/
 width: random (100px, 300px);

/* случайное значение от 100 до 300 пикселей
  с шагом 50 пикселей: 100 пикселей, 150 пикселей...*/
 height: random (100px, 300px, by 50px); */

/* один из трёх случайных цветов */
 background: random-item(--c, red, green, blue);

}

Заключение

Эти новые функции звучат захватывающе и действительно обещают многое.

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

Материалы

W3C – https://www.w3.org/TR/css-values-5/

Дока – https://doka.guide/css/

Если бы вы могли добавить еще одну функцию в CSS, что бы это было и как бы она работала?