Атрибут data-* тега <acronym>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в теге <acronym>. Эти пользовательские атрибуты работают даже с устаревшими элементами.
Синтаксис:
<acronym title="..." data-имя="значение">Акроним</acronym>
Примеры использования:
1. Хранение категории:<acronym title="Central Processing Unit" data-category="hardware">CPU</acronym>
<acronym title="Random Access Memory"
data-type="computer-part"
data-year-coined="1965">RAM</acronym>
<acronym id="term1" title="Graphics Processing Unit" data-sector="hardware">GPU</acronym>
<script>
const term = document.getElementById('term1');
console.log(term.dataset.sector); // "hardware"
</script>
Рекомендации по именованию:
| Правило | Пример | Недопустимо |
|---|---|---|
| После data- используйте kebab-case | data-category-type |
data-categoryType |
| Избегайте заглавных букв | data-termid |
data-termId |
| Короткие осмысленные имена | data-category |
data-cat123 |
Доступ к данным в JavaScript:
// HTML: <acronym data-term-id="42">...</acronym>
// Получение данных (kebab-case преобразуется в camelCase)
element.dataset.termId;
// Установка данных
element.dataset.lastUsed = '2023-05-20';
Использование в CSS:
/* Стилизация по данным атрибуту */
acronym[data-category="medical"] {
color: #c00;
border-bottom: 1px dashed #c00;
}
/* Использование с псевдоэлементами */
acronym[data-info]::after {
content: attr(data-info);
font-size: 0.8em;
}
Лучшие практики:
- Используйте для хранения информации, связанной с акронимом
- Избегайте хранения больших объемов данных
- Для сложных структур используйте JSON в одном атрибуте
- В новых проектах заменяйте
<acronym>на<abbr>
Ограничения:
- Значения всегда хранятся как строки
- Нет встроенной валидации данных
- Не поддерживает наследование значений