CSS attr() — значення атрибута в стилях
Опис
Функція attr() в CSS дозволяє отримувати значення атрибутів HTML елементів та використовувати їх у стилях. Ця функція дозволяє створювати гнучкі стилі, які залежать від атрибутів елементів.
Формат використання функції attr() такий: attr(назва-атрибута), де назва-атрибута – це назва атрибута, значення якого потрібно отримати.
Приклад використання:
Уявімо, що у HTML елементі <a> є атрибут data-text. Ми можемо використовувати значення цього атрибута в функції attr() для встановлення текстового вмісту псевдоелемента ::before:
a::before {
content: attr(data-text);
}
В цьому прикладі значення атрибута data-text буде використано як текстовий вміст псевдоелемента ::before для елементів <a>. Таким чином, вміст буде динамічно залежати від значення атрибута.
Функція attr() також може застосовуватися для встановлення інших властивостей, наприклад, фону, розміру шрифту чи кольору. Вона дає можливість створювати стилі, що адаптуються до атрибутів елементів.
Загальний опис
автор: NagarD
- Порада
-
Перевірте, чи атрибут, значення якого хочете використати, присутній у вашому HTML-коді.
автор: Bond - Нотатка
-
Використовуйте резервне значення (fallback value), якщо значення атрибута відсутнє, щоб забезпечити правильне відображення стилів.
автор: Bond - Нотатка
-
Важливо відзначити, що підтримка функції
автор: Bondattr()залежить від браузера і може бути обмежена на деяких платформах чи версіях. Деякі властивості можуть не підтримувати функціюattr(). Для докладної інформації про підтримку і сумісність функціїattr(), рекомендується перевірити секцію "Переглядачі".
Синтаксис
attr(<attribute-name>, <fallback-value?>);Функція attr може отримувати 2 значень:
-
<attribute-name> -
Назва атрибута, значення якого ви хочете використати. Наприклад,
автор: Bonddata-color,aria-labelтощо. -
<fallback-value> -
Значення, яке буде використовуватись як резервне, якщо атрибут не має значення або не існує. Може бути будь-яким допустимим значенням CSS, таким як кольори, розміри, фони тощо.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 2 | 1 | 3.1 | 9 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє зміну фонового кольору елемента в залежності від значення атрибута data-color.
HTML
<div id="description">
<h1>Зміна фону в залежності від значення атрибута</h1>
<p>Цей приклад демонструє зміну фонового кольору елемента в залежності від значення атрибута "data-color".</p>
</div>
<div id="result">
<div class="container">
<div class="box" data-color="red">
<span>фоновий колір буде червоним, якщо ваш браузер не підтримує розширене використання функції attr()</span>
</div>
<div class="box" data-color="green">
<span>фоновий колір буде червоним, якщо ваш браузер не підтримує розширене використання функції attr()</span>
</div>
</div>
</div>CSS
#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;
}
.box {
background-color: red;
padding: 5px;
color: #fff;
}
.box {
width: 150px;
height: 150px;
margin: 0 10px;
background-color: attr(data-color color, red);
}Цей приклад демонструє додавання інформації з атрибутів до елементів списку за допомогою псевдоелемента ::after.
HTML
<div id="description">
<h1>Додавання інформації з атрибутів</h1>
<p>Цей приклад демонструє додавання інформації з атрибутів до елементів списку за допомогою псевдоелемента ::after.</p>
</div>
<div id="result">
<ul class="list">
<li data-info="Це перший елемент">Елемент 1</li>
<li data-info="Це другий елемент">Елемент 2</li>
<li data-info="Це третій елемент">Елемент 3</li>
</ul>
</div>CSS
#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;
}
.list {
list-style-type: none;
padding: 0;
}
.list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
.list li::after {
content: attr(data-info);
position: absolute;
top: 2px;
left: -100%;
font-family: Arial, sans-serif;
font-size: 12px;
color: #666;
}Перший рядок працює: content: attr(data-count) підставляє значення атрибута в псевдоелемент. Другий не працює жодним чином — width: attr(data-width) недійсне, і смуга лишається на всю ширину. Третій показує робочу заміну: те саме значення передано інлайновою змінною.
HTML
<div id="description">
<h2>Де attr() працює, а де ні</h2>
<p>Значення в усіх трьох випадках приходить із HTML. Різниця в тому, куди його підставляють.</p>
</div>
<div id="result">
<p class="label">content: attr(data-count) — працює</p>
<p><span class="badge" data-count="7">Непрочитані повідомлення</span></p>
<p class="label">width: attr(data-width) — не працює ніде</p>
<div class="bar broken" data-width="40%">attr()</div>
<p class="label">width: var(--w), значення з style="--w: 40%" — працює</p>
<div class="bar ok" style="--w: 40%">var()</div>
</div>CSS
#description {
font-style: italic;
line-height: 1.5;
margin-bottom: 30px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
max-width: 480px;
margin: 0 auto;
font: 15px/1.5 Arial, sans-serif;
}
.label {
margin: 22px 0 6px;
font: 13px/1.4 monospace;
color: #555;
}
.badge[data-count]::after {
content: attr(data-count);
display: inline-block;
min-width: 20px;
margin-left: 8px;
padding: 2px 6px;
border-radius: 10px;
background: #e11d48;
color: #fff;
font-size: 13px;
text-align: center;
}
.bar {
box-sizing: border-box;
padding: 10px;
color: #fff;
font: 13px/1.2 monospace;
}
.broken {
width: attr(data-width);
background: #9ca3af;
}
.ok {
width: var(--w);
background: #2f6fed;
}Коментарі
Коментарів ще немає — будьте першим!