Atributul inert în HTML

<main inert>...</main>

Ce face Atributul inert

Atributul boolean inert dezactivează tot conținutul unui element: linkurile și butoanele nu pot fi apăsate, câmpurile nu primesc focus cu Tab, textul nu poate fi selectat sau găsit cu Ctrl+F, iar tehnologiile asistive ignoră zona.

Este util când o parte a paginii nu trebuie folosită o vreme: conținutul din spatele unui meniu lateral deschis, un pas al formularului care încă nu e activ sau secțiunea care se încarcă. Este suportat în toate browserele principale (Chrome 102, Firefox 112, Safari 15.5).

Atributul nu schimbă aspectul elementului. Ca utilizatorul să înțeleagă că zona e inactivă, adaugă și un stil vizual, de exemplu [inert] { opacity: 0.5; }. Pentru ferestre modale, <dialog> deschis cu showModal() face singur restul paginii inert.

Atribute

Atribut	Descriere
inert	Atribut boolean. Prezența lui face elementul și toți descendenții inactivi.

Exemple

Exemplul 1: Pagină blocată cât timp meniul lateral este deschis

La deschiderea meniului, conținutul principal primește inert, deci Tab rămâne în meniu.

<style>[inert] { opacity: 0.4; }</style>

<button id="deschide">Meniu</button>
<nav id="meniu" hidden>
  <a href="/cursuri/">Cursuri</a>
  <button id="inchide">Închide</button>
</nav>
<main id="continut">
  <p>Cursul de HTML pentru începători, 250 lei.</p>
  <a href="/inscriere/">Înscrie-te</a>
</main>

<script>
  const meniu = document.getElementById("meniu");
  const continut = document.getElementById("continut");
  document.getElementById("deschide").onclick = () => { meniu.hidden = false; continut.inert = true; };
  document.getElementById("inchide").onclick = () => { meniu.hidden = true; continut.inert = false; };
</script>

Ce afișează browserul

După clic pe „Meniu”: apar linkul „Cursuri” și butonul „Închide”; textul cursului devine estompat și linkul „Înscrie-te” nu mai poate fi apăsat sau atins cu Tab.

Exemplul 2: Pas de formular inactiv până la completarea primului

Al doilea pas este vizibil, dar inert. Utilizatorul îl vede, însă nu îl poate completa încă.

<fieldset>
  <legend>Pasul 1: Date personale</legend>
  <input aria-label="Nume" value="Ana Ionescu">
</fieldset>
<fieldset inert style="opacity: 0.5;">
  <legend>Pasul 2: Plata</legend>
  <input aria-label="Număr card">
</fieldset>

Ce afișează browserul

Pasul 1: Date personale [Ana Ionescu]
Pasul 2: Plata [        ] (estompat; câmpul nu poate primi clic sau focus)

Greșeli frecvente

• Folosirea inert fără niciun indiciu vizual. Utilizatorul dă clic și nu se întâmplă nimic, fără să înțeleagă de ce.
• Punerea inert pe un părinte al ferestrei care trebuie să rămână activă. Copiii nu pot scăpa de inert-ul părintelui; zona activă trebuie să stea în afara elementului inert.
• Confuzia cu disabled: disabled se aplică doar câmpurilor de formular și le trimite ca dezactivate, pe când inert se aplică oricărei zone.

Comenzi înrudite

• Atributul hidden: Ascunde un element care nu este relevant acum; valoarea until-found îl lasă găsibil prin căutarea din pagină a browserului.
• Atributul tabindex: Controlează dacă un element poate primi focus din tastatură și dacă intră în ordinea de navigare cu tasta Tab.
• <dialog>: Element nativ pentru ferestre modale, pop-up-uri și alerte, cu fundal întunecat (backdrop) și închidere din tasta Escape.
• Atributele popover și popovertarget: Creează un popover nativ, deschis și închis de un buton fără JavaScript, afișat deasupra restului paginii.