CSS Logische Eigenschaften

Eine Eigenschaft wie margin-left scheint ziemlich logisch, aber wie Manuel Rego Casasnovas sagt

Stellen Sie sich vor, Sie haben Inhalte, die von rechts nach links (RTL) angezeigt werden. Ihr linkes Ende könnte wahrscheinlich das physische rechte Ende sein. Wenn Sie also normalerweise margin-left: 100px für einige Elemente festlegen, möchten Sie dies möglicherweise durch margin-right: 100px ersetzen.

Die Richtung, der Schreibmodus und sogar Flexbox haben die Macht, Dinge umzukehren und Eigenschaften weniger logisch und schwieriger zu warten zu machen, als Sie hoffen würden. Dafür gibt es jetzt margin-inline-start. Die vollständige Liste lautet:

• margin-{block,inline}-{start,end}
• padding-{block,inline}-{start,end}
• border-{block,inline}-{start,end}-{width,style,color}

Manuel geht auf alle Details zur Browserunterstützung ein.

Rachel Andrew erklärt die Logik ebenfalls.

… diese Werte haben sich von der zugrunde liegenden Annahme entfernt, dass Inhalte im Web den physischen Abmessungen des Bildschirms entsprechen und das erste Wort eines Satzes sich in der oberen linken Ecke der Box befindet, in der es sich befindet. Die Reihenfolge der Zeilen in `grid-area` ergibt vollkommen Sinn, wenn Sie noch nie die bestehende Art und Weise kennengelernt hätten, wie wir diese Werte in einer Kurzschreibweise festlegen.

Hier sind die logischen Eigenschaften und wie sie in einer Standardeinstellung für **links nach rechts**, ohne weitere Besonderheiten, auf bestehende Eigenschaften abgebildet werden.

Eigenschaft	Logische Eigenschaft
margin-top	margin-block-start
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-bottom	margin-block-end

Eigenschaft	Logische Eigenschaft
padding-top	padding-block-start
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-bottom	padding-block-end

Eigenschaft	Logische Eigenschaft
border-top{-size|style|color}	border-block-start{-size|style|color}
border-left{-size|style|color}	border-inline-start{-size|style|color}
border-right{-size|style|color}	border-inline-end{-size|style|color}
border-bottom{-size|style|color}	border-block-end{-size|style|color}

Eigenschaft	Logische Eigenschaft
top	inset-block-start
left	inset-inline-start
right	inset-inline-end
bottom	inset-block-end

Direkter Link →