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

Приклади

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

<div id="description">
  <h1>Зміна розміру шрифту</h1>
  <p>Цей приклад демонструє зміну розміру шрифту елемента при наведенні курсору на нього.</p>
</div>

<div id="result">
  <div class="container">
    <p class="text">Текст</p>
  </div>
</div>

#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);
}