Атрибут data-* тега <aside>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <aside>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS.
<aside data-type="notification" data-priority="high" data-expires="2023-12-31">
<h3>Важное уведомление</h3>
<p>Не забудьте выполнить это действие до конца года!</p>
</aside>
Основные возможности:
| Характеристика | Описание |
|---|---|
| Синтаксис | data-* где * - любое имя в нижнем регистре |
| Доступ в JavaScript | Через свойство dataset элемента |
| Использование в CSS | Через селекторы атрибутов |
| Типы данных | Только строки (для сложных данных используйте JSON) |
Доступ к данным через JavaScript:
<aside id="user-widget" data-user-id="12345" data-role="premium">
<h3>Персональные рекомендации</h3>
<p>Контент для пользователя...</p>
</aside>
<script>
const widget = document.getElementById('user-widget');
console.log(widget.dataset.userId); // "12345"
console.log(widget.dataset.role); // "premium"
// Изменение данных
widget.dataset.lastActive = new Date().toISOString();
</script>
Использование в CSS:
<style>
/* Стилизация по типу данных */
aside[data-type="notification"] {
border-left: 4px solid #ff9800;
background: #fff8e1;
}
/* Стили по приоритету */
aside[data-priority="high"] {
border-color: #f44336;
background: #ffebee;
}
/* Анимация для новых элементов */
aside[data-new="true"] {
animation: pulse 1.5s infinite;
}
</style>
<aside data-type="notification" data-priority="high" data-new="true">
<h3>Срочное уведомление</h3>
<p>Требуется ваше внимание!</p>
</aside>
Хранение сложных данных:
<aside id="complex-data" data-user-info='{"id":123,"name":"Иван","premium":true}'>
<h3>Профиль пользователя</h3>
<p>Персонализированный контент</p>
</aside>
<script>
const userData = JSON.parse(document.getElementById('complex-data').dataset.userInfo);
console.log(userData.name); // "Иван"
</script>
Рекомендации по именованию:
| Правильное | Неправильное | Причина |
|---|---|---|
data-user-id |
data-userId |
Дефисы вместо camelCase |
data-role |
data-user-role |
Избыточность |
data-analytics-event |
data-event |
Слишком общее |
Важно: Не используйте data-атрибуты для информации, которая должна быть видна пользователям. Для публичных данных используйте обычный контент или микроразметку.
Практические примеры использования:
<!-- Для аналитики -->
<aside data-analytics="sidebar-impression" data-section="recommendations">
<h3>Рекомендуем вам</h3>
<!-- Контент -->
</aside>
<!-- Для управления состоянием -->
<aside id="dynamic-sidebar" data-loaded="false" data-visible="true">
<h3>Динамический контент</h3>
<div data-content-area></div>
</aside>
<!-- Для интернационализации -->
<aside data-i18n-key="sidebar.help" data-i18n-lang="ru">
<h3 data-i18n-ref="title">Помощь</h3>
<p data-i18n-ref="content">Текст помощи...</p>
</aside>
Совет: Для сложных SPA-приложений рассмотрите возможность использования data-атрибутов в сочетании с наблюдателями (MutationObserver) для реактивного обновления интерфейса.
Лучшие практики:
- Используйте для хранения состояния компонента
- Применяйте для конфигурации виджетов
- Храните данные для аналитики
- Используйте префиксы для группировки (data-ui-, data-app-)
- Избегайте хранения больших объемов данных