Pega declaraciones CSS, elige modo de escritura y dirección, y lee el equivalente relativo al flujo línea por línea. Las declaraciones que el conversor no reescribe se conservan y se cuentan en la barra de estado.
Se ejecuta localmente en tu navegadorLa herramienta lee una lista de declaraciones CSS y reescribe las físicas que puede expresar para el modo de escritura elegido. Cada lado, tamaño y alineación compatibles pasan a su equivalente relativo al flujo, y el panel muestra exactamente el texto que Copiar CSS lleva al portapapeles.
Todo ocurre en la página: las declaraciones las analiza el propio paquete que carga la página, ninguna petición se lleva tu CSS y la herramienta sigue funcionando sin conexión. Los valores nunca se reescriben —el conversor solo cambia el nombre de la propiedad y, en text-align y float, la palabra clave—, así que un calc(), un color o una unidad relativa llegan intactos a la salida.
Los lados se resuelven con el modo de escritura y la dirección. En horizontal-tb con ltr, margin-left pasa a margin-inline-start, padding-top a padding-block-start y border-right-width a border-inline-end-width; si cambias a rtl, margin-left pasa a margin-inline-end. En vertical-rl (escritura vertical) margin-left pasa a margin-block-end y padding-top a padding-inline-start. La misma tabla gobierna margin, padding, las tres partes del borde (width, style y color) y las cuatro propiedades de posición top, right, bottom y left, que se convierten en inset-block-start, inset-inline-end, etc. text-align: left se reescribe como start en ltr y como end en rtl; float: right pasa a inline-end en ltr e inline-start en rtl.
Los tamaños siguen la misma lógica: width, min-width y max-width pasan a inline-size, min-inline-size y max-inline-size en escritura horizontal, y a block-size, min-block-size y max-block-size en escritura vertical, mientras que la familia de height salta al otro eje. El valor se copia carácter por carácter, incluido un !important final, así que margin-left: 10px !important se convierte en margin-inline-start: 10px !important.
Las propiedades abreviadas no se dividen: margin, padding, border, border-left e inset se quedan tal cual, porque separar una abreviatura sin romper la cascada no es seguro. Las propiedades que ya son lógicas (margin-inline-start, block-size), las personalizadas como --tokens, las at-rules, los selectores y las llaves de un bloque se devuelven sin cambios y cuentan como no convertidas: nada se borra. Los comentarios /* … */ se eliminan y una declaración sin valor (margin-left:) se mantiene tal cual.
El lector entiende que un punto y coma puede formar parte de un valor: background-image: url(data:image/svg+xml;base64,…) sobrevive entero, igual que content: "a;b". text-align: justify, start y end, los colores, las expresiones calc() y cualquier unidad llegan intactos. Como solo se editan nombres de propiedad (y las dos palabras clave indicadas), el resultado se puede pegar en una hoja de estilos, pero la sangría del bloque pegado no se conserva: la salida es una declaración por línea.
Los contadores describen la ejecución actual: «6 declaraciones convertidas» significa que se reescribieron seis propiedades físicas, y el segundo número cuenta los fragmentos que pasaron sin cambios, como abreviaturas, propiedades ya lógicas y at-rules. Con el cuadro vacío no se muestra ningún contador. Con el interruptor de fallback activo, cada regla convertida se emite dos veces —primero la línea física—, para que los navegadores sin propiedades lógicas sigan funcionando.
El escenario es un esquema, no un render de tu CSS: dibuja los cuatro ejes lógicos y una tarjeta cuyo writing-mode y direction siguen a los selectores. Sirve para confirmar a qué lado físico se refiere una palabra clave lógica antes de pegar la salida; después verifica el resultado en el inspector del navegador sobre el elemento real, porque las restricciones heredadas de un contenedor flex o grid pueden cambiar el efecto de un valor.