От автора: когда в 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.