inert attribute

Baseline 2023 (Chrome 102, Safari 15.5, Firefox 112); breit verfügbar.

Chrome 102Edge 102Safari 15.5Firefox 112

Entfernt einen Teilbaum mit einem Attribut aus Fokus, Klicks und dem Accessibility Tree. Nutze es für Off-Canvas-Panels, deaktivierte Schritte in einem Wizard oder Inhalt hinter einem eigenen Overlay.

Step 1 (done)

Step 2

CSS

.fx-015 {
  display: grid;
  gap: 12px;
  font-family: system-ui
}
.fx-015-step {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px
}
.fx-015-step[inert] {
  opacity: .5;
  filter: grayscale(1)
}
.fx-015 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<section class="fx-015">
  <div inert class="fx-015-step"><h4>Step 1 (done)</h4><button>Edit</button></div>
  <div class="fx-015-step"><h4>Step 2</h4><button>Continue</button></div>
</section>

Fallback: Alle Evergreen-Browser unterstützen es; ältere würden den Inhalt fokussierbar lassen, also setze zusätzlich `aria-hidden`, wenn du sie anvisierst.

Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

Prompt

Nutze das `inert`-Attribut (nicht `tabindex=-1`-Schleifen oder `pointer-events:none`), um ganze Bereiche zu deaktivieren: geschlossene Drawer, inaktive Wizard-Schritte, Seiteninhalt hinter einem nicht-nativen Overlay. Style `[inert]` visuell, damit Nutzer sehen, dass es nicht verfügbar ist, und entferne das Attribut, wenn der Bereich wieder aktiv wird.