Logische Eigenschaften beschreiben Layout basierend auf der Inhaltsflussrichtung (Anfang/Ende, Inline/Block) statt physische Richtungen (links/rechts/oben/unten). Dies ermöglicht es einem einzelnen Stylesheet, sich automatisch an Sprachen angepasst, die von rechts nach links (Arabisch, Hebräisch) oder von oben nach unten geschrieben werden.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
Mit physischen Eigenschaften bedeutet die Unterstützung von Arabisch, einen ganzen zweiten Satz von gespiegelten Stilen (margin-left → margin-right usw.) hinter [dir="rtl"] zu schreiben. Mit logischen Eigenschaften funktioniert das gleiche CSS einfach — setzen Sie dir="rtl" auf das html-Element und margin-inline-start dreht sich automatisch zur rechten Seite um:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Logische Eigenschaften verarbeiten auch vertikale Schreibmodi (z.B. einige ostasiatische Sätze) und machen margin-inline: auto zu einer sauberen Möglichkeit, unabhängig von der Richtung zu zentrieren.
Für jedes Produkt, das in mehreren Sprachen veröffentlicht wird, eliminieren logische Eigenschaften die Notwendigkeit, gespiegelte RTL-Stylesheets zu warten — ein Satz Regeln passt sich der Schreibrichtung an.
Selbst für reine LTR-Websites sind sie ein sauberes mentales Modell (Anfang/Ende, Inline/Block) und werden in modernem CSS zunehmend als Standard empfohlen.