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() для створення більш гнучких та адаптивних стилів, які залежать від значень змінних середовища.

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

env(<custom-property-name>);

Функція env може отримувати єдине значення:

<custom-property-name>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	69	65	11.1	56	79

Підтримка: мобільні переглядачі

Переглядач
	69	69	65	11.3

Приклади

+ запропонувати свій приклад у пісочниці