Formatteur CSS

Un formateur CSS lit une feuille de style et la réécrit avec un espacement, une indentation et des sauts de ligne cohérents afin qu'elle soit facile à lire et à maintenir. Il analyse le CSS dans sa structure sous-jacente de règles, de sélecteurs, de déclarations, de règles at et de commentaires, puis imprime cette structure en utilisant une disposition prévisible : une déclaration par ligne, un seul espace après chaque deux points, et chaque bloc imbriqué est indenté d'un niveau plus profond que son parent. Les règles de style restent identiques, mais un fichier arrivé sous la forme d'une longue ligne ininterrompue devient quelque chose que vous pouvez réellement numériser et modifier.

Le même outil fonctionne à l'envers comme un minificateur CSS La modification des bandes de chaque espace, tabulation, coupure de ligne, et (éventuellement) commentaire qu'un navigateur n'a pas besoin, en réduisant la feuille de style au plus petit équivalent octet pour octet Une feuille de style bien formatée de 6 Ko tombe souvent en dessous de 4 Ko une fois que l'espace est parti, ce qui signifie moins d'octets sur le réseau et une première peinture plus rapide Embellissez pendant que vous écrivez et déboguez ; minifiez la copie que vous expédiez à la production.

Ce formateur comprend les parties de CSS qui déclenchent des scripts naïfs de recherche et de remplacement. Les règles internes imbriquées comme @media et @supports maintiennent leurs règles internes correctement en retrait, les blocs @keyframes avec des pas de pourcentage sont préservés, les littéraux de chaîne dans le contenu et les valeurs d'URL () sont laissés exactement tels qu'écrits et les commentaires sont conservés ou supprimés sur demande. Tout s'exécute entièrement dans votre navigateur, donc votre feuille de style, y compris tous les jetons de conception propriétaires ou noms de classes internes, n'est jamais téléchargée et l'outil continue de fonctionner une fois la page chargée, même sans connexion.