hidden
Ukrywa element: przeglądarka go nie wyświetla i nie odczytuje.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<p>Ten akapit widać.</p>
<p hidden>Tego akapitu nie widać, choć jest w kodzie.</p>
<button type="button" onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden">
Pokaż lub ukryj podpowiedź
</button>
<p hidden>Podpowiedź: zacznij od znacznika <h1>.</p>Definicja i zastosowanie
#Atrybut logiczny hidden oznacza, że element nie jest teraz istotny. Przeglądarka go nie pokazuje, a czytniki ekranu go pomijają. To tak, jakby element miał display: none.
Najczęściej przełącza się go w JavaScripcie: element.hidden = true chowa, false pokazuje. To prostsze i czytelniejsze niż dodawanie klasy ukrywającej.
Uwaga na CSS: jeśli nadasz elementowi własne display, na przykład display: flex, to reguła autora może wygrać z domyślnym stylem przeglądarki i element stanie się widoczny mimo atrybutu hidden.
Składnia
#<element hidden>…</element>Wartości
#hidden
lub pusty
Element jest ukryty i niedostępny dla użytkownika.until-found
Element jest ukryty, ale wyszukiwarka w przeglądarce może go znaleźć i odsłonić. Nowsza wartość, nie wszędzie jeszcze działa.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
[hidden] {
display: none;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli chcesz ukryć coś wizualnie, ale zostawić dla czytników ekranu, nie używaj
hidden, tylko klasy typusr-only. - Dodaj w arkuszu
[hidden] { display: none !important; }, żeby własne style nie odkrywały ukrytych elementów.
Powiązane hasła
#- inertWyłącza interakcję z elementem i jego potomkami: klikanie, fokus i czytniki ekranu.
- popoverZamienia element w wyskakujące okienko otwierane przyciskiem, bez JavaScriptu.
- <details>Rozwijana sekcja: nagłówek `<summary>` widać zawsze, a resztę treści po kliknięciu.
- <dialog>Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- aria-*Atrybuty ARIA opisują elementy dla czytników ekranu: nadają im nazwy, łączą je z opisami i informują o ich stanie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.