Was ist der Unterschied zwischen dem versteckten Attribut (HTML5) und der Anzeige: Keine Regel (CSS)?

110

HTML5 verfügt über ein neues globales Attribut, hiddenmit dem Inhalte ausgeblendet werden können.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS hat die display:noneRegel, mit der auch Inhalte ausgeblendet werden können.

article { display:none; }

Optisch sind sie identisch. Was ist der semantische Unterschied? Computergestützt?

Welche Richtlinien sollte ich beachten, wenn ich die eine oder andere verwenden soll?

TIA.

BEARBEITEN : Basierend auf den Antworten von @ newtron (unten) habe ich mehr gesucht. Das hiddenAttribut wurde letztes Jahr heiß umkämpft und schaffte es (anscheinend) kaum in die HTML5-Spezifikation. Einige argumentierten, es sei überflüssig und habe keinen Zweck. Soweit ich das beurteilen kann, lautet die endgültige Bewertung wie folgt: Wenn ich nur auf Webbrowser abziele, gibt es keinen Unterschied. (Auf einer Seite wurde sogar behauptet, dass Webbrowser display:nonedas versteckte Attribut implementiert haben.) Wenn ich jedoch die Barrierefreiheit in Betracht ziehe (z. B. erwarte ich möglicherweise, dass meine Inhalte von Bildschirmlesern gelesen werden), gibt es einen Unterschied. Die CSS-Regel display:noneverbirgt möglicherweise meinen Inhalt vor Webbrowsern, aber eine entsprechende Arienregel (z.aria-hidden="false" ) könnte versuchen, es zu lesen. Daher stimme ich jetzt zu, dass die Antwort von @ newtron richtig ist, obwohl sie vielleicht (wohl) nicht so klar ist, wie ich es gerne hätte. Vielen Dank an @newtron für Ihre Hilfe.

css html visibility james.garriss
quelle

Ich wusste nicht einmal, dass das hiddenAttribut existiert, aber sicherlich eine gute Frage, da es die Trennung von Struktur und Präsentation zu verletzen scheint.

Waldheinz

Für diejenigen, die noch nicht die Freude hatten, die HTML5-Spezifikation zu diesem Attribut zu lesen

james.garriss

w3.org/html/wg/wiki/ChangeProposals/removehidden

Yiğit Yener

Lies das schon, @Yigit. Es ist auch über ein Jahr alt. Und versteckt ist noch in der Spezifikation. Das würde mir zeigen, dass der Vorschlag keine Konvertiten gewonnen hat.

James.garriss

Danke für die Bearbeitung. Entschuldigung, es war nicht klar! Die Informationen, die Sie oben hinzugefügt haben, sind großartig. +1

Newtron

Antworten:

Der Hauptunterschied scheint zu sein, dass hiddenElemente unabhängig von der Präsentation immer ausgeblendet sind:

Das versteckte Attribut darf nicht zum Ausblenden von Inhalten verwendet werden, die in einer anderen Präsentation legitim angezeigt werden könnten. Zum Beispiel ist es falsch, ausgeblendete Bedienfelder in einem Dialogfeld mit Registerkarten auszublenden, da die Benutzeroberfläche mit Registerkarten lediglich eine Art Überlaufpräsentation darstellt. Sie können auch alle Formularsteuerelemente auf einer großen Seite mit einer Bildlaufleiste anzeigen. Es ist ebenfalls falsch, dieses Attribut zu verwenden, um Inhalte nur vor einer Präsentation auszublenden. Wenn etwas als ausgeblendet markiert ist, wird es vor allen Präsentationen ausgeblendet, einschließlich beispielsweise Bildschirmleseprogrammen.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Da CSS auf verschiedene Medien / Präsentationstypen abzielen kann display: none, hängt es von einer bestimmten Präsentation ab. Einige Elemente display: nonekönnen beispielsweise in einem Desktop-Browser angezeigt werden, jedoch nicht in einem mobilen Browser. Oder visuell versteckt sein, aber dennoch für einen Bildschirmleser verfügbar sein.

Newtron
quelle

Sie sagen also, dass versteckte Trümpfe angezeigt werden? Wenn ja, dann sagen Sie, dass der Zweck einfach darin besteht, die Präsentation zu überschreiben. Hmmm.

James.garriss

Ich vermute, dass versteckte Trümpfe angezeigt werden. aber ich habe nicht wirklich damit experimentiert. Es wäre ziemlich sinnlos, wenn das CSS es überschreiben könnte.

Newtron

Semantik gewinnt. Wenn es nicht vorhanden sein sollte, entfernen Sie es auf Dokumentebene aus dem Dokumentfluss. Wenn es Teil des Dokumentenflusses sein sollte, Sie aber in bestimmten Fällen nicht möchten, dass es Teil des visuellen Erlebnisses ist, behandeln Sie es auf der kosmetischen Ebene. Denken Sie daran, dass einige Agenten versuchen, CSS zu analysieren, und wenn sie feststellen, dass etwas nicht GESEHEN wird, geben sie es überhaupt nicht aus. Ich denke, das ist ein abweichendes Verhalten, aber es kann helfen, es zu wissen.

Bezogen auf einige der Kommentare hier (@ james-garris, @newtron), laut developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , zeigt die Anzeige tatsächlich versteckte Trümpfe - siehe Abbildung :-)

Jurko Gospodnetić

Ein wichtiger Unterschied, den ich auf der MDN-Seite für ausgeblendete Attribute festgestellt habe: "Das Ändern des Werts der CSS-Anzeigeeigenschaft für ein Element mit dem ausgeblendeten Attribut überschreibt das Verhalten. Beispielsweise wird die Anzeige display: flex im Elementstil trotz des Vorhandenseins des ausgeblendeten Attributs angezeigt."

Mohsinulhaq