Главная » Статьи » Все о переменных среды CSS

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

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

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

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

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

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

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

button { --padding: 10px;
}

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

button { padding-top: var(--padding);
}

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

:root { --colour-primary: #bae;
} button { background-color: var(--colour-primary);
} h1 { color: var(--colour-primary);
}

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

:root { --breakpoint: 600px;
} @media (min-width: var(--breakpoint)) { /* Doesn't work 🙁 */
}

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

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

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

Они определены один раз, глобально, и никогда не могут быть изменены

Их можно использовать как любое значение для любого свойства или @-правила, например, медиа-запроса.

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

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

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

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

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

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

safe-area-inset-top — length

safe-area-inset-right — length

safe-area-inset-bottom — length

safe-area-inset-left — length

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

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

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

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

env('VARIABLE_NME', FALLBACK_VALUE);

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

body { padding-top: env(safe-area-inset-top, 12px); padding-right: env(safe-area-inset-right, 12px); padding-bottom: env(safe-area-inset-bottom, 12px); padding-left: env(safe-area-inset-left, 12px);
}

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

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

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

body { /* Без переменных */ padding-top: 12px; /* iOS Safari 11.2, Safari 11 */ padding-top: constant(safe-area-inset-top, 12px); /* iOS Safari 11.4+, Safari 11.1+, Chrome 69+, Opera 56+ */ padding-top: env(safe-area-inset-top, 12px); }

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

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