Logische Layoutverbesserungen mit ablaufbezogenen Kurzschreibweisen

Neue Kurzschreibweisen für logische Eigenschaften und neue Einsatzeigenschaften für Chromium.

Adam Argyle

Oriol Brufau

Seit Chromium 69 (3. September 2018) können Entwickler mithilfe von logischen Properties und Werten die Kontrolle über ihre internationalen Layouts behalten, indem sie logisch statt physisch die Richtung und die Dimensionen festlegen. In Chromium 87 wurden Abkürzungen und Offset-Werte eingeführt, um die Eingabe dieser logischen Eigenschaften und Werte etwas zu vereinfachen. Damit gleicht Chromium Firefox nach, der die Kurzzeichen seit Version 66 unterstützt. In Safari sind sie in der Tech Preview verfügbar.

Dokumentfluss

Wenn Sie mit logischen Eigenschaften, Inline- und Blockachsen bereits vertraut sind und sich nicht noch einmal einholen möchten, können Sie fortfahren. Andernfalls finden Sie hier eine kurze Auffrischung.

Im Deutschen werden Buchstaben und Wörter von links nach rechts gelesen, während Absätze von oben nach unten angeordnet sind. Im traditionellen Chinesisch werden Buchstaben und Wörter von oben nach unten geschrieben, während Absätze von rechts nach links angeordnet sind. Wenn wir in diesen beiden Fällen CSS schreiben, das einem Absatz „margin top“ zuweist, sorgen wir nur für einen angemessenen Abstand bei einem Sprachstil. Wenn die Seite aus dem Englischen ins traditionelle Chinesisch übersetzt wird, ergibt der Rand im neuen vertikalen Schreibmodus möglicherweise keinen Sinn.

Daher ist die Vorderseite der Verpackung international nicht sehr nützlich. So beginnt der Prozess der Unterstützung mehrerer Sprachen. Sie lernen die physische und die logische Seite des Boxmodells kennen.

Haben Sie schon einmal das Element p in den Chrome DevTools geprüft? In diesem Fall haben Sie möglicherweise festgestellt, dass die Standardstile für User-Agents nicht physisch, sondern logisch sind.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

CSS aus dem User-Agent-Stylesheet von Chromium

Der Rand befindet sich nicht oben oder unten, wie ein englischer Leser vielleicht glauben könnte. Es sind block-start und block-end. Diese logischen Eigenschaften entsprechen den Begriffen „oben“ und „unten“ für englischsprachige Leser, aber auch den Begriffen „rechts“ und „links“ für japanischsprachige Leser. Einmal geschrieben, überall einsetzbar.

Bei einem normalen Ablauf ist die Webseite absichtlich Teil dieser Mehrsprachigkeit. Wenn der Seiteninhalt entsprechend der Dokumentrichtung aktualisiert wird, werden das Layout und seine Elemente als „Im Fluss“ betrachtet. Weitere Informationen zu „in“ und „out of flow“ finden Sie in der MDN oder in der CSS-Displaymodulspezifikation. Logische Eigenschaften müssen nicht im Fluss sein, aber sie erledigen einen Großteil der Arbeit für Sie, wenn sich die Richtung ändert. Der Fluss impliziert eine Richtung, in die Buchstaben, Wörter und Inhalte fließen müssen. Das führt uns zu Block- und Inline-Wegbeschreibungen.

Die Blockrichtung ist die Richtung, in der neue Inhaltsblöcke verlaufen. Sie können sich beispielsweise fragen: „Wo soll der nächste Absatz eingefügt werden?“ Sie können sich das als „Inhaltsblock“ oder „Textblock“ vorstellen. Jede Sprache ordnet ihre Blöcke entlang ihrer jeweiligen block-axis an. block-start ist die Seite, auf der ein Absatz zuerst platziert wird, während block-end die Seite ist, in Richtung der neue Absätze fließen.

In der traditionellen japanischen Handschrift verläuft die Blockrichtung beispielsweise von rechts nach links:

Die Laufrichtung ist die Richtung, in der Buchstaben und Wörter geschrieben werden. Überlegen Sie, in welche Richtung Ihr Arm und Ihre Hand beim Schreiben bewegt werden. Sie bewegen sich entlang der inline-axis. inline-start ist die Seite, auf der Sie mit dem Schreiben beginnen, während inline-end die Seite ist, auf der der Text endet oder umgebrochen wird. Im obigen Video fließt das inline-axis von oben nach unten, im nächsten Video jedoch von rechts nach links.

flow-relative bedeutet, dass die für eine Sprache erstellten Stile kontextbezogen und angemessen in anderen Sprachen angewendet werden. Der Fluss der Inhalte richtet sich nach der Sprache, für die sie bereitgestellt werden.

Neue Kurzschreibweisen

Einige der folgenden Abkürzungen sind keine neuen Funktionen für den Browser. Sie sind vielmehr einfachere Möglichkeiten zum Schreiben von Stilen, da Werte für beide Block- oder Inline-Kanten gleichzeitig festgelegt werden können. Die logischen inset-*-Attribute bieten neue Möglichkeiten, da es keine langen Möglichkeiten gab, absolute Positionen mit logischen Attributen davor anzugeben. Da Einzüge und Kurzzeichen aber so gut zusammenpassen, erzähle ich Ihnen gleich alles über die neuen Funktionen für logische Properties, die in Chromium 87 eingeführt werden.

Kurzzeichen für Ränder

Es gibt keine neuen Funktionen, aber einige sehr praktische Tastenkürzel:
margin-block und margin-inline.

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

Bisher gab es keine Kurzschreibweise für „oben und unten“ oder „links und rechts“. Vermutlich referenzieren Sie alle vier Seiten mit der Abkürzung margin: 10px;. Jetzt können Sie mithilfe der Kurzschreibweise für logische Attribute einfach auf zwei komplementäre Seiten verweisen.

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

Padding-Kurzzeichen

Es wurden zwar keine neuen Funktionen eingeführt, aber noch mehr praktische Kurzschreibweisen:
padding-block und padding-inline.

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

Und die inline zusätzlichen Kurzbefehle:

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

Einzüge und Kurzzeichen

Die physikalischen Eigenschaften top, right, bottom und left können alle als Werte für die Eigenschaft inset geschrieben werden. Bei jedem Wert von position kann es von Vorteil sein, Ränder mit einem Einzug festzulegen.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

position: absolute;
inset: 1px 2px 3px 4px;

Das sollte sofort praktisch aussehen. „Inset“ ist eine Kurzform für die physischen Seiten und funktioniert genauso wie „margin“ und „padding“.

Neue Funktionen

Die Kurzschreibweise für physische Seiten ist zwar schon sehr praktisch, aber die logischen Funktionen, die durch zusätzliche inset-Kurzschreibweisen möglich sind, sind noch praktischer. Diese Kurzschriften erleichtern Entwicklern das Schreiben (sie sind kürzer zu schreiben), aber auch die potenzielle Reichweite für das Layout erhöhen, da sie flussrelativ sind.

position: absolute;
top: 10px;
bottom: 10px;

position: absolute;
inset-block: 10px;

position: absolute;
left: 10px;
right: 20px;

position: absolute;
inset-inline: 10px 20px;

Weitere Lesematerialien und eine vollständige Liste der Kurz- und Langzeichen für Einzüge finden Sie auf MDN.

Kurzzeichen für Rahmen

Für „Border“ und die verschachtelten Properties color, style und width gibt es jetzt auch neue logische Kurzschreibweisen.

border-top-color: hotpink;
border-bottom-color: hotpink;

border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;

border-left-style: dashed;
border-right-style: dashed;

border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;

border-left-width: 1px;
border-right-width: 1px;

border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

Weitere Informationen und eine vollständige Liste der Kurz- und Langform für Rahmen finden Sie auf MDN.

Beispiel für ein logisches Attribut <figure>

Sehen wir uns das anhand eines kleinen Beispiels an. Mit logischen Properties kann ein Bild mit einer Bildunterschrift für unterschiedliche Schrift- und Dokumentrichtungen layoutet werden.

Oder probieren Sie es einfach aus.

Mit einer <figure> und einigen logischen Eigenschaften können Sie eine Karte international responsiv gestalten. Wenn Sie wissen möchten, wie diese international ausgerichteten Preisvergleichsportale zusammenarbeiten, hoffe ich, dass Ihnen dieser Artikel eine kleine Orientierung bietet.

Polyfilling und browserübergreifende Unterstützung

Die Tools „Cascade“ oder „Build“ sind gute Optionen, um alte und neue Browser mit aktualisierten logischen Eigenschaften richtig zu platzieren. Folgen Sie für Cascade-Fallbacks einer physischen Eigenschaft mit einer logischen Eigenschaft. Der Browser verwendet dann die letzte Eigenschaft, die bei der Stilauflösung gefunden wurde.

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

Das ist jedoch nicht für alle eine Komplettlösung. Hier ist ein handgeschriebener Fallback, der die Pseudoauswahl :lang() nutzt, um auf bestimmte Sprachen auszurichten, den physischen Abstand entsprechend anpasst und am Ende den logischen Abstand für unterstützte Browser anbietet:

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

Sie können auch @supports verwenden, um festzulegen, ob physische Unterkünfte als Fallbacks angegeben werden sollen:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emotion und andere bieten automatisierte Bundler und/oder Buildzeit-Angebote mit einer Vielzahl von Fallbacks oder Lösungen. Sehen Sie sich die einzelnen an, um herauszufinden, welche zu Ihrer Toolchain und Ihrer allgemeinen Websitestrategie passt.

Nächste Schritte

Es werden noch weitere logische Properties in CSS hinzukommen. Es gibt jedoch eine große Reihe von Kurzzeichen, die noch fehlen. Eine Lösung für dieses GitHub-Problem steht noch aus. Es gibt eine vorläufige Lösung in einem Entwurf. Wie können Sie alle logischen Seiten einer Box mit einer Abkürzung gestalten?

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

Der aktuelle Entwurf würde bedeuten, dass Sie in jeder Kurzschreibweise logical schreiben müssen, damit das logische Äquivalent angewendet wird. Das klingt für manche nicht sehr DRY.

Es gibt noch andere Vorschläge, dies auf Block- oder Seitenebene zu ändern. Dabei könnten jedoch logische Verwendungen in Stilen verloren gehen, die immer noch von physischen Seiten ausgehen.

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

Das ist eine schwierige Frage. Wir freuen uns auf deine Stimme und deine Meinung.

Möchten Sie mehr über logische Eigenschaften erfahren oder diese studieren? Hier ist eine detaillierte Referenz, zusammen mit Leitfäden und Beispielen, auf der MDN 🤓

Feedback

• Wenn Sie Änderungen an der CSS-Syntax von ablaufrelativen Kurzschreibweisen vorschlagen möchten, prüfen Sie zuerst die vorhandenen Probleme im Repository „csswg-drafts“. Wenn keines der vorhandenen Probleme mit Ihrem Vorschlag übereinstimmt, erstellen Sie ein neues Problem.
• Wenn Sie Fehler bei der Implementierung von flussrelativen Kurzzeichen in Chromium melden möchten, prüfen Sie zuerst die vorhandenen Probleme im Chromium-Fehler-Tracker. Wenn keines der vorhandenen Probleme zu Ihrem Fehler passt, erstellen Sie ein neues Problem.