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

CSS function attr()

Опис

Функція attr() в CSS дозволяє отримувати значення атрибутів HTML елементів та використовувати їх у стилях. Ця функція дозволяє створювати гнучкі стилі, які залежать від атрибутів елементів.

Формат використання функції attr() такий: attr(назва-атрибута), де назва-атрибута – це назва атрибута, значення якого потрібно отримати.

Приклад використання:

Уявімо, що у HTML елементі <a> є атрибут data-text. Ми можемо використовувати значення цього атрибута в функції attr() для встановлення текстового вмісту псевдоелемента ::before:

a::before {
  content: attr(data-text);
}

В цьому прикладі значення атрибута data-text буде використано як текстовий вміст псевдоелемента ::before для елементів <a>. Таким чином, вміст буде динамічно залежати від значення атрибута.

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

Порада:

Перевірте, чи атрибут, значення якого хочете використати, присутній у вашому HTML-коді.
Нотатка:

Використовуйте резервне значення (fallback value), якщо значення атрибута відсутнє, щоб забезпечити правильне відображення стилів.
Нотатка:

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

Синтаксис

attr(<attribute-name>, <fallback-value?>);
<attribute-name>

Назва атрибута, значення якого ви хочете використати. Наприклад, data-color, aria-label тощо.

<fallback-value>

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

Переглядачі

Переглядач

2

1

3.1

9

12
Переглядач

37

18

4

2

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

Приклади


Цей приклад демонструє додавання інформації з атрибутів до елементів списку за допомогою псевдоелемента ::after.

Цей приклад демонструє зміну фонового кольору елемента в залежності від значення атрибута data-color.

Спільнота

Зв'язок