Logische Layoutverbesserungen mit ablaufbezogenen Kurzschreibweisen

Neue Kurzzeichen für logische Properties und neue Einblendungseigenschaften für Chromium.

Adam Argyle

Oriol Brufau

Seit Chromium 69 (3. September 2018) können Entwickler mithilfe von logischen Eigenschaften und ‑werten die Kontrolle über ihre internationalen Layouts behalten, indem sie statt physischer Richtungs- und Dimensionsstile logische verwenden. 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 geschrieben, 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 logische Seite des Boxmodells kennen.

Haben Sie schon einmal das Element p in den Chrome DevTools geprüft? In diesem Fall haben Sie vielleicht bemerkt, 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 englischsprachiger Leser vielleicht annehmen würde. 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 sich der Seiteninhalt entsprechend der Änderungen der Dokumentausrichtung aktualisiert, werden das Layout und seine Elemente beim Fluss berücksichtigt. 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 der Buchstaben, Wörter und Inhalte fließen müssen. Das führt zu logischen 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.inline-axis

flow-relative bedeutet, dass die für eine Sprache geschriebenen Stile kontextbezogen und angemessen in anderen Sprachen angewendet werden. Die Inhalte werden in der Sprache gesendet, für die sie bereitgestellt werden.

Neue Kurzschreibweisen

Einige der folgenden Kurzzeichen sind keine neuen Funktionen für den Browser, sondern einfachere Möglichkeiten zum Erstellen von Stilen, da Werte sowohl für Block- als auch für Inline-Ränder gleichzeitig festgelegt werden können. Die inset-*-logischen Properties bieten neue Möglichkeiten, da es zuvor keine Möglichkeit gab, absolute Positionen mit logischen Properties 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“. Sie verweisen wahrscheinlich mit der Kurzschreibweise margin: 10px; auf alle vier Seiten. Jetzt können Sie mit der Kurzschreibweise der logischen Eigenschaft ganz einfach auf zwei komplementäre Seiten verweisen.

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

margin-inline: 4ch 2ch;

Padding-Kurzzeichen

Es wurden keine neuen Funktionen eingeführt, aber es gibt jetzt noch mehr praktische Tastenkürzel:
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 Kurzzeichen erleichtern die Erstellung von Inhalten für Entwickler (da sie kürzer zu tippen sind), erhöhen aber auch die potenzielle Reichweite des Layouts, da sie flussabhängig 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 Langschreibweisen für Rahmen finden Sie auf MDN.

Beispiel für eine logische Property vom Typ <figure>

Sehen wir uns das anhand eines kleinen Beispiels an. Mit logischen Properties kann ein Bild mit einer Bildunterschrift für unterschiedliche Schriftrichtungen und Dokumentausrichtungen 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. Bei kaskadierenden Fallbacks folgt auf eine physische Property eine logische. Der Browser verwendet dann die „letzte“ Property, die er bei der Stilauflösung gefunden hat.

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 vollständige Lö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. Was ist, wenn Sie alle logischen Seiten eines Felds mit einer Kurzschreibweise formatieren möchten?

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 auch Vorschläge, die Ausrichtung auf Block- oder Seitenebene zu ändern. Das könnte jedoch zu logischen Verwendungen in Stilen führen, die weiterhin davon ausgehen, dass es physische Seiten gibt.

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? Eine ausführliche Referenz sowie Anleitungen und Beispiele finden Sie auf MDN. 🤓

Feedback

• Wenn Sie Änderungen an der CSS-Syntax von flussrelativen Kurzzeichen vorschlagen möchten, prüfen Sie zuerst die vorhandenen Probleme im csswg-drafts-Repository. Wenn keines der vorhandenen Probleme zu Ihrem Vorschlag passt, 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.