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 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.

Un petit test montre ce que fait ce formateur CSS en ligne Coller @media (max-width :600px) {.nav a,.nav button{padding:8px 12px;color:#333}} et cliquer sur Embellir avec 2 espaces La requête multimédia ouvre son propre bloc, .nav a et .nav button go on separate lines one level in, et chaque déclaration se trouve sur sa propre ligne avec un espace après le colon Le badge de taille lit 73 B → 98 B, +34 %, car l'indentation ajoute des octets. Cliquez sur Minify sur cette sortie et il revient à l'original 73 octets.