Eintauchen in die Display-Eigenschaft: Box-Generierung

Dies ist der zweite einer kurzen Artikelserie über die display -Eigenschaft in CSS. Den ersten Artikel der Serie können Sie unter „The Two Values ​​Of Display“ lesen. Die display ist eine sehr nützliche Spezifikation, da sie all die verschiedenen Layoutmethoden, die wir haben, untermauert.

Während viele der Werte von display ihre eigene Spezifikation haben, werden viele Begriffe und Ideen in display detailliert beschrieben. Das bedeutet, dass das Verständnis dieser Spezifikation Ihnen hilft, die Spezifikationen zu verstehen, die im Wesentlichen die Werte der display beschreiben. In diesem Artikel werde ich einen Blick auf die Box-Generierungswerte von display – none und contents werfen.

Alles ist eine Kiste

In CSS erzeugt alles Boxen. Eine Webseite besteht im Wesentlichen aus einer Reihe von Block- und Inline-Boxen, etwas, das Sie sehr gut verstehen, wenn Sie DevTools in Ihrem bevorzugten Browser öffnen und mit der Auswahl von Elementen auf der Seite beginnen. Sie können die Boxen sehen, aus denen das Layout besteht, und wie ihre Ränder, Füllungen und Rahmen angewendet werden.

Steuern der Box-Generierung

Die Werte none und contents von display befassen sich damit, ob Boxen überhaupt erscheinen sollen. Wenn Sie Elemente in Ihrem Markup haben und nicht möchten, dass sie eine Box in CSS generieren, müssen Sie die Generierung der Box irgendwie unterdrücken. Es gibt zwei mögliche Dinge, die Sie tun möchten. Welche sind:

• Verhindern Sie die Generierung einer Box und aller ihrer untergeordneten Elemente.
• Verhindert die Generierung einer Box, zeigt aber trotzdem die untergeordneten Elemente an.

Wir können uns jedes dieser Szenarien der Reihe nach ansehen.

Anzeige: keine

Der none -Wert von display ist, wie wir die Generierung einer Box und aller Kinder dieser Box verhindern. Es tut so, als ob das Element überhaupt nicht da wäre. Daher ist es in Situationen nützlich, in denen Sie beabsichtigen, diesen Inhalt vollständig zu verbergen, vielleicht weil er später nach dem Aktivieren eines Links angezeigt wird.

Wenn ich ein Beispiel mit einem Absatz, einer ungeordneten Liste und einem weiteren Absatz habe, können Sie sehen, dass die Elemente im normalen Fluss angezeigt werden. Die ul hat einen Hintergrund und einen Rahmen sowie etwas Polsterung.

Wenn ich display: none zum ul hinzufüge, verschwindet es aus der visuellen Anzeige und nimmt die Kinder des ul sowie den Hintergrund und die Umrandung mit.

Wenn Sie display: none verwenden, wird der Inhalt vor allen Benutzern der Website ausgeblendet. Dies schließt Screenreader-Benutzer ein. Daher sollten Sie dies nur verwenden, wenn Sie beabsichtigen, dass die Box und alles darin für alle vollständig verborgen ist.

Es gibt Situationen, in denen Sie möglicherweise zusätzliche Informationen für Benutzer von Hilfstechnologien wie Bildschirmleseprogrammen hinzufügen, diese aber für andere Benutzer ausblenden möchten. In solchen Fällen müssen Sie eine andere Technik verwenden. Einige hervorragende Vorschläge macht Scott O'Hara in seinem Artikel „Inclusively Hidden“.

Die Verwendung display: none ist daher ziemlich einfach. Verwenden Sie es in einer Situation, in der Sie möchten, dass eine Box und ihr Inhalt aus der Anzeige, aus der Box-Baumstruktur und aus der Zugriffsbaumstruktur verschwinden (als ob sie überhaupt nie da gewesen wären).

Anzeige: Inhalt

Für das zweite Szenario müssen wir einen viel neueren Anzeigewert betrachten. Der Wert display: contents entfernt die Box, auf die er angewendet wird, auf die gleiche Weise wie display: none aus dem Box-Baum, lässt aber die untergeordneten Elemente an Ort und Stelle. Dies führt zu einem nützlichen Verhalten in Bezug auf Dinge, die wir dann in unseren Layouts tun können. Schauen wir uns ein einfaches Beispiel an und untersuchen es dann weiter.

Ich verwende das gleiche Beispiel wie zuvor, aber dieses Mal habe ich display: contents on the ul verwendet. Die Listenelemente sind jetzt sichtbar, sie haben jedoch keinen Hintergrund und Rahmen und verhalten sich so, als ob Sie der Seite li -Elemente ohne einschließendes ul hinzugefügt hätten.

Der Grund, warum das Entfernen einer Box und das Beibehalten der untergeordneten Elemente nützlich ist, liegt in der Art und Weise, wie sich andere display verhalten. Wenn wir den Wert von display ändern, tun wir dies für eine Box und die direkten Kinder dieser Box, wie ich im letzten Artikel beschrieben habe. Wenn ich display: flex zu den CSS-Regeln für ein Element hinzufüge, wird dieses Element zu einer Box auf Blockebene und die direkten Kinder werden zu Flex-Elementen. Die untergeordneten Elemente dieser Flex-Elemente kehren zum normalen Fluss zurück (sie sind nicht Teil des Flex-Layouts).

Sie können dieses Verhalten im nächsten Beispiel sehen. Hier habe ich ein enthaltendes Element, das Flex anzeigt, es hat vier direkte untergeordnete Elemente, drei div-Elemente und ein ul . Die ul hat zwei Listenelemente. Die direkten Kinder nehmen alle am Flex-Layout teil und legen sie als Flex-Items an. Die Listenelemente sind keine direkten untergeordneten Elemente und werden daher als Listenelemente im Feld der ul angezeigt.

Wenn wir dieses Beispiel nehmen und display: contents zum ul hinzufügen, wird die Box aus der visuellen Anzeige entfernt und die Kinder nehmen jetzt am Flex-Layout teil. Sie können sehen, dass sie keine direkten Kinder werden. Sie werden nicht wie die div- und ul -Elemente vom direkten untergeordneten universellen Selektor ( .wrapper > * ) ausgewählt, und sie behalten den ihnen zugewiesenen Hintergrund bei. Alles, was passiert ist, ist, dass die Box der enthaltenden ul entfernt wurde, alles andere läuft normal weiter.

Dies hat möglicherweise sehr nützliche Auswirkungen, wenn wir Elemente in HTML berücksichtigen, die für Barrierefreiheit und semantische Daten wichtig sind, aber eine zusätzliche Box erzeugen, die uns daran hindern kann, den Inhalt mit Flex- oder Grid-Layout anzuordnen.

Dies ist kein CSS-„Reset“

Sie haben vielleicht bemerkt, dass ein Nebeneffekt der Verwendung von display: contents darin besteht, dass der Rand und die Auffüllung des Elements entfernt werden. Dies liegt daran, dass sie mit der Box, einem Teil des CSS-Box-Modells, verwandt sind. Dies könnte dazu führen, dass Sie denken, dass display: contents eine gute Möglichkeit ist, sich schnell von der Auffüllung und dem Rand eines Elements zu befreien.

Dies ist eine Verwendung, die Adrian Roselli in freier Wildbahn entdeckt hat; Er war besorgt genug, um einen ausführlichen Beitrag zu schreiben, in dem er die damit verbundenen Probleme erläuterte – „ display: contents ist kein CSS-Reset“. Einige der Probleme, die er anspricht, sind auf ein unglückliches Zugänglichkeitsproblem in Browsern zurückzuführen, die derzeit mit Anzeige: Inhalten ausgestattet sind, die wir weiter unten besprechen werden. Aber selbst wenn diese Probleme gelöst sind, ist das Entfernen eines Elements aus dem Buchsbaum, nur um sich von Rand und Polsterung zu befreien, etwas extrem.

Nicht zuletzt wäre es problematisch für die zukünftige Wartung der Website, ein zukünftiger Entwickler könnte sich fragen, warum sie anscheinend nichts auf diese mysteriöse Box anwenden konnten – übersehend, dass sie entfernt wurde! Wenn Sie brauchen, dass margin und padding 0 sind, tun Sie Ihrem zukünftigen Ich einen Gefallen und setzen Sie sie auf althergebrachte Weise auf 0 . Reservieren Sie die Verwendung von display: contents für die Sonderfälle, in denen Sie die Box wirklich entfernen möchten.

Beachten Sie auch den Unterschied zwischen display: contents und CSS Grid Layout subgrid. Wo display: contents die Box, den Hintergrund und den Rahmen vollständig aus der Anzeige entfernt, würde ein Rasterelement zu einem Unterraster machen, würde alle Boxstile auf diesem Element beibehalten und nur die Spurgröße durchlaufen, sodass verschachtelte Elemente dasselbe Raster verwenden könnten. Erfahren Sie mehr in meinem Artikel „CSS Grid Level 2: Here Comes Subgrid“.

Zugänglichkeitsprobleme Und Anzeige: Inhalt

Ein ernstes Problem macht derzeit display: contents nicht für genau das nützlich, wofür es am nützlichsten wäre. Die offensichtlichen Fälle für display: contents sind Fälle, in denen zusätzliche Felder erforderlich sind, um Markup hinzuzufügen, das Ihre Inhalte für diejenigen, die Bildschirmlesegeräte oder andere Hilfsgeräte verwenden, leichter verständlich macht.

Das ul -Element unserer Liste in der ersten display: contents content CodePen ist ein perfektes Beispiel. Sie könnten das gleiche visuelle Ergebnis erzielen, indem Sie das Markup glätten und überhaupt keine Liste verwenden. Wenn der Inhalt jedoch semantisch eine Liste wäre, am besten von einem Screenreader als Liste verstanden und vorgelesen würde, sollte er als eine solche gekennzeichnet werden.

Wenn Sie dann möchten, dass die untergeordneten Elemente Teil eines Flex- oder Grid-Layouts sind, so als ob die Box der ul nicht da wäre, sollten Sie in der Lage sein, display: contents zu verwenden, um die Box wegzuzaubern und sie so zu machen – und doch zu verlassen die Semantik vorhanden. Die Spezifikation sagt, dass dies der Fall sein sollte,

„Die display -Eigenschaft hat keinen Einfluss auf die Semantik eines Elements: Diese wird durch die Dokumentsprache definiert und nicht von CSS beeinflusst. Abgesehen vom Wert none, der sich auch auf die Audio-/Sprachausgabe und die Interaktivität eines Elements und seiner Nachkommen auswirkt, wirkt sich die Eigenschaft display nur auf das visuelle Layout aus: Ihr Zweck besteht darin, Designern die Freiheit zu geben, das Layoutverhalten eines Elements zu ändern, ohne das zugrunde liegende Element zu beeinflussen Dokumentensemantik.“

Wie wir bereits besprochen haben, verbirgt der Wert none das Element vor Screenreadern, andere display sind jedoch nur dazu da, uns zu ermöglichen, die visuelle Anzeige zu ändern. Sie sollten die Semantik des Dokuments nicht berühren.

Aus diesem Grund waren viele von uns überrascht, als sie feststellten, dass display: contents tatsächlich das Element aus dem Barrierefreiheitsbaum in den beiden Browsern (Chrome und Firefox), die es implementiert hatten, entfernte. Daher wurde die Dokumentsemantik geändert, sodass ein Bildschirmleser nicht wusste, dass eine Liste eine Liste war, nachdem die ul mit display: contents entfernt worden war. Dies ist ein Browserfehler – und ein ernster dazu.

Letztes Jahr hat Hidde de Vries dieses Problem in seinem Beitrag „Zugänglicheres Markup mit display:contents “ beschrieben und hilfreiche Probleme gegenüber den verschiedenen Browsern angesprochen, um das Bewusstsein zu schärfen und sie dazu zu bringen, an einer Lösung zu arbeiten. Firefox hat das Problem teilweise behoben, obwohl es immer noch Probleme mit bestimmten Elementen wie Schaltflächen gibt. In Chrome wird aktiv an dem Problem gearbeitet. Es gibt auch ein Problem für WebKit. Ich würde Sie ermutigen, diese Fehler zu markieren, wenn Sie Anwendungsfälle für Anzeige haben: Inhalte, die von den Problemen betroffen wären.

Bis diese Probleme behoben sind und die Browserversionen, die das Problem aufwiesen, nicht mehr verwendet werden, müssen Sie sehr vorsichtig sein, wenn Sie display: content auf alles verwenden, was semantische Informationen übermittelt und Hilfstechnologien ausgesetzt werden muss. Wie Adrian Roselli feststellt,

„Bitte verwenden Sie vorerst nur display: content, wenn Sie mit Hilfstechnologien testen und bestätigen können, dass die Ergebnisse für die Benutzer funktionieren.“

Es gibt Orte, an denen Sie display: contents ohne Bedenken verwenden können. Eine wäre, wenn Sie zusätzliches Markup hinzufügen müssen, um Fallbacks für Ihr Raster von Flex-Layouts in älteren Browsern zu erstellen. Browser, die display: contents unterstützen, unterstützen auch Grid und Flexbox, daher könnten Sie display: contents weg von den redundanten div -Elementen hinzufügen. Im folgenden Beispiel habe ich ein Float-basiertes Raster erstellt, komplett mit Zeilenumbrüchen.

Dann verwende ich display: contents , um die Zeilenumbrüche zu entfernen, damit alle Elemente zu Rasterelementen werden und daher Teil des Rasterlayouts sein können. Dies könnte Ihnen ein zusätzliches Werkzeug beim Erstellen von Fallbacks für erweiterte Layouts bieten, da Sie, wenn Sie zusätzliches Markup hinzufügen müssen, es mit display: content entfernen können, wenn Sie Ihr Raster- oder Flex-Layout erstellen. Ich glaube nicht, dass diese Verwendung irgendwelche Probleme verursachen sollte – obwohl jemand bessere Informationen zur Barrierefreiheit als ich hat und auf ein Problem hinweisen kann, tun Sie dies bitte in den Kommentaren.

Einpacken

Dieser Artikel hat einen Blick auf die Feldgenerierungswerte der display geworfen. Ich hoffe, Sie verstehen jetzt das unterschiedliche Verhalten von display: none – das eine Box und alle untergeordneten Elemente vollständig entfernt, und display: contents , das nur die Box selbst entfernt. Sie sollten auch die potenziellen Probleme bei der Verwendung dieser Methoden in Bezug auf die Zugänglichkeit verstehen.