css.in.ua
Підтримати

CSS function env()

Опис

Функція env() в CSS надає можливість отримувати значення змінних середовища (environment variables) та використовувати їх у стилях. Ця функція особливо корисна для адаптивного веб-дизайну, де значення можуть залежати від параметрів браузера або пристрою.

Формат використання функції env() виглядає так: env(назва-змінної), де назва-змінної – це ім'я змінної середовища. Змінні середовища можуть бути визначені на рівні браузера або на рівні кореневого елемента сторінки (:root).

Наприклад, якщо визначити змінну середовища --primary-color на рівні кореневого елемента сторінки:

:root {
  --primary-color: red;
}

Тоді можна використовувати цю змінну у функції env():

.button {
  color: env(--primary-color);
}

У цьому прикладі, кольору тексту кнопки буде присвоєно значення змінної --primary-color, яке може бути визначене у залежності від поточних умов. Значення змінної буде використовуватись як кольорове значення у CSS стилі.

Порада:

Використовуйте функцію env() для створення більш гнучких та адаптивних стилів, які залежать від значень змінних середовища.
Нотатка:

Важливо пам'ятати, що підтримка функції env() може залежати від браузера і обмежуватися деякими платформами чи версіями. Для докладної інформації про підтримку та сумісність функції env(), рекомендується перевірити секцію "Переглядачі".

Синтаксис

env(<custom-property-name>);
<custom-property-name>

Назва власної властивості CSS, яку ви хочете використати. Значення може бути будь-яким допустимим значенням CSS, таким як кольори, розміри, шрифти, відступи тощо.

Переглядачі

Переглядач

69

65

11.1

56

79
Переглядач

69

69

65

11.3

Мобільних переглядачів ще не додано.

Приклади


Цей приклад демонструє зміну розміру шрифту елемента при наведенні курсору на нього.

Цей приклад демонструє зміну кольору фону елемента з використанням функції env().

Документи

Зв'язок