Кратко
СкопированоЖелезобетонный способ скрыть элемент в тех случаях, когда не подходят opacity или visibility. В отличие от двух других способов этот применяется прямо в HTML-разметке. Не лучшая практика: влиять на внешний вид страницы через разметку, но иногда именно это и нужно. По сути, это display — именно так он описан в браузерных стилях.
Пример
Скопировано
<p hidden> Этот текст будет невиден на странице. Хотя элемент в разметке будет!</p>
<p hidden>
Этот текст будет невиден на странице. Хотя элемент в разметке будет!
</p>
Как пишется
СкопированоПоскольку атрибут hidden глобальный, его можно добавить к абсолютно любому тегу, чтобы скрыть его от глаз пользователя. Просто поставьте его после имени самого тега до закрывающей треугольной скобки. Собственно, как и все прочие атрибуты.
Этот атрибут булевый, у него может быть значение true — элемент спрятан, или false — элемент видим. Но обычно его пишут без значения, что приравнивается к true по умолчанию. Значения могут пригодиться, если вы будете менять их при помощи JavaScript.
Очень важно знать, что тег, спрятанный при помощи атрибута hidden становится невидим не только для пользователя, но и для скринридеров.
По причине того, что тег с этим атрибутом пропадает совсем как от пользователя, так и от скринридеров, стоит использовать этот приём аккуратно, понимая последствия.
Подсказки
Скопировано💡 Как и с display, такое скрытие нельзя анимировать ☹️
💡 Атрибут пишется в одно слово, без значения, если вы хотите спрятать элемент.
💡 Элемент скрывается от глаз не только пользователя, но и вообще как будто не существует. Его не видят скринридеры, на него нельзя установить ссылку.
💡 Элемент с атрибутом hidden остаётся виден поисковым роботам и будет ими проиндексирован.
На практике
Скопированосоветует
Скопировано🛠 Работа атрибута hidden на примере показа рекламы пользователям без премиума.
Идея простая: если пользователь имеет статус премиум — прячем рекламный блок и блок с кнопкой «Стать премиумом» через hidden. Если не премиум — показываем их. Переключать состояние можно с помощью JavaScript, меняя булевый атрибут.
<section class="controls" aria-label="Переключатель премиума"> <button id="become-premium" type="button">Стать премиум</button> <button id="cancel-premium" type="button" hidden>Отменить премиум</button> <p id="premium-msg" role="status" hidden>Вы премиум! Реклама скрыта.</p></section><aside id="ad" class="ad" aria-label="Рекламный блок"> Реклама: купите слона 🐘 — только сегодня скидка 50%!</aside><section class="content"> <p>Это основное содержимое. Когда включён премиум, реклама скрывается с помощью булевого атрибута <code>hidden</code>.</p></section>
<section class="controls" aria-label="Переключатель премиума">
<button id="become-premium" type="button">Стать премиум</button>
<button id="cancel-premium" type="button" hidden>Отменить премиум</button>
<p id="premium-msg" role="status" hidden>Вы премиум! Реклама скрыта.</p>
</section>
<aside id="ad" class="ad" aria-label="Рекламный блок">
Реклама: купите слона 🐘 — только сегодня скидка 50%!
</aside>
<section class="content">
<p>Это основное содержимое. Когда включён премиум, реклама скрывается с помощью булевого атрибута <code>hidden</code>.</p>
</section>
let isPremium = falseconst ad = document.getElementById('ad')const upsell = document.getElementById('upsell')const premiumMsg = document.getElementById('premium-msg')const becomeBtn = document.getElementById('become-premium')const cancelBtn = document.getElementById('cancel-premium')function render() { ad.hidden = isPremium premiumMsg.hidden = !isPremium // Кнопки: показываем нужную becomeBtn.hidden = isPremium cancelBtn.hidden = !isPremium}becomeBtn.addEventListener('click', () => { isPremium = true; render() })cancelBtn.addEventListener('click', () => { isPremium = false; render() })render()
let isPremium = false
const ad = document.getElementById('ad')
const upsell = document.getElementById('upsell')
const premiumMsg = document.getElementById('premium-msg')
const becomeBtn = document.getElementById('become-premium')
const cancelBtn = document.getElementById('cancel-premium')
function render() {
ad.hidden = isPremium
premiumMsg.hidden = !isPremium
// Кнопки: показываем нужную
becomeBtn.hidden = isPremium
cancelBtn.hidden = !isPremium
}
becomeBtn.addEventListener('click', () => { isPremium = true; render() })
cancelBtn.addEventListener('click', () => { isPremium = false; render() })
render()
Обратите внимание: hidden полностью убирает элемент из потока документа и из дерева доступности — скринридеры его не увидят.
На собеседовании
СкопированоЧитайте также
-
displayКак поставить несколько элементов
<div>в строку? Объясняем, как менять стандартный тип отображения на произвольный. Подробно говорим об основных типах отображения.