Collez vos déclarations CSS, choisissez un mode d’écriture et une direction, puis lisez l’équivalent relatif au flux ligne par ligne. Les déclarations non réécrites sont conservées et comptées dans la ligne d’état.
Fonctionne localement dans votre navigateurL’outil lit une liste de déclarations CSS et réécrit celles qu’il peut exprimer dans le mode d’écriture choisi. Chaque côté, dimension et alignement pris en charge reçoit son équivalent relatif au flux, et le panneau affiche exactement le texte que Copier CSS place dans le presse-papiers.
Tout se passe dans la page : les déclarations sont lues par le paquet livré avec la page, aucune requête n’emporte votre CSS et l’outil continue de fonctionner hors ligne. Les valeurs ne sont jamais réécrites — le convertisseur échange le nom de la propriété et, pour text-align et float, le mot-clé —, donc un calc(), une couleur ou une unité relative arrivent tels quels dans la sortie.
Les côtés sont résolus par le mode d’écriture et la direction. En horizontal-tb avec ltr, margin-left devient margin-inline-start, padding-top devient padding-block-start et border-right-width devient border-inline-end-width ; en rtl, margin-left devient margin-inline-end. En vertical-rl (écriture verticale), margin-left devient margin-block-end et padding-top devient padding-inline-start. Cette même table gouverne margin, padding, les trois parties de bordure (width, style et color) et les quatre propriétés de position top, right, bottom et left, qui deviennent inset-block-start, inset-inline-end, etc. text-align: left est réécrit en start en ltr et en end en rtl ; float: right devient inline-end en ltr et inline-start en rtl.
Les dimensions suivent la même logique : width, min-width et max-width deviennent inline-size, min-inline-size et max-inline-size en écriture horizontale, et block-size, min-block-size et max-block-size en écriture verticale, tandis que la famille height passe sur l’autre axe. La valeur est copiée caractère par caractère, y compris un !important final : margin-left: 10px !important devient donc margin-inline-start: 10px !important.
Les raccourcis ne sont pas découpés : margin, padding, border, border-left et inset restent tels quels, car une découpe sûre demanderait toute la cascade. Les propriétés déjà logiques (margin-inline-start, block-size), les propriétés personnalisées comme --tokens, les at-rules, les sélecteurs et les accolades d’un bloc sont renvoyés sans modification et comptés comme non convertis : rien n’est supprimé. Les commentaires /* … */ sont retirés, et une déclaration sans valeur (margin-left:) est conservée telle quelle.
Le lecteur comprend qu’un point-virgule peut appartenir à une valeur : background-image: url(data:image/svg+xml;base64,…) survit en entier, tout comme content: "a;b". text-align: justify, start et end, les couleurs, les expressions calc() et toutes les unités arrivent inchangés. Comme seuls les noms de propriété (et les deux mots-clés) sont modifiés, le résultat se colle directement dans une feuille de styles — mais l’indentation d’un bloc collé n’est pas conservée, la sortie contenant une déclaration par ligne.
Les compteurs décrivent l’exécution en cours : « 6 déclarations converties » signifie que six propriétés physiques ont été réécrites, et le second nombre compte les fragments repris sans changement, comme les raccourcis, les propriétés déjà logiques et les at-rules. Une zone vide n’affiche aucun compteur. Avec l’option de repli active, chaque règle convertie est écrite deux fois — la ligne physique d’abord — pour que les navigateurs sans propriétés logiques continuent de fonctionner.
La scène est un schéma, pas un rendu de votre CSS : elle dessine les quatre axes logiques et une carte dont le writing-mode et la direction suivent les sélecteurs. Elle sert à confirmer vers quel côté physique renvoie un mot-clé logique avant de coller la sortie ; vérifiez ensuite le résultat dans l’inspecteur du navigateur, sur l’élément réel, car les contraintes héritées d’un conteneur flex ou grid peuvent modifier l’effet d’une valeur.