Saltar ao contido principal
LibraTool logoLibraTool

Embellecedor de CSS de balde

Formata CSS minimizado cunha sangría coherente, ou minimízao. Ordenación alfabética opcional das propiedades para obter diferenzas previsibles.

Funciona sen conexión unha vez cargado

Solta aquí un ficheiro ou fai clic para buscalo

CSS · procesado no teu dispositivo

ou preme Ctrl+V para pegar desde o portapapeis

Explorar ficheiros
CSS embellecido
A saída aparecerá aquí…

Usos habituais

  • Depura CSS de ProduciónVe CSS minificado de sitios de produción nun formato lexible para atopar e reverxinxenxariar estilos.
  • Fai Cumprir o Estilo CSS do EquipoExecuta CSS enviado polo equipo a través dun hermoseador consistente para que os diffs traten sobre contido, non formateo.
  • Formatea CSS con Prefixo de VendedorO CSS con prefixo de vendedor (saída de autoprefixer) a miúdo ten moitas variantes -webkit-, -moz-, -ms-. Formatea para inspeccionar.
  • Aprende de Pro CSSEstuda CSS de sistemas de deseño famosos formatando a súa saída compilada.
  • Formatea CSS para Informes de BugsAo presenta informes de bugs CSS, o CSS formateado é moito máis fácil de ler e comprender para os revisores.

Como funciona

Esta ferramenta formata CSS usando un analizador recursivo escrito a man incorporado directamente na páxina — sen biblioteca de terceiros, sen chamada a servidor. O analizador percorre o teu CSS carácter a carácter, xestionando correctamente cadeas entre comiñas, valores url(), at-rules aniñadas e comentarios que confundirían enfoques máis simples baseados en expresións regulares.

  1. 1
    Tokenización a nivel de carácter
    A función walkCss escanea a entrada en bruto un carácter cada vez, rastrexando o estado das comiñas e a profundidade dos parénteses para que os punto e coma ou as chaves dentro de url(), valores de cadea ou comentarios nunca se confundan con delimitadores estruturais.
  2. 2
    Separación de bloques e declaracións
    Cando o escáner atopa unha chave de apertura de nivel superior, extrae o preludio (o selector ou a palabra clave da at-rule) e procesa recursivamente o corpo do bloque — que a súa vez pode conter regras aniñadas (@media, @supports, aniñamento nativo de CSS) xestionadas a unha profundidade de recursión maior.
  3. 3
    Ordenación de propiedades e sangría
    As declaracións dentro de cada bloque recóllense nunha secuencia, e opcionalmente ordénanse alfabeticamente polo nome da propiedade antes de escribirse coa anchura de sangría escollida (2 ou 4 espazos). O modo Minificar omite os espazos en branco por completo e elimina os comentarios.
  4. 4
    Saída instantánea no navegador
    Os resultados aparecen mentres escribes mediante un hook useMemo — nada se envía a ningún sitio. O CSS formatado ou minificado pódese copiar ao portapapeis ou descargar como ficheiro .css, e o panel mostra a diferenza de tamaño en comparación co orixinal.

Ferramentas relacionadas

🌐

Embellecedor e minificador de HTML

Formatea ou minifica HTML cunha sangría de anidamento adecuada. Conserva o contido dentro dos bloques <pre>, <script>, <style>.

Próbao
🗄️

Formateador e embellecedor SQL

Formatea consultas SQL con sangría adecuada, capitalización configurable de palabras clave e saltos de liña en cláusulas principais. Funciona con calquera dialecto SQL.

Próbao
🗜️

Minificador e embellecedor de CSS

Minifica CSS para reducir o tamaño do ficheiro ou embellece CSS minificado para a súa lexibilidade. Instantáneo, no teu navegador.

Próbao

Preguntas frecuentes