Все о переменных среды CSS

От автора: когда в iPhone X появилась печально известный выступ, то были введены и новые значения safe-area-inset, о которых вы, возможно, слышали, они позволили браузерам определять область экрана, покрытую выступом, и соответствующим образом перемещать содержимое.

Недавно эти значения были формализованы как часть новой спецификации CSS переменные среды. Эта спецификация все еще находится в стадии черновика редактора, что означает, что, хотя некоторые браузеры могут начать ее реализацию, она еще не является официальной частью спецификации. Тем не менее, они имеют хорошую поддержку браузеров, которые нуждаются в этом, например, iOS Safari на iPhone X, и могут использоваться прогрессивно.

У нас уже есть переменные CSS, не так ли?

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

Впервые в CSS эти переменные позволили нам создавать ссылки на часто используемые значения и использовать эти ссылки в таблице стилей. Ссылки, или «переменные», были ограничены для элемента и аналогичны тому, как мы определяем обычные объявления свойства-значения.

Эти переменные затем могут быть доступны с помощью записи var().

Хотя переменные этого типа решали много проблем, они также имели некоторые ограничения. Поскольку переменные CSS ограничены элементом, они доступны только для этого конкретного элемента, а не глобально. Чтобы сделать переменные доступными для всей таблицы стилей, мы должны применить переменные к элементу :root. Поскольку эти переменные являются каскадными, они будут доступны всем дочерним элементам.

Еще одним побочным эффектом переменных, ограничиваемых элементом, является то, что они не могут использоваться вне объявлений CSS. Переменные CSS нельзя использовать в других местах, например, с правилами @media.

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

Ввод переменных среды

Переменные среды CSS были созданы как решение для ограничений пользовательских свойств, также называемых «каскадными переменными». У них есть три ключевых отличия от каскадных переменных:

Как создаются переменные среды

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

Переменные среды агента пользователя

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

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

Авторские переменные среды

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

Использование переменных среды (сегодня)

Доступ к переменной среды CSS осуществляется с использованием нотации env(). Эта нотация принимает два значения — имя переменной и резервное значение, если переменная не была найдена.

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

Поддержка и прогрессивное улучшение

Как я уже упоминал, спецификация переменных среды CSS все еще находится в черновике редактора, что означает, что вещи, вероятно, изменятся. Несмотря на это, поддержка этой функции уже составляет 70% и, следовательно, может быть использована.

Хороший способ использовать эту функцию сегодня — полагаться на каскад и использовать соответствующие резервные варианты.

Источник: //bitsofco.de/

Редакция: Команда webformyself.

Комментарии Вконтакте: