Атрибут hidden тега <dir>
Описание
Атрибут hidden позволяет скрывать элемент <dir> от отображения, однако важно отметить, что сам тег <dir> является устаревшим в HTML5. В современных реализациях следует использовать <ul> или <ol> с атрибутом hidden.
Важно: Элемент <dir> устарел в HTML5. Для скрытия списков используйте <ul> или <ol> с атрибутом hidden.
Историческое использование (не рекомендуется):
<!-- Устаревший подход -->
<dir hidden>
<li>Скрытый элемент 1</li>
<li>Скрытый элемент 2</li>
</dir>
Современная альтернатива:
<ul hidden id="hiddenList">
<li>Скрытый элемент 1</li>
<li>Скрытый элемент 2</li>
</ul>
<button onclick="toggleList()">Показать/скрыть список</button>
Особенности атрибута hidden:
| Характеристика | Описание |
|---|---|
| Эквивалент CSS | display: none |
| Доступность | Скрывает элемент от скринридеров |
| DOM | Элемент остается в DOM-дереве |
| Наследование | Дочерние элементы также скрываются |
Программное управление:
<ul id="toggleList">
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
<button onclick="document.getElementById('toggleList').hidden = true">
Скрыть список
</button>
<button onclick="document.getElementById('toggleList').hidden = false">
Показать список
</button>
<script>
// Альтернативный метод переключения
function toggleVisibility() {
const list = document.getElementById('toggleList');
list.hidden = !list.hidden;
}
</script>
Разница между hidden и CSS display:none:
| Аспект | hidden | display: none |
|---|---|---|
| Семантика | HTML-атрибут | CSS-свойство |
| Специфичность | Эквивалентна inline-стилям | Зависит от селектора |
| Доступность | Автоматически скрывает от ARIA | Требует aria-hidden="true" |
Рекомендации по использованию:
- Используйте для временного скрытия элементов
- Не применяйте для важного контента, который должен быть доступен
- Для сложных сценариев скрытия/отображения используйте CSS-классы
- Сочетайте с ARIA-атрибутами для лучшей доступности
Пример с анимацией:
<style>
.fade-out {
opacity: 0;
transition: opacity 0.3s ease-out;
}
</style>
<ul id="animatedList">
<li>Анимированный элемент 1</li>
<li>Анимированный элемент 2</li>
</ul>
<button onclick="hideWithAnimation()">Скрыть с анимацией</button>
<script>
function hideWithAnimation() {
const list = document.getElementById('animatedList');
list.classList.add('fade-out');
setTimeout(() => list.hidden = true, 300);
}
</script>
Примечание: Хотя атрибут hidden является удобным способом скрытия элементов, для сложных интерфейсов предпочтительнее использовать CSS-классы, которые предоставляют больше контроля над анимациями и состояниями элементов.