Vés al contingut principal
LibraTool logoLibraTool

Embellidor de CSS de franc

Formata CSS minimitzat amb una sagnia coherent, o minimitza’l. Ordenació alfabètica opcional de les propietats per obtenir diferències previsibles.

Funciona sense connexió un cop carregat

Deixeu un fitxer aquí o feu clic per cercar-lo

CSS · processat al teu dispositiu

o premeu Ctrl+V per enganxar des del porta-retalls

Navegar pels fitxers
CSS embellert
La sortida apareixerà aquí…

Usos habituals

  • Depuració CSS de produccióVeure CSS reduït de llocs de producció en format llegible per trobar i enginyeria inversa d'estils.
  • Aplicar consistència CSS del equipExecuteu CSS proposat per l'equip a través d'un embellador consistent de manera que les diferències tracten del contingut, no del formatatge.
  • Format CSS amb prefix de proveïdorEl CSS amb prefix de proveïdor (sortida d'autoprefixer) sovint té moltes variants -webkit-, -moz-, -ms-. Formatar per a inspecció.
  • Apreneu de CSS ProEstudiar CSS des de sistemes de disseny coneguts formatant la seva sortida compilada.
  • Format CSS per a informes de bugsQuan presenteu errors CSS, el CSS formatat és molt més fàcil de llegir i entendre pels revisors.

Com funciona

Aquesta eina formata CSS utilitzant un analitzador recursiu escrit a mà integrat directament a la pàgina — sense biblioteca de tercers, sense crida al servidor. L'analitzador recorre el teu CSS caràcter per caràcter, gestionant correctament cadenes entre cometes, valors url(), regles at nascudes i comentaris que confondrien enfocaments més senzills basats en expressions regulars.

  1. 1
    Pas de tokenització
    La funció walkCss escaneja l'entrada bruta un caràcter alhora, seguint l'estat de cometes i la profunditat de parèntesis perquè els punts i comes o claus dins d'url(), valors de cadena, o comentaris mai es confonguin amb delimitadors estructurals.
  2. 2
    Separació de blocs i declaracions
    Quan l'escàner troba una clau d'obertura de nivell superior, extreu el preludi (el selector o la paraula clau de la regla at) i processa recursivament el cos del bloc — que ell mateix pot contenir regles niades (@media, @supports, niament CSS natiu) gestionades a una profunditat de recursió més profunda.
  3. 3
    Ordenació de propietats i sagnat
    Les declaracions dins de cada bloc es recullen en una tanda, i després opcionalment s'ordenen alfabèticament pel nom de la propietat abans d'escriure's amb l'amplada de sagnat triada (2 o 4 espais). El mode Minifica omet completament els espais en blanc i elimina els comentaris.
  4. 4
    Sortida instantània al navegador
    Els resultats apareixen mentre escrius a través d'un hook useMemo — no s'envia res enlloc. El CSS formatat o minificat es pot copiar al porta-retalls o descarregar com a fitxer .css, i el panell mostra la diferència de mida respecte a l'original.

Eines relacionades

🌐

Embellidor i minificador d'HTML

Formata o minifica HTML amb sagnat d'imbricació adequat. Preserva el contingut dins de blocs <pre>, <script>, <style>.

Prova-ho
🗄️

Formatador i embellidor SQL

Formata consultes SQL amb sagnat adequat, majúscules de paraules clau configurables i salts de línia en clàusules principals. Funciona amb qualsevol dialecte SQL.

Prova-ho
🗜️

Minificador i embellidor de CSS

Minifica CSS per reduir la mida del fitxer o embelleix CSS minificat per a la seva llegibilitat. Instantani, al teu navegador.

Prova-ho

Preguntes freqüents