Cole declarações CSS, escolha o modo de escrita e a direção, e leia o equivalente relativo ao fluxo linha por linha. As declarações que o conversor não reescreve ficam como estão e são contadas na barra de status.
Funciona localmente no seu navegadorA ferramenta lê uma lista de declarações CSS e reescreve as físicas que consegue expressar no modo de escrita escolhido. Cada lado, tamanho e alinhamento compatível vira o equivalente relativo ao fluxo, e o painel mostra exatamente o texto que Copiar CSS coloca na área de transferência.
Tudo acontece na página: as declarações são lidas pelo próprio pacote que a página carrega, nenhuma requisição leva o seu CSS para fora e a ferramenta continua funcionando sem conexão. Os valores nunca são reescritos — o conversor troca o nome da propriedade e, em text-align e float, a palavra-chave —, então um calc(), uma cor ou uma unidade relativa chegam intactos na saída.
Os lados são resolvidos pelo modo de escrita e pela direção. Em horizontal-tb com ltr, margin-left vira margin-inline-start, padding-top vira padding-block-start e border-right-width vira border-inline-end-width; mude a direção para rtl e margin-left vira margin-inline-end. Em vertical-rl (escrita vertical) margin-left vira margin-block-end e padding-top vira padding-inline-start. A mesma tabela governa margin, padding, as três partes da borda (width, style e color) e as quatro propriedades de posição top, right, bottom e left, que viram inset-block-start, inset-inline-end e assim por diante. text-align: left é reescrito como start em ltr e como end em rtl; float: right vira inline-end em ltr e inline-start em rtl.
Os tamanhos seguem a mesma lógica: width, min-width e max-width viram inline-size, min-inline-size e max-inline-size na escrita horizontal, e block-size, min-block-size e max-block-size na vertical, enquanto a família de height passa para o outro eixo. O valor é copiado caractere por caractere, incluindo um !important no fim, então margin-left: 10px !important vira margin-inline-start: 10px !important.
Propriedades abreviadas não são divididas: margin, padding, border, border-left e inset ficam exatamente como escritas, porque separar uma abreviação sem quebrar a cascata não é seguro. Propriedades que já são lógicas (margin-inline-start, block-size), personalizadas como --tokens, at-rules, seletores e as chaves de um bloco são devolvidos sem alteração e contados como não convertidos: nada é apagado. Comentários /* … */ são removidos e uma declaração sem valor (margin-left:) é mantida como está.
O leitor entende que um ponto e vírgula pode fazer parte de um valor: background-image: url(data:image/svg+xml;base64,…) sobrevive inteiro, assim como content: "a;b". text-align: justify, start e end, cores, expressões calc() e qualquer unidade chegam intactos. Como só os nomes das propriedades (e as duas palavras-chave) são editados, o resultado está pronto para colar em uma folha de estilos — mas a indentação do bloco colado não é preservada, porque a saída traz uma declaração por linha.
Os contadores descrevem a execução atual: “6 declarações convertidas” significa que seis propriedades físicas foram reescritas, e o segundo número conta os trechos que passaram sem alteração, como abreviações, propriedades já lógicas e at-rules. Com a caixa vazia nenhum contador aparece. Com o fallback ligado, cada regra convertida sai duas vezes — a linha física primeiro — para que navegadores sem propriedades lógicas continuem funcionando.
O palco é um esquema, não uma renderização do seu CSS: ele desenha os quatro eixos lógicos e um cartão cujo writing-mode e direction seguem os seletores. Use-o para confirmar a que lado físico uma palavra-chave lógica se refere antes de colar a saída; depois confira o resultado no inspetor do navegador, no elemento real, porque restrições herdadas de um contêiner flex ou grid podem mudar o efeito de um valor.