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

автор: Bond

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

Синтаксис

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

Функція attr може отримувати 2 значень:

<attribute-name>

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

автор: Bond

<fallback-value>

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

автор: Bond

Переглядачі

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

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

Приклади

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

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

автор: Bond

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!