Ab Chrome 115 gibt es mehrere Werte für die CSS-Anzeigeeigenschaft. display: flex wird zu display: block flex und display: block wird zu display: block flow. Die einzelnen Werte, die Sie kennen, gelten jetzt als veraltet, werden jedoch aus Gründen der Abwärtskompatibilität in den Browsern beibehalten.

Warum ist es längst überfällig?

Kurz gesagt: Es verändert die Art und Weise, wie wir Dinge wie das Box-Modell erklären können. Die Spezifikation ist immer noch ein CR-Snapshot, was bedeutet, dass das W3C Erfahrungen von den Implementierern sammelt, um den Standard fertigzustellen. Daher könnte sich einiges davon noch ändern.

Die Überarbeitung teilt den Anzeigetyp in zwei Teile: den äußeren Anzeigetyp und den inneren Anzeigetyp.

Der äußere Anzeigetyp bestimmt, wie die Hauptbox selbst am Flow-Layout teilnimmt.

Der innere Anzeigetyp bestimmt, wie die untergeordneten Felder angeordnet sind (mit Ausnahme ersetzter Elemente, das ist etwas komplexer).

Daher wird display: flex zu display: block flex, was bedeutet, dass der äußere Anzeigetyp Block ist (es verhält sich außen wie ein Blockelement), aber seine untergeordneten Elemente werden gemäß dem Flex-Layout gerendert.

Dies ist das gleiche Verhalten wie zuvor, aber mit dieser Änderung können wir über den Einfluss der Anzeigeeigenschaft auf untergeordnete Elemente und umgebende Elemente sprechen. Meiner Meinung nach erleichtert dieses mentale Modell die Erstellung vorhersehbarerer Layouts und es ist einfacher, die verschiedenen Layoutmodi und ihre Auswirkungen zu erklären.

In neueren Kursen oder Tutorials muss eine gute Erklärung des Box-Modells nicht nur Ränder, Ränder, Abstände, Breite und Höhe, sondern auch die Boxgröße und die Anzeigeeigenschaft abdecken.

Was sind gültige Werte der Anzeigeeigenschaft?

Wie bereits erwähnt, sind einige alte Eigenschaften mittlerweile veraltet. Hier sind alle gültigen Eigenschaften:

Für die Anzeige der Syntax mit mehreren Werten: Äußere Typen, innere Typen, gültige äußere Typen sind block, inline und run-in. Gültige innere Anzeigetypen sind flow, flow-root, table, flex, grid und Rubin.

Es gibt auch gültige Einzelwerte: list-item, contents und none.

Darüber hinaus verfügt CSS über einige interne Anzeigewerte, die weiterhin gültig sind. Diese Werte werden berechnet, wenn Tabellen- oder Ruby-Anzeigetypen verwendet werden.

Die folgenden Kombinationen sind jetzt veraltet: inline-block, inline-table, inline-flex und inline-grid . Sie können durch ihre mehrwertigen Äquivalente ersetzt werden, z. B.: display: inline flex.

Mehrfachwerte werden in neueren Versionen moderner Browser unterstützt: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse für Multi-Keyword-Werte der Anzeigeeigenschaft.

Das war's Leute!

Vielen Dank fürs Lesen!