Syntax mit zwei Werten für display (und manchmal drei)

Sie kennen die Syntax mit einem Wert: .thing { display: block; }. Der Wert „block“ ist ein einzelner Wert. Es gibt viele Einzelwerte für display. Zum Beispiel inline-flex, was wie flex ist, da es ein Flex-Container wird, aber sich wie ein Element auf Inline-Ebene verhält und nicht wie ein Element auf Block-Ebene. Ziemlich intuitiv, aber besser bedient von einem System mit zwei Werten, das dasselbe Konzept breiter und ebenso intuitiv anwenden kann.

Für eine eingehende Betrachtung sollten Sie den Blogbeitrag von Rachel Andrew lesen: The two-value syntax of the CSS Display property. Die Spezifikation ist ebenfalls eine gute Lektüre, ebenso wie dieses Video von Miriam.

So stelle ich es mir im Gehirn vor

Sie wählen im Wesentlichen einen aus jeder Spalte, um das gewünschte Layout zu beschreiben. Die vorhandenen Werte, die wir ständig verwenden, lassen sich also ungefähr so darstellen:

Eine andere Art, über diese beiden Spalten nachzudenken, sind die **„äußeren“ und „inneren“** display-Werte. Außen, d. h. wie es mit anderen Elementen drumherum fließt. Innen, d. h. wie das Layout innerhalb dieser Elemente abläuft.

Kann man es tatsächlich benutzen?

Nicht wirklich. Firefox 70 ist der erste, der es implementiert, und mir sind keine weiteren Anzeichen für Unterstützung von Chrome oder Safari bekannt. Es ist eine großartige Weiterentwicklung von CSS, aber was die alltägliche Nutzung betrifft, wird es noch Jahre dauern. So etwas Grundlegendes wie das Layout will man nicht scheitern lassen, nur wegen dieses eher geringfügigen beschreibenden Vorteils. Wahrscheinlich ist es auch nicht die Mühe wert, mit @supports und Ähnlichem progressiv zu verbessern.

Einzelheiten

• Schauen Sie sich den Teil der automatischen Transformationen an. Nur weil Sie einem Element einen bestimmten Display-Wert zuweisen, heißt das nicht, dass dieser nicht unter bestimmten Umständen überschrieben werden kann. Ich gehe davon aus, dass es hauptsächlich um ein Element geht, das gezwungen wird, ein Flex-Element oder ein Grid-Element zu sein.
• Es gibt implizite Kurzformen. Wenn Sie zum Beispiel inline list-item verwenden, ist das eigentlich inline flow list-item, während list-item block flow list-item ist. Das alles erscheint ziemlich intuitiv.
• Sie verwenden immer noch Dinge wie table-row und table-header-group. Das sind Einzelwert-Konstrukte, ebenso wie contents und none.
• Spalte eins enthält technisch gesehen auch run-in, aber soweit ich weiß, hat kein Browser run-in display jemals unterstützt.
• Spalte zwei enthält technisch gesehen ruby, aber ich habe nie verstanden, was das überhaupt ist.

Wie wir über CSS sprechen

Ich mag, wie Rachel diese Änderung mit einem rationaleren mentalen und didaktischen Modell verbindet.

… Sie erklären die Interaktion von Boxen mit anderen Boxen korrekt, im Hinblick darauf, ob sie block- oder inline-basiert sind, plus das Verhalten der Kinder. Um zu verstehen, was display ist und tut, denke ich, dass sie eine sehr nützliche Klarstellung darstellen. Daher habe ich begonnen, display mit diesen beiden Werten zu lehren, um zu erklären, was passiert, wenn man Formatierungskontexte ändert.

Es ist immer aufregend, neue Features implementiert zu sehen. Ich hoffe, dass andere Browser diese Zwei-Wert-Versionen bald ebenfalls implementieren werden. Und dann, in nicht allzu ferner Zukunft, werden wir in der Lage sein, CSS so zu schreiben, wie wir es jetzt erklären, und die Beziehung zwischen Boxen und dem Verhalten ihrer Kinder klar demonstrieren.