Graben in die Anzeigeeigenschaft: Die zwei Werte der Anzeige

Ein Flex- oder Grid-Layout beginnt damit, dass Sie display: flex oder display: grid deklarieren. Diese Layoutmethoden sind Werte der CSS- display . Wir neigen dazu, nicht viel über diese Eigenschaft zu sprechen, sondern konzentrieren uns stattdessen auf die Werte von flex oder grid . Es gibt jedoch einige interessante Dinge, die Sie über display und ihre Definition verstehen sollten, die Ihnen das Leben bei der Verwendung erheblich erleichtern werden CSS für Layout.

In diesem Artikel, dem ersten einer kurzen Serie, werde ich einen Blick darauf werfen, wie die display in der Level-3-Spezifikation definiert sind. Dies ist eine Änderung gegenüber der Definition der display in früheren CSS-Versionen. Während es für diejenigen von uns, die seit vielen Jahren mit CSS arbeiten, zunächst ungewöhnlich erscheinen mag, denke ich, dass diese Änderungen wirklich dazu beitragen, zu erklären, was passiert, wenn wir den display eines Elements ändern.

Block- und Inline-Elemente

Eines der ersten Dinge, die wir CSS-Neulingen beibringen, sind die Konzepte von Block- und Inline-Elementen. Wir werden erklären, dass einige Elemente auf der Seite display: block sind und deshalb bestimmte Funktionen haben. Sie dehnen sich in Inline-Richtung aus und nehmen so viel Platz ein, wie ihnen zur Verfügung steht. Sie brechen auf eine neue Zeile auf; Wir können ihnen Breite, Höhe, Rand sowie Polsterung geben, und diese Eigenschaften werden andere Elemente auf der Seite von ihnen wegschieben.

Wir wissen auch, dass einige Elemente display: inline . Inline-Elemente sind wie Wörter in einem Satz; Sie brechen nicht in eine neue Zeile ein, sondern reservieren stattdessen einen weißen Raum zwischen sich. Wenn Sie Ränder und Auffüllungen hinzufügen, wird dies zwar angezeigt, andere Elemente werden jedoch nicht verdrängt.

Das Verhalten von Block- und Inline-Elementen ist grundlegend für CSS und die Tatsache, dass ein ordnungsgemäß markiertes HTML-Dokument standardmäßig lesbar ist. Dieses Layout wird als „Block- und Inline-Layout“ oder „Normaler Fluss“ bezeichnet, weil sich die Elemente so anordnen, wenn wir nichts anderes mit ihnen machen.

Innere und äußere Werte der display

Wir verstehen Block- und Inline-Elemente, aber was passiert, wenn wir ein Element display: grid ? Ist das etwas ganz anderes? Wenn wir uns eine Komponente ansehen, für die wir display: grid angegeben haben, verhält sie sich in Bezug auf das übergeordnete Element im Layout wie ein Element auf block level . Das Element dehnt sich aus und nimmt so viel Platz in der Inline-Dimension ein, wie verfügbar ist, es beginnt in einer neuen Zeile. Es verhält sich wie ein block im Verhältnis zum Rest des Layouts. Wir haben nicht display: block gesagt, oder doch?

Es stellt sich heraus, dass wir haben. In Level 3 der Display-Spezifikation ist der Wert von display als zwei Schlüsselwörter definiert. Diese Schlüsselwörter definieren den äußeren Wert der Anzeige, der inline oder block sein wird, und definieren daher, wie sich das Element im Layout neben anderen Elementen verhält. Sie definieren auch den inneren Wert des Elements – oder wie sich die direkten Kinder dieses Elements verhalten.

Das heißt, wenn Sie display: grid sagen, sagen Sie eigentlich display: block grid . Sie fragen nach einem Grid-Container auf Blockebene. Ein Element, das alle Blockattribute hat – Sie können ihm Höhe und Breite, Rand und Polsterung geben, und es wird gedehnt, um den Container zu füllen. Den Kindern dieses Containers wurde jedoch der innere Wert von grid gegeben, sodass sie zu Grid-Elementen werden. Wie sich diese Grid-Elemente verhalten, ist in der CSS-Grid-Spezifikation definiert: Die display gibt uns eine Möglichkeit, dem Browser mitzuteilen, dass dies die Layout-Methode ist, die wir verwenden möchten.

Ich denke, dass diese Art, über display nachzudenken, unglaublich hilfreich ist; es erklärt direkt, was wir mit verschiedenen Layout-Methoden machen. Wenn Sie display: inline flex angeben würden, was würden Sie erwarten? Hoffentlich eine Box, die sich wie ein Inline-Element verhält, mit Kindern, die flexible Elemente sind.

Es gibt ein paar andere Dinge, die ordentlich erklärt werden, wenn man über display auf diese neue Art und Weise nachdenkt, und ich werde mir einige davon im Rest dieses Artikels ansehen.

Wir kehren immer zum normalen Fluss zurück

Wenn wir über diese inneren und äußeren Darstellungseigenschaften nachdenken, kann es hilfreich sein zu überlegen, was passiert, wenn wir überhaupt nicht mit dem Wert der Darstellung herumspielen. Wenn Sie etwas HTML schreiben und es in einem Browser anzeigen, erhalten Sie ein Block- und Inline-Layout oder einen normalen Fluss. Die Elemente werden als block oder inline Elemente angezeigt.

Das folgende Beispiel enthält ein Markup, das ich in ein Medienobjekt umgewandelt habe, indem ich das div display: flex (die beiden direkten Kinder) jetzt zu Flex-Elementen gemacht habe, sodass das Bild jetzt in einer Reihe mit dem Inhalt steht. Wenn Sie jedoch im Inhalt sehen, gibt es eine Überschrift und einen Absatz, die wieder im normalen Fluss angezeigt werden. Die direkten Kinder des Medienobjekts wurden zu flexiblen Elementen; Ihre untergeordneten Elemente kehren zum normalen Fluss zurück, es sei denn, wir ändern den Anzeigewert des Flex-Elements. Der Flex-Container selbst ist eine Blockbox, wie Sie daran erkennen können, dass der Rahmen bis zum Rand seines übergeordneten Containers reicht.

Wenn Sie mit diesem Prozess arbeiten, ist die Tatsache, dass Elemente auf Ihrer Seite sich selbst mit diesem gut lesbaren normalen Flusslayout anordnen, anstatt dagegen anzukämpfen und zu versuchen, alles zu platzieren, CSS viel einfacher. Es ist auch weniger wahrscheinlich, dass Sie auf Barrierefreiheitsprobleme stoßen, da Sie mit der Dokumentreihenfolge arbeiten, was genau das ist, was ein Bildschirmleser oder eine Person tut, die durch das Dokument blättert.

flow-root und inline-block erklären

Der Wert von inline-block ist wahrscheinlich auch vielen von uns bekannt, die sich schon eine Weile mit CSS beschäftigen. Dieser Wert ist eine Möglichkeit, einen Teil des Blockverhaltens eines inline -Elements zu erhalten. Beispielsweise kann ein inline-block Element eine Breite und eine Höhe haben. Ein Element mit display: inline-block verhält sich ebenfalls interessant, indem es einen Block Formatting Content (BFC) erzeugt.

Ein BFC macht einige nützliche Dinge in Bezug auf das Layout, zum Beispiel enthält es Floats. Weitere Informationen zu Blockformatierungskontexten finden Sie in meinem vorherigen Artikel „CSS-Layout und Blockformatierungskontext verstehen“. Wenn Sie also display: inline-block sagen, erhalten Sie eine Inline-Box, die auch einen BFC erstellt.

Wie Sie feststellen werden (wenn Sie den oben erwähnten Artikel über den Blockformatierungskontext lesen), gibt es einen neueren Wert von display, der auch explizit einen BFC erstellt. Dies ist der Wert von flow-root . Dieser Wert erstellt einen BFC für einen Block und kein Inline-Element.

• display: inline-block gibt Ihnen einen BFC auf einer Inline-Box.
• display: flow-root gibt Ihnen einen BFC auf einer Blockbox.

Sie denken jetzt wahrscheinlich, dass das alles etwas verwirrend ist: Warum haben wir hier zwei völlig unterschiedliche Schlüsselwörter und was ist mit der zweiwertigen Syntax passiert, über die wir zuvor gesprochen haben? Dies führt direkt zum nächsten Punkt, den ich über display erklären muss, nämlich die Tatsache, dass CSS eine Geschichte hat, mit der wir uns in Bezug auf die Eigenschaft display befassen müssen.

Legacy-Werte der Anzeige

Die CSS2-Spezifikation enthält die folgenden Werte für die display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

Außerdem wurden die verschiedenen tabelleninternen Eigenschaften wie table-cell definiert, mit denen wir uns in diesem Artikel nicht befassen.

Wir haben diesen dann einige Werte für die Anzeige hinzugefügt, um das Flex- und Grid-Layout zu unterstützen:

• grid
• inline-grid
• flex
• inline-flex

Hinweis : Die Spezifikation definiert auch ruby und inline-ruby zur Unterstützung von Ruby Text, worüber Sie in der Ruby-Spezifikation nachlesen können.

Dies sind alles einzelne Werte für die display Eigenschaft, die definiert wurden, bevor die Spezifikation aktualisiert wurde, um das CSS-Layout auf diese Weise zu erklären. Etwas sehr Wichtiges bei CSS ist die Tatsache, dass wir nicht herumlaufen und das Web brechen; Wir können die Dinge nicht einfach ändern . Wir können nicht plötzlich entscheiden, dass jeder diese neue Syntax mit zwei Werten verwenden sollte, und daher wird jede jemals erstellte Website, die die Syntax mit einem Wert verwendet hat, kaputt gehen, es sei denn, ein Entwickler geht zurück und behebt sie!

Während Sie über dieses Problem nachdenken, können Sie sich an dieser Liste von Fehlern im Design von CSS erfreuen, die in vielen Fällen weniger Fehler sind als Dinge, die ohne eine Kristallkugel entworfen wurden, um in die Zukunft zu sehen! Tatsache ist jedoch, dass wir das Web nicht brechen können, weshalb wir diese Situation haben, in der Browser derzeit einen Satz von Einzelwerten für die Anzeige unterstützen und die Spezifikation auf zwei Werte für die Anzeige umgestellt wird.

Um dies zu umgehen, geben wir Legacy- und Short-Werte für die Anzeige an, die alle diese Einzelwerte enthalten. Das bedeutet, dass ein Mapping zwischen Einzelwerten und zwei neuen Schlüsselwortwerten definiert werden kann. Was uns die folgende Wertetabelle gibt:

Um zu erklären, wie das funktioniert, können wir uns einen Grid-Container vorstellen. In der Zwei-Werte-Welt würden wir einen Grid-Container auf Blockebene erstellen mit:

 .container { display: block grid; }

Das Schlüsselwort „Legacy“ bedeutet jedoch, dass Folgendes dasselbe tut:

 .container { display: grid; }

Wenn wir stattdessen einen Inline-Grid-Container wollten, würden wir in der Zwei-Werte-Welt verwenden:

 .container { display: inline grid; }

Und wenn Sie die Legacy-Werte verwenden:

 .container { display: inline-grid; }

Wir können jetzt dorthin zurückkehren, wo diese Konversation begann, und uns display: inline-block ansehen. Wenn Sie sich die Tabelle ansehen, können Sie sehen, dass dies in der Zwei-Werte-Welt als display: inline flow-root definiert ist. Es stimmt jetzt mit display: flow-root überein, was in einer Welt mit zwei Werten display: block flow-root wäre. Ein bisschen Aufräumen und Klären, wie diese Dinge definiert sind. Ein Refactoring von CSS, wenn Sie möchten.

Browserunterstützung für die Zwei-Werte-Syntax

Bisher unterstützen Browser die Zwei-Werte-Syntax für die display nicht. Den Implementierungsfehler für Firefox finden Sie hier. Die Implementierung – wenn es passiert – würde im Wesentlichen das Aliasing der Legacy-Werte in die Zwei-Werte-Versionen beinhalten. Es wird daher wahrscheinlich eine ganze Weile dauern, bis Sie diese zweiwertigen Versionen tatsächlich in Ihrem Code verwenden können. Das ist jedoch wirklich nicht der Sinn dieses Artikels. Stattdessen denke ich, dass die Betrachtung der Anzeigewerte im Lichte des Zwei-Werte-Modells dazu beiträgt, vieles von dem zu erklären, was vor sich geht.

Wenn Sie das Layout für eine Box in CSS definieren, definieren Sie, was mit dieser Box im Hinblick darauf passiert, wie sie sich in Bezug auf alle anderen Boxen im Layout verhält . Sie definieren auch, wie sich die Kinder dieser Box verhalten. Sie können auf diese Weise denken, lange bevor Sie die Werte explizit als zwei getrennte Dinge deklarieren können, da die alten Schlüsselwörter diesen Werten zugeordnet sind, und es wird Ihnen helfen zu verstehen, was passiert, wenn Sie den Wert von display ändern.