Атрибут hidden тега <progress>

Описание

Атрибут hidden для тега <progress> позволяет скрыть элемент прогресс-бара. Это глобальный HTML-атрибут, который полностью удаляет элемент из визуального отображения страницы, сохраняя его в DOM.

Пример использования:
<progress hidden value="30" max="100">30%</progress>

Особенности работы:

Аспект Поведение
Отображение Полностью скрывает элемент (аналог CSS: display: none)
Доступность Скрывает элемент от скринридеров
DOM-присутствие Элемент остается в DOM-дереве

Пример с динамическим управлением:

<button onclick="toggleProgress()">Показать/скрыть прогресс</button> <progress id="toggleableProgress" value="45" max="100">45%</progress> <script> function toggleProgress() { const progress = document.getElementById('toggleableProgress'); progress.hidden = !progress.hidden; } </script>

Сравнение с CSS display:none:

  • Аналогичный визуальный эффект
  • Более семантичное обозначение скрытого состояния
  • Не переопределяется большинством CSS-правил
  • Легче управлять через JavaScript

Рекомендации:

  • Используйте для временного скрытия, а не удаления элементов
  • Не применяйте для важного контента - он станет недоступным
  • Для условного отображения лучше использовать CSS-классы
  • Сочетайте с aria-атрибутами при динамическом управлении

Ограничения:

  • Не влияет на производительность - элемент остается в DOM
  • Не подходит для скрытия чувствительных данных (остается в HTML)
  • Для сложных анимаций появления/исчезновения используйте CSS

Примечание: Хотя атрибут hidden эффективен для простого скрытия элементов, для сложных сценариев отображения/скрытия прогресс-баров предпочтительнее использовать CSS-переходы или специализированные библиотеки анимации.