Атрибут hidden тега <picture>
Описание
Атрибут hidden для тега <picture> позволяет скрыть весь контейнер с адаптивными изображениями. Это глобальный HTML-атрибут, который работает как булевый - его наличие скрывает элемент, независимо от значения.
<picture hidden>
<source media="(min-width: 800px)" srcset="large.jpg">
<img src="small.jpg" alt="Скрытое изображение">
</picture>
<!-- Альтернативные варианты записи -->
<picture hidden="hidden">...</picture>
<picture hidden="">...</picture>
Особенности работы:
| Состояние | Поведение | Эквивалент CSS |
|---|---|---|
| Присутствует | Элемент полностью скрыт | display: none |
| Отсутствует | Элемент отображается нормально | - |
Разница с CSS display:none:
- Аналогичный визуальный эффект
- Более семантичное обозначение скрытого состояния
- Не переопределяется большинством CSS-правил
- Легко управляется через JavaScript
Пример динамического управления:
<picture id="toggle-picture">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Переключаемое изображение">
</picture>
<button onclick="togglePicture()">Переключить видимость</button>
<script>
function togglePicture() {
const picture = document.getElementById('toggle-picture');
picture.hidden = !picture.hidden;
}
</script>
Рекомендации по использованию:
- Используйте для временного скрытия, а не удаления элементов
- Не применяйте для важного контента - он останется недоступным
- Для SEO-критичного контента лучше использовать другие методы
- Сочетайте с aria-атрибутами для доступности
Ограничения:
- Скрывает весь контейнер
<picture>, включая все источники - Не влияет на загрузку ресурсов (изображения всё равно загружаются)
- Для адаптивного скрытия лучше использовать media-запросы
Примечание: Хотя атрибут hidden эффективен для простого скрытия элементов, для сложных сценариев отображения/скрытия адаптивных изображений предпочтительнее использовать CSS или JavaScript, управляя конкретными источниками внутри <picture>.