Опубликовано: суббота, 28 сентября 2024 г. в 08:29

Новые значения и функции в CSS

Источник: «New Values and Functions in CSS»

Рабочая группа CSS выпустила первый публичный рабочий проект CSS Values and Units Module Level 5. В нем описаны общие значения и единицы измерения, принимаемые свойствами CSS, и синтаксис, используемый для них, а также добавлено несколько интересных новых функций.

13 сентября 2024 года рабочая группа CSS выпустила первый публичный рабочий проект модуля CSS Values and Units Module Level 5. Он является продолжением предыдущего уровня и включает несколько интересных дополнений.

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

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

Изменения в функции attr(): теперь она может использоваться с любым атрибутом и в любом свойстве CSS (не только в content).
Функция calc-size(): использует в расчётах внутренние значения, такие как auto или min-content.
Новая функция first-valid() позволяет избежать проблем с пользовательскими свойствами с невалидными значениями.
Новое семейство функций *-mix() с новой нотацией для соотношений.
Новое семейство функций *-progress() для вычисления соотношения прогресса между диапазонами или внутри media, или container.
Рандомизация с помощью новых функций random() и random-item() для возвращения случайных значений из диапазона или списка (наконец-то!)
Новые функции sibling-count() и sibling-index(), предоставляющие целочисленные значения для операций в зависимости от порядка и размера.
Новая функция toggle() для стилизации вложенных элементов, позволяющая циклически перебирать список значений.
Новая функциональная нотация для аргументов со списками значений, разделённых запятыми, позволяющая избежать двусмысленности с запятой, разделяющей аргументы.
Новые модификаторы URL для обеспечения большего контроля над url() запросами.
Расширение до типа позиции, позволяющее использовать значения относительно потока.

Новые возможности и обновления

Изменения в функции `attr()`

Чтение атрибута и его использование в CSS не является чем-то новым. Это уже было возможно с помощью attr(), но частой жалобой было то, насколько ограниченным был функционал, работая только со строками и в контенте.

Функция attr() претерпит некоторые изменения, и теперь любой атрибут data-, независимо от типа, может быть использован в любом свойстве. Будет просто указать тип и, если нужно, резервное значение на случай, если что-то пойдёт не так, как ожидалось.

Это долгожданное обновление, способное порадовать многих разработчиков.

Функция attr()

Функция attr() расширена, поэтому её можно использовать с любым атрибутом элемента и любым CSS свойством (на данный момент она работает только с content).

Он может принимать два необязательных параметра: единицу измерения атрибута и резервное значение.

<div data-width="50"></div>
<div data-width="70"></div>

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

Операции с внутренними значениями с помощью `calc-size()`

В этом модуле также представлена новая функция, способная безопасно работать с внутренними значениями (auto, max-content, fit-content и т. д.) Эта функция будет особенно удобна в переходах и анимации.

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

Зачем создавать новую функцию, если уже есть calc()? Как объясняется в документе, есть обратная совместимость и практические причины, по которым это было сделано именно так (например, плавная интерполяция во всех случаях, особенно при работе с процентами).

Функция calc-size()

Функция calc() отлично работает с определёнными значениями, но не может работать с внутренними значениями (такими как auto или fit-content). Новая функция calc-size() позволяет выполнять вычисления с внутренними значениями безопасным и чётко определённым способом.

details::details-content {
  overflow: hidden;
  height: 0px;
  transition: height 1s;
}

details[open]::details-content {
  height: calc-size(auto, size);
}

Новая функция `first-valid()`

Появился новый метод: first-valid(). Идея заключается в том, чтобы передать функции список значений; они будут разрешены, и первое валидное будет использовано. Это будет очень удобно при работе с пользовательскими свойствами CSS (они же CSS переменные).

Одна из проблем при работе с CSS переменными заключается в том, что в рамках объявления они считают значение валидным, даже если на самом деле содержащееся в них значение не является валидным. Установка резервного значения также не поможет, и объявление резервного значения также будет проигнорировано.

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

Функция `first-valid()`

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

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

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

Новое семейство функций `*-mix()`

В нем также появилась новая функция, mix(), которая может использоваться для упрощения различных функций *-mix. Хотите смешать цвета? Можно сделать что-то вроде color-mix(red 60%, blue) или более простое mix(60%, red, blue). И так же, как и цвета, можно смешивать длины, функции трансформирования и т. д.

Эта нотация распространяется и на другое семейство функций *-mix:

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

Если в параметре прогресса (первом) не указана функция easing, то по умолчанию будет применена linear.

Функции `*-mix()`

Функция mix() и новая нотация для функций семейства *-mix (например, color-mix()). Позволяет указать коэффициент прогресса, а также начальный и конечный пределы, и она вернёт соответствующее значение между ними.

Эти функции можно объединить с функциями *-progress для получения лучших результатов.

div {
  /* это эквивалентно rgb(30% 0 70%) */
  color: mix(70%, red, blue);
}

Новое семейство функций `*-progress()`

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

В этом семействе три функции:

progress(): общая, для любой математической функции.
media-progress(): для медиа функций.
content-progress(): для контейнерных запросов.

Функции *-progress()

Семейство функций progress возвращает число от 0 до 1, представляющее собой коэффициент прогресса значения от начального значения до конечного значения.

Их можно использовать с математическими функциями (progress()), мультимедиа функциями (media-progress()) или контейнерными функциями (container-progress()).

/**
Ширина этого div будет равна 50%.
Не самый лучший пример, я знаю :S
**/
div {
  width: calc(100% * progress(50px from 0px to 100px));
}

Функции рандомизации в CSS

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

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

Рандомизация

Добавьте случайности в любой веб-сайт с помощью двух новых функций: random() и random-item().

Первый выбирает случайное значение между двумя значениями. Второй выбирает случайное значение из списка вариантов.

.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);

}

Новые функции `sibling-*`

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

С появлением двух новых функций, возвращающих количество и позволяющих оперировать с ними, это препятствие устранено:

sibling-count(): возвращает количество родственных элементов.
sibling-index(): возвращает позицию/порядок элемента в списке родственных элементов.

Больше не нужно устанавливать кастомные свойства для каждого элемента или писать отдельные селекторы с nth-child.

`sibling-*` функции

Функция sibling-count() возвращает общее количество элементов одного уровня (прямых дочерних элементов в родительском контейнере), а функция sibling-index() возвращает индекс элемента в дочерних элементах контейнера.

Главное отличие от counter() заключается в том, что он возвращает целое число, с которым можно производить операции.

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

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

Новая функция `toggle()`

Появился новый удобный способ задания значений во вложенных элементах. Функция toggle() задаёт значения, которые элемент и его потомки будут циклически перебирать, что значительно упрощает код. Забудьте о сложных правилах и переопределениях — всё будет происходить в одной строке кода.

Например, представьте, что есть список с четырьмя вложенными уровнями. На нечётных уровнях должны быть discs, а на чётных — sqaures. Можно повеселиться и сделать ul > li ul > li ul > li ul { ... } на разных уровнях, или просто сделать что-то вроде { list-style-type: disc, square; }. Бум! Готово!

Единственное, что немного настораживает в этой функции, — это её название. Может быть, это только мне кажется, но слово "toggle" имеет двойственный контекст: on/off, yes/no — два значения, которые меняются/переключаются между собой. У функции toggle() может быть сколько угодно параметров, поэтому странно, что она названа "toggle".

Функция `toggle()`

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

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

Новая функциональная нотация для аргументов

Вы могли заметить, что некоторые из новых функций (например, random() или toggle()) могут принимать аргументы в виде списков значений, разделённых запятыми.

Как в таких случаях отличить один аргумент от другого? Именно поэтому существует предложение о модернизации запятых для функциональных нотаций. Это означает, что можно будет использовать точку с запятой (;) вместо запятой (,) для однозначного разделения параметров.

Например, представьте, что нужно установить на странице случайный шрифт и указать разные варианты:

Times, serif
Arial, sans-serif
Roboto, sans-serif

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

.random-font {
  font-family: random-item(
                Times, serif;
                Arial, sans-serif;
                Roboto, sans-serif
              );
}

Обновление нотации запятой

Некоторые из новых функций могут принимать в качестве параметров список значений, разделённых запятыми. Чтобы избежать путаницы и двусмысленности, можно заменить запятые (,), разделяющие значения, точками с запятой (;).

/*
  Функция toggle() имеет два аргумента с запятыми.
  Разделение их значений точками с запятой устраняет
  неоднозначность и облегчает их идентификацию.
*/

ul {
  font-family: toggle(Times, serif; Courier, monospace);
  list-style: random-item(--x; disk; circle; square);
}

Расширение до типа позиции

В CSS уже есть логические свойства для margin, padding и border — значения, относящиеся к направлению написания текста, и они могут меняться от одного языка к другому.

Теперь это реализовано для типа position (не путайте со свойством position). Свойства, указывающие на позицию (например, background-position, object-position и т. д.), могут задавать значения, которые будут относительными по отношению к потоку и направлению текста.

Можно использовать следующие новые значения:

x-start
x-end
y-start
y-end
block-start
block-end
inline-start
inline-end

Позиции относительно потока

Тип позиции (не путать со свойством) расширен для поддержки значений, относительно потока, таких как block-start, block-end, y-end, x-start, inline-start, inline-end и т. д.

Значения относительно потока будут зависеть от направления написания элемента, в котором они применяются.

div {
  background: conic-gradient(blue, red);
  background-position: left 15px block-end 30px;
}

Заключение

Это ещё ранняя стадия, и всё будет меняться, но некоторые из новых возможностей и функций, включённых в CSS Values and Units Module Level 5, выглядят невероятно многообещающе.

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

Не забудьте ознакомиться с рабочим проектом CSS Values and Units Module Level 5 для получения более подробной информации. Если у вас есть вопросы или комментарии, оформите тикет в их репозитории на GitHub.

Удачных (CSS) экспериментов и кодинга!

Новые значения и функции в CSS

Новые возможности и обновления

Изменения в функции attr()

Операции с внутренними значениями с помощью calc-size()

Новая функция first-valid()

Новое семейство функций *-mix()

Новое семейство функций *-progress()

Функции рандомизации в CSS

Новые функции sibling-*

Новая функция toggle()