HTML5 má jednu „skrytou“ vlastnost, o které se moc nemluví. Částečně proto, že pro nováčky je trochu matoucí a pro zkušení kodéry víceméně zbytečná. Mluvím o vlastnosti (atributu) hidden („skrytý„), který můžete nastavit na libovolný prvek a ten se pak bude chovat stejně jako s display:none.

V čem spočívá její smysl (a dalo by se říct i nesmysl)?

Smysl skrytého atributu

HTML definuje atribut hidden jako možnost skrytí prvku, který „není aktuálně relevantní, ale může být zobrazen později.“ Stručně a obecně řečeno, můžete hidden použít stejně jako display: none s tou výhodou, že napsat v HTML hidden je kratší než style="display:none" a v případě CSS nemusíte čekat a spoléhat na načtení CSS souboru.

Skrytý prvek můžete zobrazit pomocí Javaskriptu (nebo CSS, pokud víte jak) stejně, jako byste to udělali s display:none; např. zobrazit informaci o tom, že je uživatel přihlášen:

var el = document.getElementById("myProfileInfo")

//Nastavení vlastnosti
el.hidden = false;

//alternativní zápis přes atribut
el.removeAttribute("hidden");

Stejně tak můžete skrýt prvek, který již není nadále relevantní; například přihlašovací dialog:

var el = document.getElementById("loginButton")

//Nastavení vlastnosti
el.hidden = true;

//alternativní zápis
el.setAttribute("hidden", 1);

Pozor na to, že stejně jako třeba disabled, je i hidden booleová vlastnost, takže při jejím nastavení přes setAttribute() je potřeba zadat jedničku jako hodnotu. Vlastně jakákoliv hodnota znamená, že prvek bude skrytý – včetně hodnoty hidden=0!!!

Poznámka: zde narážíme na to, že vlastnosti jako hidden a disabled jsou v prohlížečích speciální konstrukty, které fungují jak jako vlastnost DOM prvku (el.hidden) tak i jako HTML atribut (<el hidden>), kdy prohlížeč automaticky synchronizuje jejich hodnotu – tedy nastavení vlastnosti el.hidden vytvoří nebo zruší atribut a naopak přidání/odebrání atributu nastaví vlastnosti el.hidden=true/false.

Nesmysl skrytého atributu

Jak jsem již psal výše, vlastnost hidden se chová dost nepochopitelně. Jde o to, že její funkce je stejná jako display:none, ale její priorita je nižší.

To má na jednu stranu výhodu v tom, že když prvek skryjete pomocí atributu hidden, můžete ho zobrazit pomocí existujících javaskriptů nebo CSS, které prvku nastavují styl display:

<label for=adresa">Chci zadat adresu</label>
<input type=checkbox name=adresa>
<figure id=adresa hidden>...</figure>
<style>
    input[name=adresa]:checked + #adresa { 
        display: block; 
    }
</style

Na druhou stranu atribut hidden přestává pracovat v případě, že byste jím chtěli skrýt prvek, který má nějakou speciální vlastnost display; v případě moderních webů se můžete bavit o hodnotách flexbox nebo grid, ale klidně může jít i o obrázek, který chcete zobrazit inline jako ikonu.

<style>
    #sidebar { display: grid; }
</style>

<section id=sidebar hidden>...</section>

V tomto případě vás čeká nemilé překvapení, protože sidebar bude od začátku vidět. Proč? Protože i když jste „později“ nadefinovali, že prvek je skrytý, tak vlastnost display má vyšší prioritu a tudíž se zobrazí coby grid.

Použití skrytého atributu

U atributu hidden, stejně jako u display: none, je důležité uvědomit si, že skrytý prvek je stále dostupný v DOMu a každý trochu zkušenější „hacker“ se k němu dostane. Nejde jím tedy skrýt věci, které nechcete, aby uživatel použil (např. byl by nesmysl skrýt text nebo video, za které musí uživatel nejprve zaplatit, aby se k němu dostal).

Použít se dá tedy na prvky, které nemají smysl v grafické nebo jiné podobě, ale uživatel je může nějakou normální cestou zobrazit (a tudíž ani nevadí, že se k nim dá dostat i nenormální cestou.

Skrytí a zobrazení částí formuláře

Jak už jsem uvedl výše, atribut hidden je skvělý pro skrytí částí formulářů, které se zobrazí až za určité podmínky – např. uživatel vyplní některé jiný prvek (např. zobrazení pole IČO po zaškrtnutí „Nakupuji na firmu“) nebo naopak něco vyplní (teď mluvím o zobrazení chybových hlášek).

Skrytí detailů

Atribut hidden je také skvělý při použití prvků jako je DT-DD u kterých chcete, aby se popis (DD) zobrazil až po kliku na výraz (např. ve stylu harmoniky).

ARIA a skrytá pomoc

Jedna skrytá vlastnost skryté vlastnosti je v tom, že i když je skrytá, může fungovat jako skrytý popis prvku (ještě mě stíháte sledovat?).

Abych to objasnil, libovolný prvek může svojí vlastností aria-labeledby (nebo aria-describedby, které má stejné chování) odkazovat na prvek, který je skrytý (ať už pomocí hidden, display:none nebo visibility:hidden) a asistenční služby obsah tohoto prvku dočasně „zobrazí“ (např. přečtou přes TTS), pokud si uživatel vyžádá bližší popis (resp. labeledby se obvykle přečte při focusu prvku).

<label for=hodnocení>
    Jak jste spokojeni s naší službou? 
    <span aria-hidden="true">Nespokojen</span>
    <input name=hodnocení 
        type=range min=1 max=10
        aria-labeledby=jmenoHodnoceni
        aria-describedBy=popisHodnoceni
    >
    <span aria-hidden="true">Spokojen</span>
</label>
<p hidden id=jmenoHodnocení>
    Hodnocení v rozsahu 1 pro zcela nespokojen
    do 10 pro plně spokojen.</p>
<p hidden id=popisHodnocení>
    V závislosti na vašich možnostech
    a možnostech vašeho prohlížeče
    použijte klávesnici pro posun
    jezdce nebo přímo zadejte hodnotu
    v rozsahu 1 až 10.</p>

Podpora v prohlížečích

Vlastnost hidden byla přidána v HTML5, ale překvapivě ji podporuje i Internet Explorer 11. U ostatních prohlížečů je podpora obdobná (Chrome 6+, Firefox 4+, Opera 11+, Safari/iOS 5+, Android 4+).

Dá se tedy říci, že v dnešní době (2020+) již není potřeba (ne)podporu vlastnosti řešit a lze ji bez problémů používat všude.

Kdyby přeci jenom, stačí do CSS přidat tento polyfill:

[hidden] { display: none; }