inert
Wyłącza interakcję z elementem i jego potomkami: klikanie, fokus i czytniki ekranu.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<style>
[inert] { opacity: 0.45; }
</style>
<section>
<p>Krok 1: podaj imię</p>
<input placeholder="Twoje imię">
</section>
<section inert>
<p>Krok 2: wybierz kurs (najpierw dokończ krok 1)</p>
<button type="button">HTML i CSS</button>
<button type="button">Python</button>
</section>Definicja i zastosowanie
#Atrybut logiczny inert sprawia, że fragment strony staje się „martwy”: nie da się w nim niczego kliknąć, zaznaczyć klawiszem Tab ani wyszukać, a czytniki ekranu go pomijają. Element nadal jest jednak widoczny.
Przydaje się, gdy część interfejsu jest chwilowo niedostępna: treść pod otwartym panelem bocznym, formularz podczas wysyłania albo kroki kreatora, do których użytkownik jeszcze nie doszedł.
Przeglądarka nie zmienia wyglądu takiego fragmentu, więc warto dodać własny styl, na przykład zmniejszoną przezroczystość, żeby użytkownik wiedział, że nie może z niego korzystać.
Składnia
#<element inert>…</element>Obsługa przeglądarek
#Szeroko dostępne · od 2023 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Modalny
<dialog>otwarty przezshowModal()sam czyni resztę strony nieaktywną, więc nie musisz dodawaćinertręcznie. - Nie oznaczaj jako
inerttreści, którą użytkownik musi przeczytać. Czytniki ekranu jej nie odczytają.
Powiązane hasła
#- hiddenUkrywa element: przeglądarka go nie wyświetla i nie odczytuje.
- tabindexDecyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
- <dialog>Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- popoverZamienia element w wyskakujące okienko otwierane przyciskiem, bez JavaScriptu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.