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 |
Um ein Containerelement mittig auf der Seite zu zentrieren und in der Breite zu beschränken, hat man lange Zeit folgenden Code benutzt (der Wert der max-width kann natürlich variieren):
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar
