Logical-Properties-Konverter
Physische CSS-Eigenschaften wie margin-left oder top automatisch in Logical Properties wie margin-inline-start umwandeln – mit Änderungsliste.
Der Logical-Properties-Konverter ersetzt physische CSS-Angaben wie margin-left, top oder border-top-right-radius durch logische Eigenschaften wie margin-inline-start, inset-block-start oder border-start-end-radius. So passt sich das Layout automatisch an Schreibrichtungen wie Arabisch oder vertikales Japanisch an. Jede Änderung wird aufgelistet.
CSS mit Logical Properties
9 Änderungen
- Z. 2:
margin-left: auto→ margin-inline-start: auto - Z. 3:
padding: 16px 24px 20px 24px→ padding-block: 16px 20px; padding-inline: 24px - Z. 4:
border-left: 4px solid #2563eb→ border-inline-start: 4px solid #2563eb - Z. 5:
border-top-right-radius: 12px→ border-start-end-radius: 12px - Z. 6:
text-align: left→ text-align: start - Z. 7:
width: 320px→ inline-size: 320px - Z. 12:
top: 8px→ inset-block-start: 8px - Z. 13:
right: 8px→ inset-inline-end: 8px - Z. 14:
float: right→ float: inline-end
Physisch und logisch im Vergleich
| Physisch | Logisch |
|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end |
padding-top / padding-bottom | padding-block-start / padding-block-end |
top, left | inset-block-start, inset-inline-start |
border-top-left-radius | border-start-start-radius |
width / height | inline-size / block-size |
text-align: left | text-align: start |
float: right | float: inline-end |
Abstände für alle Bildschirmgrößen planst du im Fluid-Spacing-Generator.
Häufige Fragen
Was sind Logical Properties?
Sie beschreiben Abstände und Positionen relativ zur Schreibrichtung statt zu den Bildschirmseiten. inline ist die Richtung, in der Text läuft (bei Deutsch waagerecht), block die Richtung, in der Zeilen aufeinander folgen. start und end bezeichnen Anfang und Ende.
Ändert sich bei deutschen Seiten etwas?
Nein. Bei links-nach-rechts und horizontaler Schreibrichtung sehen beide Varianten gleich aus. Der Vorteil zeigt sich erst, wenn die Seite auch in Arabisch oder Hebräisch (rechts nach links) angeboten wird: Dann spiegelt sich das Layout automatisch.
Werden alle Browser unterstützt?
Die gängigen Logical Properties wie margin-inline, padding-block, inset und inline-size funktionieren in allen aktuellen Browsern. Bei sehr alten Browsern (vor 2021) fehlen einzelne Eigenschaften.
Warum ist width zu inline-size optional?
Breite und Höhe wechseln bei vertikaler Schreibrichtung ihre Rolle. Für die meisten Websites ist das egal, und viele Teams behalten width und height der Lesbarkeit halber. Deshalb lässt sich diese Umwandlung abschalten.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.