Logische Eigenschaften und Werte verstehen

In der Vergangenheit hat sich CSS an physische Dimensionen und Richtungen gebunden und die Platzierung von Elementen physikalisch nach links, rechts und oben und unten abgebildet. Wir float ein Element left oder right , wir verwenden die Positionierungs-Offset-Eigenschaften top , left , bottom und right . Wir setzen Ränder, Polsterung und Ränder als margin-top und padding-left . Diese physikalischen Eigenschaften und Werte sind sinnvoll, wenn Sie in einem horizontalen Schreibmodus und einer Schreibrichtung von oben nach unten und von links nach rechts arbeiten.

Sie machen weniger Sinn, wenn Sie einen vertikalen Schreibmodus verwenden, sei es für Ihr gesamtes Layout oder für einige Elemente. In diesem Artikel werde ich erklären, wie sich CSS ändert, um Schreibmodi zu unterstützen, und dabei einige der Dinge klären, die Sie in Bezug auf Flexbox und Grid verwirren könnten.

Als ich anfing, mit CSS Grid zu arbeiten und den Leuten die neue Spezifikation zu erklären, bemerkte ich, dass die Eigenschaft grid-area als einzeilige Abkürzung für die Einstellung aller vier Zeilen verwendet werden könnte. Daher würden die drei folgenden Beispiele zu derselben Artikelplatzierung führen. Die erste verwendet die Longhand-Eigenschaften, die zweite gibt Start- und Endlinien für jede Dimension an und die dritte verwendet grid-area .

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

Die Reihenfolge der Linien, wenn wir grid-area verwenden, ist wie folgt:

• Grid-Row-Start
• Grid-Column-Start
• Grid-Row-Ende
• Grid-Column-Ende

Die erste Frage, die ich (und viele Leute in meinem Publikum) hatte, war: „Warum folgen diese nicht der Reihenfolge Oben, Rechts, Unten, Links, die wir von allem anderen in CSS gewohnt sind?“ Sie gehen tatsächlich in umgekehrter Reihenfolge zu diesen Werten: Oben, Links, Unten, Rechts! Versucht die CSS-Arbeitsgruppe aktiv, die Dinge zu erschweren?

Die Antwort ist, dass sich diese Werte von der zugrunde liegenden Annahme entfernt haben, dass der Inhalt im Web den physischen Abmessungen des Bildschirms entspricht, wobei das erste Wort eines Satzes oben links in der Box steht, in der es sich befindet. Die Reihenfolge der Zeilen im grid-area ist absolut sinnvoll, wenn Sie noch nie auf die bestehende Art und Weise gestoßen sind, wie wir diese Werte in Kurzschrift festlegen. Wir setzen zuerst die beiden Startlinien, dann die beiden Endlinien.

Das bedeutet, dass, wenn wir den Schreibmodus unseres Dokuments in einen vertikalen ändern, die Position eines Blocks relativ zum Schreibmodus des Dokuments bleibt und nicht zu den physikalischen Eigenschaften des Bildschirms. Sie können dies im folgenden Beispiel ausprobieren, den Wert für den Schreibmodus für unser Layout ändern und sehen, wie sich das gesamte Raster dreht.

Das Wissen um diese Tatsache über Schreibmodi erklärt auch, warum CSS Grid und Flexbox auf start und end verweisen, anstatt das Raster auf die physischen Dimensionen von oben, rechts, unten und links abzubilden, wie wir es bei der absoluten Positionierung verwenden würden. Im obigen Beispiel wird das erste Element mithilfe grid-area und linienbasierten Positionierung positioniert.

 grid-area: 1 / 2 / 3 / 4;

Wenn wir die Langschrift verwenden würden, würde dies so aussehen:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

Wir setzen beide Startlinien, zuerst die Blockachse, dann die Inline-Achse und folgen dann dem gleichen Muster für die Endlinien in jeder Dimension. Unabhängig davon, wie das Raster angeordnet ist, bleiben die Start- und Endlinien relativ zum Raster und Schreibmodus des Dokuments.

Block- und Inline-Dimensionen

Ich habe bereits etwas erwähnt, was der Schlüssel zum Verständnis des neuen Layouts ist, das Konzept der Block- und Inline-Dimensionen. Diese Begriffe werden immer wieder auftauchen, wenn Sie mit neuem CSS arbeiten. Die beiden Dimensionen sind im Kontext des Grid-Layouts ziemlich einfach zu verstehen, da wir beim Arbeiten im Grid-Layout immer mit einem Block und einer Inline-Achse arbeiten, daher werde ich eine Grid-Demo verwenden, um es zu erklären.

Die Blockdimension entspricht der Reihenfolge, in der Blöcke auf der Seite angeordnet sind. Wenn Sie an einen englischen Textabsatz denken. Jeder Absatz ist untereinander angeordnet, die Richtung, in der diese angeordnet sind, ist die Blockdimension, und im Grid-Layout ist dies die Blockachse.

In CSS Grid Layout wird die Blockachse auch als Zeilenachse bezeichnet, weshalb die Eigenschaften der Blockachse grid-row-start und grid-row-end sind.

Die Inline-Achse verläuft daher quer zur Blockachse in der Richtung, in der Wörter in einem Satz angeordnet sind. Im Englischen verläuft diese Achse von links nach rechts. Im Grid-Layout ist die Inline-Achse die Spaltenachse mit den Eigenschaften grid-column-start und grid-column-end .

Wenn wir den Schreibmodus unseres Beispiels auf vertical-lr ändern, ist der Schreibmodus jetzt vertikal, was bedeutet, dass die Blockachse vertikal verläuft und die Inline-Achse entlang der Zeilen (von oben nach unten).

Wenn wir also über die Block-Dimension sprechen, beschreiben wir die Richtung, in der Textabsätze im normalen Dokumentenfluss angeordnet würden, wobei die Inline-Dimension die Richtung ist, in der ein Satz läuft.

Logische Eigenschaften

Sobald Sie sich daran gewöhnt haben, mit Block- und Inline-Dimensionen, Start- und Endlinien zu arbeiten, fühlt sich die Verknüpfung mit physischen Dimensionen im restlichen CSS unangenehm an. Es gibt jedoch eine Spezifikation, die logische Versionen aller existierenden physikalischen Eigenschaften definiert – die CSS Logical Properties and Values-Spezifikation, die ein erster öffentlicher Arbeitsentwurf ist. Derzeit ist Firefox der einzige Browser mit guter Unterstützung für diese Eigenschaften, aber zu verstehen, wie sie funktionieren, kann eine gute Möglichkeit sein, über neues CSS nachzudenken, also lassen Sie uns einen Blick darauf werfen.

Ich habe jeden Abschnitt mit CodePen-Beispielen illustriert, um zu sehen, wie diese funktionieren, müssen Sie Firefox verwenden!

Logische Dimensionen

Die logischen Eigenschaften definieren eine Start- und Endeigenschaft für die Block- und Inline-Dimension. Für Höhen- und Breiteneigenschaften verwenden wir stattdessen block-size und inline-size . Wir können auch max-block-size , min-block-size , max-inline-size und min-inline-size setzen. Wenn Sie auf Englisch arbeiten, einer horizontalen Sprache von oben nach unten, dann bezieht sich die block-size auf die physische height des Blocks auf Ihrem Bildschirm, die inline-size auf die physische width des Elements. Wenn Sie in einer Sprache arbeiten, in der die Blöcke vertikal verlaufen, wird beim Betrachten Ihres Bildschirms die block-size angezeigt, um die width und die inline-size die Höhe zu steuern.

Sie können dies in der Demo unten in Aktion sehen. Mein Block hat eine block-size von 150 Pixel und eine inline-size von 250 Pixel. Ändern Sie die Eigenschaft writing-mode , um zu sehen, wie sich das Layout anpasst.

Logische Grenzen

Wir haben dann Eigenschaften, um Grenzen zu kontrollieren, die auf die gleiche Weise funktionieren. Die physikalischen Eigenschaften für Ränder sind:

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Diese haben dann logische Zuordnungen, die als Longhands etwas ausführlicher werden, aber sind:

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

Im folgenden Beispiel gibt es zwei Blöcke, wobei der erste logische Eigenschaften verwendet, um eine border-block-start-color auf Grün und einen border-inline-end-style auf gepunktet festzulegen. Der zweite Block verwendet die physikalischen Eigenschaften von border-top-color und border-right . Ändern Sie den Schreibmodus, um zu sehen, wie sich diese verhalten.

Ränder und Polsterung

Ränder und Polsterung haben ähnliche Eigenschaften wie unsere Bordüren, wobei die physikalischen Eigenschaften wie folgt sind:

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Diese haben folgende logische Eigenschaften:

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

In diesem nächsten Beispiel habe ich padding-block-start auf den ersten Block und padding-top auf den zweiten gesetzt, den Schreibmodus geändert, um den Unterschied zu sehen, wenn die Block- und Inline-Achsen umgeschaltet werden.

Positionierungs-Offsets

Ein weiterer Ort, an dem physikalische Eigenschaften verwendet werden, ist das Positionieren von Dingen mithilfe der position . Nach dem Festlegen von position: absolute oder einem anderen position als dem Standardwert von static können wir dann ein Element mithilfe von Offsets positionieren, entweder vom Ansichtsfenster oder von einem übergeordneten Element, das einen neuen Positionierungskontext erstellt hat.

Die physikalischen Offset-Eigenschaften sind:

• top
• right
• bottom
• left

Nach dem Muster unserer anderen logischen Eigenschaften haben wir dann:

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Probieren Sie diese im folgenden Beispiel aus. Das umrandete Kästchen hat die position: relative und das kleine violette Quadrat die position: absolute . Im physikalischen Beispiel ist das Quadrat top: 50px und right: 20px . Die logische Version hat offset-block-start: 50px und offset-inline-end: 20px .

Logische Werte

Ein weiterer Ort, an dem wir daran gewöhnt sind, physische Dimensionen zu verwenden, ist, wenn wir schweben oder Dinge klären. Für float , clear haben wir einige logische Versionen der left und right Werte.

• inline-start
• inline-end

In der Demo lasse ich den lila Block in der logischen Version inline-start schweben. Ich verwende auch logische Eigenschaften für den Rand; Dadurch wird sichergestellt, dass der Rand immer nach dem Block kommt und vor dem Inhalt, der ihn umschließt. Indem Sie den vertical-rl Wert in der Dropdown-Liste auswählen, können Sie sehen, wie der Rand im physikalischen Beispiel auf der rechten Seite des Blocks endet, anstatt in der -end -Richtung angewendet zu werden.

Es gibt auch start und end für text-align . Wenn Sie etwas am Anfang ausrichten, wird es am Anfang der Inline-Achse ausgerichtet, am end am Ende der Inline-Achse, unabhängig davon, ob der Schreibmodus horizontal oder vertikal ist.

Logische Eigenschaften und Werte heute verwenden

Wie bereits erwähnt, gibt es derzeit wenig Browserunterstützung für logische Eigenschaften und Werte. Wenn Sie jedoch jetzt damit beginnen möchten, mit ihnen zu arbeiten, besteht die Möglichkeit darin, Ihr CSS mit ihnen zu schreiben und dann ein PostCSS-Plugin zu verwenden, um die logischen Eigenschaften und Werte in ihre physischen Gegenstücke umzuwandeln. Dieses Plugin von Jonathan Neal deckt alle Eigenschaften und Werte ab, die ich in diesem Artikel beschrieben habe.

Sie können auch dazu beitragen, die Akzeptanz dieser Eigenschaften durch Browseranbieter zu fördern, indem Sie den Chrome-Fehler hervorheben und diese auf der Feedback-Website für Edge-Entwickler positiv bewerten.

Selbst wenn Sie sich entscheiden, diese Eigenschaften jetzt nicht zu verwenden, ist das Verständnis ihrer Funktionsweise ein wichtiger Teil des Verständnisses für die Arbeit mit einem neuen Layout. Wenn Sie Ihr Grid- oder Flex-Layout so beschreiben, dass es Start- und Endlinien hat, und über Block- und Inline-Dimensionen nachdenken, werden diese Dinge es viel einfacher machen, die Funktionsweise des Layouts zu verstehen.

Weiterführende Lektüre

• In den MDN-Webdokumenten sind alle logischen Eigenschaften und Werte mit zusätzlichen Beispielen aufgelistet.
• CSS Grid, logische Werte und Schreibmodi, MDN
• CSS-Schreibmodi, Jen Simmons, 24 Möglichkeiten