Fügen Sie CSS-Deklarationen ein, wählen Sie Schreibmodus und Richtung und lesen Sie das flussrelative Gegenstück Zeile für Zeile. Deklarationen, die der Konverter nicht umschreibt, bleiben stehen und werden im Status gezählt.
Läuft lokal in deinem BrowserDas Werkzeug liest eine Liste von CSS-Deklarationen und schreibt die physischen um, die sich für den gewählten Schreibmodus ausdrücken lassen. Jede unterstützte Seite, Größe und Ausrichtung erhält ihr flussrelatives Gegenstück, und das Panel zeigt genau den Text, den Copy CSS in die Zwischenablage legt.
Alles läuft in der Seite: Die Deklarationen liest das mitgelieferte Bundle, keine Anfrage trägt Ihr CSS nach außen, und das Werkzeug arbeitet ohne Netz weiter. Werte werden nie umgeschrieben — der Konverter tauscht den Eigenschaftsnamen und bei text-align und float das Schlüsselwort —, deshalb kommen calc(), eine Farbe oder eine relative Einheit unverändert an.
Seiten werden über Schreibmodus und Richtung aufgelöst. In horizontal-tb mit ltr wird margin-left zu margin-inline-start, padding-top zu padding-block-start und border-right-width zu border-inline-end-width; bei rtl wird margin-left zu margin-inline-end. In vertical-rl (vertikale Schrift) wird margin-left zu margin-block-end und padding-top zu padding-inline-start. Dieselbe Tabelle steuert margin, padding, die drei Rahmenteile (width, style und color) und die vier Positionseigenschaften top, right, bottom und left, die zu inset-block-start, inset-inline-end und so weiter werden. text-align: left wird in ltr zu start und in rtl zu end; float: right wird in ltr zu inline-end und in rtl zu inline-start.
Größen folgen derselben Logik: width, min-width und max-width werden in horizontaler Schrift zu inline-size, min-inline-size und max-inline-size und in vertikaler Schrift zu block-size, min-block-size und max-block-size, während die height-Familie auf die andere Achse wechselt. Der Wert wird Zeichen für Zeichen übernommen, einschließlich eines abschließenden !important, sodass margin-left: 10px !important zu margin-inline-start: 10px !important wird.
Kurzschreibweisen werden nicht aufgeteilt: margin, padding, border, border-left und inset bleiben genau wie geschrieben, weil eine sichere Aufteilung die gesamte Kaskade kennen müsste. Bereits logische Eigenschaften (margin-inline-start, block-size), eigene Eigenschaften wie --tokens, At-Rules, Selektoren und die geschweiften Klammern eines Regelblocks werden unverändert zurückgegeben und als nicht konvertiert gezählt — nichts wird gelöscht. Kommentare /* … */ werden entfernt, und eine Deklaration ohne Wert (margin-left:) bleibt stehen.
Der Leser versteht, dass ein Semikolon zu einem Wert gehören kann: background-image: url(data:image/svg+xml;base64,…) überlebt vollständig, ebenso content: "a;b". text-align: justify, start und end, Farbwerte, calc()-Ausdrücke und jede Einheit kommen unverändert an. Da nur Eigenschaftsnamen (und die zwei Schlüsselwortfälle) bearbeitet werden, ist die Ausgabe direkt einfügbar — die Einrückung eines eingefügten Blocks bleibt jedoch nicht erhalten, denn das Ergebnis enthält eine Deklaration pro Zeile.
Die Zähler beschreiben den aktuellen Lauf: „6 converted declarations“ bedeutet, dass sechs physische Eigenschaften umgeschrieben wurden, und die zweite Zahl zählt die durchgereichten Teile wie Kurzschreibweisen, bereits logische Eigenschaften und At-Rules. Bei leerem Feld erscheint gar kein Zähler. Mit aktivem Fallback wird jede umgewandelte Regel zweimal ausgegeben — die physische Zeile zuerst —, damit Browser ohne logische Eigenschaften weiterarbeiten.
Die Bühne ist ein Schema, keine Darstellung Ihres CSS: Sie zeichnet die vier logischen Achsen und eine Karte, deren writing-mode und direction den Auswahlen folgen. Damit prüfen Sie, auf welche physische Seite ein logisches Schlüsselwort zeigt, bevor Sie die Ausgabe einfügen; danach kontrollieren Sie das Ergebnis im Browser-Inspektor am echten Element, weil geerbte Beschränkungen in einem Flex- oder Grid-Container die Wirkung eines Werts verändern können.