🎨✨ Современные тренды 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. Это открывает новые горизонты для динамической стилизации элементов, обеспечивая разработчикам гибкость и функциональность. Указав тип данных и при необходимости задав значение по умолчанию, можно более эффективно управлять отображением контента и поведением элементов веб-страницы.

Пример

toggle()

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

Пример

Статья по теме

🤹 25 CSS-трюков, которые должен знать каждый разработчик

sibling-count(), sibling-index()

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

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

Пример

first-valid()

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

Пример

*-mix()

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

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

Пример

Статья по теме

🎨 11 полезных инструментов для работы с CSS

*-progress()

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

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

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

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

Пример

calc-size()

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

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

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

Пример

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

random(), random-item()

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

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

Пример

Заключение

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

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

Материалы

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

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

***

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