Neue Kurzschreibweisen für logische Eigenschaften und neue Einsatzeigenschaften für Chromium.
Seit Chromium 69 (3. September 2018) logischen Eigenschaften und Werten Entwickler behalten die Kontrolle über ihre internationalen Layouts durch logische, als physische, Richtungs- und Abmessungsstile. In Chromium 87 werden Kurzschreibweisen und Offsets wurden bereitgestellt, um das Schreiben dieser logischen Eigenschaften und Werte zu vereinfachen. Dadurch kommt Chromium im Vergleich zu Firefox, das die Abkürzungen unterstützt hat seit 66. Safari stellt sie in der Technologievorschau bereit.
Dokumentfluss
Wenn Sie bereits mit logischen Eigenschaften vertraut sind, nutzen Sie Inline- und Blockachsen Wenn Sie eine Auffrischung wünschen, können Sie diese überspringen. Andernfalls finden Sie hier eine kurze Auffrischung.
Im Englischen fließen Buchstaben und Wörter von links nach rechts, während Absätze übereinander angeordnet sind. Im traditionellen Chinesisch befinden sich Buchstaben und Wörter von oben nach unten, während Absätze gestapelt sind. von rechts nach links. Wenn wir in diesen beiden Fällen CSS schreiben, in einem Absatz. wird nur der richtige Abstand in einem Sprachstil festgelegt. Wird die Seite in traditionelle Aus dem Englischen aus Chinesisch ist der Rand im neuen vertikalen Schreibmodus möglicherweise nicht sinnvoll.
Daher ist die physische Seite der Verpackung international nicht sehr nützlich. Somit beginnt der Prozess zur Unterstützung mehrerer Sprachen die physischen und logischen Seiten des Box-Modells kennen.
Haben Sie sich schon einmal das p-Element in den Chrome-Entwicklertools angesehen? Falls ja, haben Sie möglicherweise
dass die Standard-User-Agent-Stile
nicht physisch, sondern logisch.
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 es ein englischer Leser vermuten könnte.
Es ist block-start bei block-end! Diese logischen Eigenschaften ähneln der
oben und unten, aber auch ähnlich wie ein japanischer Leser wie rechts und links. Einmal geschrieben, funktioniert überall
Normaler Fluss liegt vor, wenn die Webseite absichtlich Teil dieser multidirektionalen Ausrichtung ist. Wenn der Seiteninhalt entsprechend der Dokumentrichtung aktualisiert wird, werden das Layout und die werden als im Fluss betrachtet. Weitere Informationen zu „in“ und „out“ des Flusses auf MDN oder im CSS-Displaymodul – Spezifikation Während logische Attribute müssen nicht im Flow sein. Sie nehmen Ihnen einen Großteil der Arbeit ab, wenn sich die Richtung ändert. Der Fluss deutet die Richtung an, d. h., welche Buchstaben, Wörter und Inhalte sich bewegen müssen. Dadurch werden logische Routen blockiert und inline angezeigt.
Mit der Blockrichtung geben Sie die Richtung an, in die neue Inhaltsblöcke eingeschlagen werden. Fragen Sie sich beispielsweise,
„Wo soll der nächste Absatz eingefügt werden?“. Sie können sich das als einen „Inhaltsblock“ oder „Textblock“ vorstellen.
Jede Sprache ordnet ihre Blöcke an und ordnet sie an.
ihre jeweiligen block-axis. block-start ist die Seite, an der ein Absatz zuerst platziert wird.
und block-end ist der seitliche Absatz, zu dem neue Absätze fließen.
In der traditionellen japanischen Handschrift verläuft die Blockrichtung beispielsweise von rechts nach links:
Die Inline-Richtung ist die Richtung, in die Buchstaben und Wörter fließen. Berücksichtige die Richtung
Arm und Hand bewegen sich beim Schreiben; sie sind unterwegs: inline-axis.
inline-start ist die Seite, auf der Sie beginnen, und inline-end die Seite
in dem das Schreiben endet oder umfließt. Im obigen Video ist das inline-axis von oben nach unten,
aber im nächsten Video fließt inline-axis von rechts nach links.
In flow-relative
bedeutet, dass die für eine Sprache verfassten Stile kontext- und angemessen
in andere Sprachen übertragen werden. Der Fluss der Inhalte richtet sich nach der Sprache, für die sie bereitgestellt werden.
Neue Kurzschriften
Einige der folgenden Abkürzungen sind keine neuen Funktionen für den Browser, sondern
Stile zu schreiben, indem Sie Werte für beide Blocks
oder Kanten gleichzeitig anordnen. Die logischen Attribute inset-* bieten neue Funktionen.
Es gab keine langen Möglichkeiten, absolute Positionen mit logischen Eigenschaften anzugeben.
davor. Insets und Kurzschriften fließen so gut zusammen.
Hier findest du alle neuen logischen Eigenschaften, die in Chromium 87 eingeführt werden.
Marge Kurzhände
Es wurden zwar keine neuen Funktionen eingeführt, aber einige sehr praktische Kurzschreibweisen:
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 nennen Sie alle vier Seiten mit der Abkürzung margin: 10px;. Jetzt
kann mithilfe der Kurzschreibweise der logischen Eigenschaft leicht auf zwei komplementäre Seiten verweisen.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Kurzschreibweise mit Padding
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 kostenlosen inline-Kurzschriften:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Inset und Kurzschriften
Die physischen Eigenschaften top, right, bottom und left können alle geschrieben werden.
als Werte für die Eigenschaft inset an. Jeder Wert von position kann von
die Seiten mit Einsatz.
.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 sein! Inset ist kurz für die physischen Seiten, und funktioniert genau wie Ränder und Abstände.
Neue Funktionen
So spannend die Kurzschreibweise auch ist, es gibt noch mehr von der
logische Funktionen durch zusätzliche inset-Abkürzungen. Diese Kurzschriften bringen
die Generierung von Texten für Entwickler (schneller zu tippen),
die potenzielle Reichweite für das Layout,
weil 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 Informationen und eine vollständige Liste der Kurz- und Langschriften ist auf MDN verfügbar.
Border-Kurzschrift
Der Rahmen sowie seine verschachtelten Eigenschaften color, style und width haben alle
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 von Grenz- und Langschriften ist auf MDN verfügbar.
Beispiel für ein logisches Attribut <figure>
Lassen Sie uns das alles in einem kleinen Beispiel zusammenfassen. Logische Eigenschaften können ein Layout Ein Bild mit einer Bildunterschrift für unterschiedliche Schreib- und Dokumentrichtungen.
Oder probieren Sie es aus!
Sie müssen nichts unternehmen, um eine Karte mit einem
<figure> und einige logische Attribute. Wenn Sie wissen möchten,
und wir hoffen, dass dies eine kurze Einführung ist.
Polyfilling und browserübergreifende Unterstützung
The Cascade- oder Build-Tools eignen sich für alte und neue Browser. mit aktualisierten logischen Eigenschaften. Folgen Sie bei Cascade-Fallbacks einer physischen Eigenschaft mit einer logischen Eins an. Der Browser verwendet dann während des Stils gefundene Eigenschaft Problembehebung.
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 handschriftliches Fallback
die die Pseudoauswahl :lang() für die Ausrichtung auf bestimmte Sprachen verwendet,
mit einem angemessenen Abstand angeben, sodass am Ende der logische
Abstand bei unterstützenden Browsern:
/* 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 festzustellen, ob physische
Property-Fallbacks:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS Emotion und andere haben einen automatisierten Bundler und/oder Build mit einer Vielzahl von Fallbacks oder Lösungen. Jetzt ansehen um zu sehen, was zu Ihrer Toolchain und Ihrer Websitestrategie passt.
Nächste Schritte
Weitere CSS-Elemente bieten logische Eigenschaften, dies ist noch nicht abgeschlossen! Eine große aber für dieses GitHub-Problem steht noch eine Lösung aus. In einem Entwurf gibt es eine vorübergehende Lösung. Wie gehen Sie vor, wenn Sie logische Seiten einer Box mit einer Abkürzung?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
Für den aktuellen Angebotsentwurf müssten Sie logical in jede
damit das logische Äquivalent angewendet wird. Das klingt nicht
sehr trocken.
Es gibt weitere Vorschläge, die Sie auf Block- oder Seitenebene ändern können, bei Stilen aber immer noch von physischen Seiten ausgehen können.
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! Stimme ab, teile deine Meinung – wir würden uns freuen, von dir zu hören.
Möchten Sie mehr über logische Eigenschaften lernen? Hier ist eine detaillierte Referenz: mit Anleitungen und Beispielen auf MDN 🤓
Feedback
- Um Änderungen an der CSS-Syntax von flussrelativen Kurzschreibweisen vorzuschlagen, 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.
- Um Fehler bei der Implementierung von flussrelativen Kurzschreibweisen in Chromium zu melden, Prüfen Sie zuerst die vorhandenen Probleme im Chromium-Fehler-Tracker. Wenn keines der vorhandenen Probleme auf den Fehler zutrifft, erstellen Sie ein neues Problem.