CSS-Logische Eigenschaften und Werte
Das Modul CSS-Logische Eigenschaften und Werte definiert logische Eigenschaften und Werte, die Layouts durch logische anstelle von physischen Richtungs- und Dimensionszuordnungen steuern können. Logische Eigenschaften definieren Richtung-relative Entsprechungen zu ihren entsprechenden physischen Eigenschaften.
Der Beginn einer Zeile befindet sich nicht immer auf der linken Seite einer Zeile. Verschiedene Schriftsysteme arbeiten in verschiedenen Richtungen. Zum Beispiel:
- Englisch und Portugiesisch werden von links nach rechts geschrieben, wobei neue Zeilen unter den vorherigen hinzugefügt werden.
- Hebräisch und Arabisch sind Sprachen, die von rechts nach links geschrieben werden, wobei neue Zeilen ebenfalls unter den vorherigen hinzugefügt werden.
- In einigen Schreibmodi werden die Textzeilen vertikal geschrieben, von oben nach unten. Chinesisch, Vietnamesisch, Koreanisch und Japanisch werden traditionell vertikal geschrieben, von oben nach unten, wobei jede neue vertikale Linie links von der vorherigen hinzugefügt wird.
- Traditionelles Mongolisch ist ebenfalls eine Sprache, die von oben nach unten geschrieben wird, aber neue Zeilen stehen rechts von den vorherigen.
Die in diesem Modul definierten logischen Eigenschaften ermöglichen das Definieren von Eigenschaften relativ zur Schreibrichtung des Inhalts anstatt zu einer physischen Richtung. Dies bedeutet, dass in Sprachen mit unterschiedlichen Schreibmodi übersetzter Inhalt wie beabsichtigt dargestellt wird.
Logische Eigenschaften und Werte verwenden die abstrakten Begriffe Block und Inline, um die Richtung zu beschreiben, in der sie fließen. Die physische Bedeutung dieser Begriffe hängt vom Schreibmodus ab.
Die Block-Dimension ist senkrecht zum Textfluss innerhalb einer Zeile, d. h., die vertikale Dimension in horizontalen Schreibmodi und die horizontale Dimension in vertikalen Schreibmodi. Für standardmäßigen englischen Text ist es die vertikale Dimension.
Die Inline-Dimension verläuft parallel zum Textfluss innerhalb einer Zeile, d. h., die horizontale Dimension in horizontalen Schreibmodi und die vertikale Dimension in vertikalen Schreibmodi. Für standardmäßigen englischen Text ist es die horizontale Dimension.
CSS wurde ursprünglich nur mit physischen Koordinaten gestaltet. Das Modul für logische Eigenschaften und Werte definiert flussbezogene Entsprechungen für viele Werte und Eigenschaften. Eigenschaften, die früher nur physische Werte (top
, bottom
, left
, right
) akzeptierten, akzeptieren jetzt auch flussbezogene logische Werte (block-start
, block-end
, inline-start
, inline-end
).
Referenz
Eigenschaften
block-size
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-end-end-radius
border-end-start-radius
border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-start-end-radius
border-start-start-radius
inline-size
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
max-block-size
max-inline-size
min-block-size
min-inline-size
padding-block
padding-block-end
padding-block-start
padding-inline
padding-inline-end
padding-inline-start
Datentypen und Werte
block-start
block-end
inline-start
inline-end
start
end
Glossarbegriffe
Leitfäden
- Grundlagen der logischen Eigenschaften und Werte
-
Übersicht über flussbezogene Eigenschaften und Werte.
- Logische Eigenschaften für Größenangaben
-
Flussbezogene Zuordnungen zwischen physischen und logischen Eigenschaften, die verwendet werden, um Elemente auf der Seite zu dimensionieren.
- Logische Eigenschaften für Ränder, Rahmen und Abstände
-
Flussbezogene Zuordnungen für verschiedene Rand-, Rahmen- und Abstandseigenschaften und deren Kurzschreibweisen.
- Logische Eigenschaften für Floats und Positionierung
-
Details zu Zuordnungen zwischen physischen und logischen Werten für
float
undclear
, Inset-Eigenschaften undresize
.
Verwandte Konzepte
border-color
border-style
border-width
border
Kurzschreibweiseborder-radius
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 |