CSS env() — системні змінні пристрою
Опис
Функція env() в CSS надає можливість отримувати значення змінних середовища (environment variables) та використовувати їх у стилях. Ця функція особливо корисна для адаптивного веб-дизайну, де значення можуть залежати від параметрів браузера або пристрою.
Формат використання функції env() виглядає так: env(назва-змінної), де назва-змінної – це ім'я змінної середовища. Змінні середовища можуть бути визначені на рівні браузера або на рівні кореневого елемента сторінки (:root).
Наприклад, якщо визначити змінну середовища --primary-color на рівні кореневого елемента сторінки:
:root {
--primary-color: red;
}
Тоді можна використовувати цю змінну у функції env():
.button {
color: env(--primary-color);
}
У цьому прикладі, кольору тексту кнопки буде присвоєно значення змінної --primary-color, яке може бути визначене у залежності від поточних умов. Значення змінної буде використовуватись як кольорове значення у CSS стилі.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: Bondenv()для створення більш гнучких та адаптивних стилів, які залежать від значень змінних середовища. - Нотатка
-
Важливо пам'ятати, що підтримка функції
автор: Bondenv()може залежати від браузера і обмежуватися деякими платформами чи версіями. Для докладної інформації про підтримку та сумісність функціїenv(), рекомендується перевірити секцію "Переглядачі".
Синтаксис
env(<custom-property-name>);Функція env може отримувати єдине значення:
-
<custom-property-name> -
Назва власної властивості CSS, яку ви хочете використати. Значення може бути будь-яким допустимим значенням CSS, таким як кольори, розміри, шрифти, відступи тощо.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 69 | 65 | 11.1 | 56 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 69 | 69 | 65 | 11.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє зміну розміру шрифту елемента при наведенні курсору на нього.
HTML
<div id="description">
<h1>Зміна розміру шрифту</h1>
<p>Цей приклад демонструє зміну розміру шрифту елемента при наведенні курсору на нього.</p>
</div>
<div id="result">
<div class="container">
<p class="text">Текст</p>
</div>
</div>CSS
#description {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
#description h1 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-family: Arial, sans-serif;
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.text {
font-size: env(--font-size, 16px);
transition: font-size 0.3s ease;
}
.text:hover {
font-size: env(--font-size-hover, 20px);
}Цей приклад демонструє зміну кольору фону елемента з використанням функції env().
HTML
<div id="description">
<h1>Зміна кольору фону</h1>
<p>Цей приклад демонструє зміну кольору фону елемента з використанням функції env().</p>
</div>
<div id="result">
<div class="container">
<div class="box"></div>
<div class="box" style="--bg-color: red;"></div>
</div>
</div>CSS
#description {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
#description h1 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-family: Arial, sans-serif;
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
margin: 0 10px;
background-color: env(--bg-color, blue);
}П'ять смуг, у яких ширина задана різними варіантами env(). Підпис стоїть над смугою, а довжина самої смуги показує, що сталося: де запасне значення спрацювало, де ні, і де оголошення померло мовчки й ширина відкотилася до auto.
HTML
<p class="lbl">env(--my-var, 120px) — своїх змінних не буває, узято запасні 120px:</p>
<div class="bar a"></div>
<p class="lbl">env(SAFE-AREA-INSET-LEFT, 240px) — великі літери дають ІНШЕ ім'я,
тож знову запасне значення, 240px:</p>
<div class="bar b"></div>
<p class="lbl">env(safe-area-inset-left, 240px) — ім'я відоме, значення нульове,
і запасне НЕ вмикається: на настільному екрані смуга схлопнулася в нуль
(нижче видно лише тонку рамку):</p>
<div class="bar c"></div>
<p class="lbl">width: env(nope) без запасного — оголошення недійсне на етапі
обчислення, ширина відкотилася до auto:</p>
<div class="bar d"></div>
<p class="lbl">max(60px, env(safe-area-inset-left, 0px)) — ось так задають
«щонайменше стільки», і виходить 60px:</p>
<div class="bar e"></div>CSS
.lbl {
margin: 16px 0 4px;
max-width: 520px;
color: #5a6472;
font: 12px/1.45 ui-monospace, monospace;
}
.bar {
height: 26px;
outline: 1px solid #b9c6d8;
background: #2f6fd0;
}
.a { width: env(--my-var, 120px); }
.b { width: env(SAFE-AREA-INSET-LEFT, 240px); }
.c { width: env(safe-area-inset-left, 240px); background: #d64545; }
.d { width: env(nope); background: #8a6d1f; }
.e { width: max(60px, env(safe-area-inset-left, 0px)); background: #3a9a4f; }Коментарі
Коментарів ще немає — будьте першим!