Das `hidden`-Attribut ist sichtbar schwach

Es gibt ein HTML-Attribut, das genau das tut, was Sie denken.

<div>I'm visible</div>
<div hidden>I'm hidden</div>

Es hat sogar großartige Browserunterstützung. Ist es nützlich? Ähm. Vielleicht. Nicht wirklich.

Adam Laki mag die Semantik davon

Wenn wir das hidden-Attribut verwenden, verbessern wir unsere Semantik ein wenig. Jeder wird verstehen, was ein "hidden"-Attribut bei einem Element bedeutet.

Monica Dinculescu nennt es eine Lüge

Die `hidden`-Regel ist ein User-Agent-Stil, was bedeutet, dass sie weniger spezifisch ist als ein moderater Schnupfen. Das bedeutet, dass Ihr bevorzugter `display`-Stil sie überschreiben wird.

<style>
  div { display: block; }
</style>
<div hidden>
  lol guess who's not hidden anymore
  hint: it's this thing
</div>

Also zwei verwandte Probleme…

1. Es ist extrem schwach. Buchstäblich jede Änderung an der `display`-Eigenschaft außer dem Wert `none` bei dem Element mit einer beliebigen Selektorenstärke wird es überschreiben. Ähnlich wie jede andere `display`-Eigenschaft, wie `width` oder was auch immer, aber es fühlt sich irgendwie schlimmer an, ein `hidden`-Attribut aktiv auf einem Element zu haben und es dann nicht wirklich verborgen zu haben.
2. Die `display`-Eigenschaft ist leider mit Verantwortlichkeiten überladen. Es wäre wirklich cool, wenn `hidden` eine CSS-Eigenschaft wäre, die für die Sichtbarkeit/Zugänglichkeit von Elementen zuständig wäre, anstatt dieselbe Eigenschaft, die den Blocktyp steuert. Aber leider stoppt die Abwärtskompatibilität für das Leben des Webs das (was gut für die allgemeine Gesundheit des Webs ist).

Wenn Sie die Semantik des Attributs wirklich lieben, schlägt Monica vor

[hidden] { display: none !important; }

Scheint eine schöne Ergänzung zu jedem "Reset" oder jeder Basis-Stylesheet zu sein.

Ansonsten ist die klassische Technik, Dinge mit einer Klasse zu verstecken, absolut in Ordnung. Normalerweise habe ich eine Utility-Klasse

.hide, .hidden {
  display: none;
}

Aber denken Sie daran, dass es immer tausend Wege gibt, Dinge zu tun. Ich erwische mich regelmäßig dabei, One-Off-Hide/Show-Mechanismen zu implementieren. Zum Beispiel ein Menü, dessen Sichtbarkeit mit Flair umgeschaltet werden muss, aber jederzeit zugänglich bleibt…

.menu {
   opacity: 0;
   visibility: hidden;
   transition: 0.2s;
   transform: translateX(20px);
   &[data-open] {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
   }
}