Was ist CSS Logical Properties Converter?
CSS Logical Properties verwenden schreibrichtungsrelative Richtungen anstelle von physischen Richtungen. Inline (Textflussrichtung) und Block (senkrechte Richtung) ersetzen Left, Right, Top und Bottom. So funktioniert dasselbe CSS für Links-nach-Rechts-, Rechts-nach-Links- und vertikale Sprachen ohne Überschreibungen. margin-inline-start gilt beispielsweise in LTR auf der linken und in RTL auf der rechten Seite.
Kurze Antwort
Konvertieren Sie physische CSS-Eigenschaften wie margin-left und padding-right in schreibrichtungsbewusste logische Äquivalente. Dies hilft Layouts, sich automatisch an Rechts-nach-Links- und vertikale Schreibmodi anzupassen.
Last updated: 2026-06-11
Einschränkungen
- Einige logische Kurzformeigenschaften wie border-inline, border-block und inset-inline haben uneinheitliche Browserunterstützung im Vergleich zu den logischen Langform-Eigenschaften.
- Der Konverter wandelt einzelne Eigenschaften um. Die Migration eines großen Stylesheets erfordert die Aktualisierung jedes Paares und die Überprüfung auf gemischte Richtungen.
- Logische Eigenschaften bilden auf physische Eigenschaften basierend auf writing-mode und direction des Elements ab. Dies erfordert Tests in LTR- und RTL-Modi.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie die physische CSS-Eigenschaft, die Sie konvertieren möchten, wie margin-left oder padding-right.
- Wählen Sie das logische Äquivalent aus den verfügbaren Vorschlägen.
- Geben Sie den Wert für die Eigenschaft ein.
- Kopieren Sie die logische Eigenschaftsdeklaration in Ihr Stylesheet und testen Sie sie in LTR- und RTL-Richtung.
Wofür du es nutzen kannst
- Bereiten Sie CSS für mehrsprachige Websites mit RTL-Sprachunterstützung vor.
- Schreiben Sie richtungsunabhängige Komponentenstile, die keine separaten RTL-Überschreibungen benötigen.
- Reduzieren Sie den Bedarf an einem separaten RTL-Stylesheet durch die Verwendung logischer Eigenschaften von Anfang an.