CSS: Von logischen Angaben bis zu neuen Einheiten 11.07.2022, 09:38 Uhr

Voll flexibel

Ausmaße lassen sich in CSS inzwischen flexibler bestimmen als früher.
(Quelle: Foto: Circlon Tech / Shutterstock)
Die Zeiten, in denen width: 960px eine sinnvolle Angabe war, sind längst vorbei. Ausmaße sollten heute so festgelegt werden, dass sie in den verschiedensten Situationen und Kontexten funktionieren. Damit das klappt, gibt es zum einen neue Eigenschaften und Werte - die Logical Properties and Values - und zum anderen flexible Funktionen wie clamp(), max(), min(), dazu aber auch neue Einheiten - wie beispielsweise die dynamischen Viewport-Einheiten (Tabelle 1).
Tabelle 1: Logische Eigenschaften und Werte
Werte
Logischer Wert Entsprechung bei Schreibrichtung links nach rechts Erläuterung
float: inline-start float:left Floaten
float: inline-end float: right
text-align: start text-align: left Textausrichtung
text-align: start text-align: end
Logische Eigenschaften
Eigenschaft Entsprechung bei Schreibrichtung links nach rechts Erläuterung
block-size width Ausmaße
border-inline-start-style border-left-style Definition des Rahmenstils, nach demselben Prinzip auch border-inline-start-width, border-inline-start-color, border-inline-start etc.
border-inline-end-style border-right-style
border-block-start-style border-top-style
border-block-end-style border-end-style
border-inline-style Keine Entsprechung
border-block-style Keine Entsprechung
border-start-start-radius border-top-left-radius Abrundung der Ecken
border-start-end-radius border-top-right-radius
border-end-start-radius border-bottom-left-radius
border-end-end-radius border-bottom-right-radius
inline-size height Ausmaße
inset-inline-start left Einrückung für positionierte Elemente
inset-inline-end right
inset-block-start top
inset-block-end bottom
margin-inline-start margin-left Außenabstände – genauso funktioniert auch padding
margin-inline-end margin-right
margin-block-start margin-top
margin-block-end margin-bottom
margin-inline Keine Entsprechung
margin-block Keine Entsprechung
overflow-inline overflow-y Überfluss steuern
overflow-block overflow-x
Tabelle 1: Logische Eigenschaften und Werte
Werte
Logischer Wert Entsprechung bei Schreibrichtung links nach rechts Erläuterung
float: inline-start float:left Floaten
float: inline-end float: right
text-align: start text-align: left Textausrichtung
text-align: start text-align: end
Logische Eigenschaften
Eigenschaft Entsprechung bei Schreibrichtung links nach rechts Erläuterung
block-size width Ausmaße
border-inline-start-style border-left-style Definition des Rahmenstils, nach demselben Prinzip auch border-inline-start-width, border-inline-start-color, border-inline-start etc.
border-inline-end-style border-right-style
border-block-start-style border-top-style
border-block-end-style border-end-style
border-inline-style Keine Entsprechung
border-block-style Keine Entsprechung
border-start-start-radius border-top-left-radius Abrundung der Ecken
border-start-end-radius border-top-right-radius
border-end-start-radius border-bottom-left-radius
border-end-end-radius border-bottom-right-radius
inline-size height Ausmaße
inset-inline-start left Einrückung für positionierte Elemente
inset-inline-end right
inset-block-start top
inset-block-end bottom
margin-inline-start margin-left Außenabstände – genauso funktioniert auch padding
margin-inline-end margin-right
margin-block-start margin-top
margin-block-end margin-bottom
margin-inline Keine Entsprechung
margin-block Keine Entsprechung
overflow-inline overflow-y Überfluss steuern
overflow-block overflow-x

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar