Neue Kurzschreibweisen für logische Eigenschaften und neue eingefügte Eigenschaften für Chromium.
Seit Chromium 69 (3. September 2018) haben Entwickler logische Eigenschaften und Werte dabei unterstützt, die Kontrolle über ihre internationalen Layouts durch logische statt durch physische Stile, Richtungs- und Dimensionsstile zu behalten. In Chromium 87 wurden Kurzschreibweisen und Offsets implementiert, um das Schreiben dieser logischen Eigenschaften und Werte etwas einfacher zu machen. Damit wird Chromium von Firefox bis hin zu Firefox übernommen, das diese Kürzel seit 66 unterstützt. Diese finden Sie in der Vorschau in Safari.
Dokumentfluss
Wenn Sie bereits mit logischen Eigenschaften sowie mit Inline- und Blockachsen vertraut sind und keine Auffrischung benötigen, können Sie den Schritt überspringen. Andernfalls können Sie diese kurze Auffrischung noch einmal wiederholen.
Im Englischen fließen Buchstaben und Wörter von links nach rechts, während Absätze von oben nach unten gestapelt sind. Im traditionellen Chinesisch sind Buchstaben und Wörter von oben nach unten, Absätze dagegen von rechts nach links gestapelt. In nur diesen beiden Fällen gilt: Wenn Sie CSS schreiben, das „margin top“ in einem Absatz einfügt, wird nur der korrekte Abstand für einen Sprachstil eingehalten. Wird die Seite aus dem Englischen ins Chinesische übersetzt, ergibt der Rand im neuen vertikalen Schreibmodus möglicherweise keinen Sinn.
Daher ist die physische Seite der Verpackung international nicht sehr nützlich. Auf diese Weise beginnt der Prozess, bei dem mehrere Sprachen unterstützt und die physischen und logischen Seiten des Boxmodells kennengelernt werden.
Haben Sie das p-Element in den Chrome-Entwicklertools schon einmal geprüft? In diesem Fall haben Sie vielleicht bemerkt, dass die Standard-User-Agent-Stile 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 ist nicht oben oder unten, wie es ein englischer Leser vermuten könnte.
Es ist block-start und block-end! Diese logischen Eigenschaften ähneln den oberen und unteren Seiten eines englischen Lesers, aber auch mit einem japanischen Leser wie rechts und links. Einmal geschrieben, funktioniert überall
Bei einem normalen Fluss wird die Webseite absichtlich Teil dieser Multidirektionalität. Wenn der Seiteninhalt gemäß der Änderung der Dokumentrichtung aktualisiert wird, werden das Layout und seine Elemente als im Fluss betrachtet. Weitere Informationen zu „in“ und „out“ im Flow finden Sie im MDN oder in den Spezifikationen des CSS-Displaymoduls. Logische Attribute müssen zwar nicht im Ablauf sein, aber sie nehmen Ihnen einen Großteil der Arbeit ab, wenn sich die Schreibrichtung ändert. Der Fluss gibt die Richtung an, in der sich die Buchstaben, Wörter und Inhalte bewegen müssen. Dadurch werden logische Routen blockiert und inline angezeigt.
Die Blockrichtung ist die Richtung, der neue Inhaltsblöcke folgen. Sie können sich beispielsweise fragen, wo der nächste Absatz eingefügt werden soll. Sie können es sich als einen „Inhaltsblock“ oder „Textblock“ vorstellen.
In jeder Sprache werden die Blöcke angeordnet und die zugehörigen Blöcke werden mit der zugehörigen block-axis angeordnet. block-start ist die Seite, auf die ein Absatz zuerst platziert wird, während block-end die seitliche Stelle ist, auf die neue Absätze fließen.
In der traditionellen japanischen Handschrift zum Beispiel verläuft die Blockrichtung von rechts nach links:
Inline-Richtung ist die Richtung, in die Buchstaben und Wörter gehen. Berücksichtigen Sie beim Schreiben, in welche Richtung sich Arm und Hand bewegen: Sie bewegen sich entlang der inline-axis.
inline-start ist die Seite, an der Sie mit dem Schreiben beginnen. inline-end ist die Seite, auf der der Schreibvorgang endet oder umschließt. Im obigen Video befindet sich inline-axis von oben nach unten, aber im nächsten Video verläuft das inline-axis von rechts nach links.
Bei flow-relative sind die für eine Sprache geschriebenen Stile kontextabhängig und werden entsprechend auf andere Sprachen angewendet. Inhalte werden in Abhängigkeit von der Sprache wiedergegeben, in der sie ausgeliefert werden.
Neue Abkürzungen
Einige der folgenden Kurzschriften sind keine neuen Funktionen für den Browser. Sie bieten vielmehr Möglichkeiten, Stile zu schreiben, indem Sie die Möglichkeit nutzen, Werte sowohl für Block- als auch Inline-Kanten gleichzeitig festzulegen. Die logischen inset-*-Attribute bieten neue Möglichkeiten, da es bisher keine Möglichkeiten gab, absolute Positionen mit logischen Attributen anzugeben. Insets und Kurzschreibweisen funktionieren so gut zusammen. Ich erzähle euch jetzt alle neuen logischen Eigenschaften, die in Chromium 87 verfügbar sind.
Marge-Kürzel
Es gibt zwar keine neuen Funktionen, aber einige sehr praktische Abkürzungen:
margin-block und
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Es gibt keine Abkürzung für „oben und unten“ oder „links und rechts“... bis jetzt!
Wahrscheinlich verweisen Sie mit der Kurzschreibweise margin: 10px; auf alle vier Seiten. Mit der Abkürzung für logische Eigenschaften können Sie jetzt ganz einfach auf zwei komplementäre Seiten verweisen.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Padding
Es gibt keine neuen Funktionen, aber sehr praktische Abkürzungen waren:
padding-block und
padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Und das kostenlose inline-Satz:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Inset und Kurzschrift
Die physischen Eigenschaften top, right, bottom und left können alle als Werte für das Attribut inset geschrieben werden. Jeder Wert von position kann von Seiten mit Inset-Elementen profitieren.
.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 Abkürzung für „physische Seiten“ und funktioniert wie „margin“ (Rand) und „fill“ (Füllung).
Neue Funktionen
So aufregend die Kurzschreibweise der physischen Seiten auch ist, es gibt noch mehr von den logischen Funktionen, die durch zusätzliche inset-Kurzschreibweisen ermöglicht werden. Durch diese Abkürzungen ist das Schreiben für Entwickler einfacher (Sie sind kürzer zu tippen), erhöhen aber auch die potenzielle Reichweite für das Layout, da sie ablaufbezogen 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 Informationen und eine vollständige Liste der Kurz- und Langhandbücher sind auf MDN verfügbar.
Grenzkurzschrift
Der Rahmen sowie die verschachtelten Attribute color, style und width haben ebenfalls 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 Grenz-Kürzel und Langhand sind auf MDN verfügbar.
Beispiel für logisches Attribut <figure>
Lassen Sie uns alles anhand eines kleinen Beispiels zusammenfassen. Logische Eigenschaften können das Layout eines Bildes mit Bildunterschrift für verschiedene Schreib- und Dokumentrichtungen festlegen.
Oder probier es aus!
Du musst nicht viel tun, um eine Karte mit einer <figure> und einigen logischen Attributen international responsiv zu machen. Wenn Sie wissen möchten, wie all diese international berücksichtigten Preisvergleichsportale zusammenwirken, hoffe ich, dass dies eine kleine, sinnvolle Einführung ist.
Polyfilling und browserübergreifende Unterstützung
Die Cascade- oder Build-Tools sind realisierbare Optionen, um sowohl alte als auch neue Browser in geeigneten Abständen mit aktualisierten logischen Eigenschaften zu verwenden. Bei Cascade-Fallbacks wird einer physischen Eigenschaft mit einer logischen Property gefolgt. 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 sehen Sie ein handschriftliches Fallback, das den Pseudoselektor :lang() nutzt, um Anzeigen auf bestimmte Sprachen auszurichten, die physischen Abstände entsprechend anzupassen und am Ende den logischen Abstand zur Unterstützung von Browsern bereitzustellen:
/* 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 zu bestimmen, ob Fallbacks für physische Attribute bereitgestellt 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 Build-Time-Angebote mit einer Vielzahl von Fallbacks oder Lösungen. Sehen Sie sich die einzelnen Tools an, um herauszufinden, welche für Ihre Toolchain und Ihre Website-Gesamtstrategie geeignet sind.
Nächste Schritte
Mehr CSS bieten logische Eigenschaften, das ist noch nicht geschehen! Allerdings fehlen viele Abkürzungen und in diesem GitHub-Problem steht noch eine Lösung aus. Eine vorübergehende Lösung befindet sich in einem Entwurf. Wie können Sie alle logischen Seiten einer Box mit einer Kurzschrift 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 Vorschlag würde bedeuten, dass Sie logical in jeder Kurzschrift schreiben müssen, um das logische Äquivalent angewendet zu bekommen, was auf manchen nicht sehr DRY klingt.
Es gibt andere Vorschläge, sie auf Block- oder Seitenebene zu ändern, aber dabei könnten logische Verwendungen in Stile verloren gehen, die weiterhin physische Seiten voraussetzen.
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 ..? */
Es ist eine harte Frage! Geben Sie Ihre Stimme ab, äußern Sie Ihre Meinung und wir würden gerne Ihre Meinung hören.
Möchtest du mehr über logische Eigenschaften erfahren oder sie untersuchen? Hier findest du eine detaillierte Referenz, einschließlich Leitfäden und Beispielen, auf der MDN. 🤓
Feedback
- Wenn Sie Änderungen an der CSS-Syntax von ablaufbezogenen 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 du Fehler bei der Chromium-Implementierung von ablaufbezogenen Kurzwahlen melden möchtest, prüfe zuerst die bestehenden Probleme im Chromium-Bug Tracker. Wenn keines der vorhandenen Probleme mit dem Fehler übereinstimmt, erstellen Sie ein neues Problem.