Saltar al contenido principal
LibraTool logoLibraTool

Embellecedor de CSS gratis

Da formato legible al CSS minificado con una sangría uniforme, o minifícalo. Ordenación alfabética opcional de las propiedades para obtener diferencias predecibles.

Funciona sin conexión una vez cargado

Suelta un archivo aquí o haz clic para buscarlo

CSS · procesado en tu dispositivo

o pulsa Ctrl+V para pegar desde el portapapeles

Explorar archivos
CSS formateado
La salida aparecerá aquí…

Usos habituales

  • Depura CSS de ProducciónVe CSS minificado de sitios de producción en formato legible para encontrar e invertir ingeniería de estilos.
  • Refuerza Estilo CSS del EquipoEjecuta CSS enviado por el equipo a través de un embellecedor consistente para que los diffs sean sobre contenido, no formato.
  • Formatea CSS con Prefijos de ProveedorEl CSS con prefijos de proveedor (salida de autoprefixer) a menudo tiene muchas variantes -webkit-, -moz-, -ms-. Formatea para inspeccionar.
  • Aprende de CSS ProfesionalEstudia CSS de sistemas de diseño famosos formateando su salida compilada.
  • Formatea CSS para Reportes de ErroresAl reportar errores de CSS, el CSS formateado es mucho más fácil para que los revisores lean y entiendan.

Cómo funciona

Esta herramienta formatea CSS usando un analizador recursivo escrito a mano integrado directamente en la página: sin biblioteca de terceros, sin llamada al servidor. El analizador recorre tu CSS carácter por carácter, gestionando correctamente cadenas entre comillas, valores url(), reglas @ anidadas y comentarios que confundirían a enfoques más simples basados en expresiones regulares.

  1. 1
    Tokenización a nivel de carácter
    La función walkCss escanea la entrada en bruto carácter por carácter, siguiendo el estado de comillas y la profundidad de paréntesis para que los puntos y coma o llaves dentro de url(), valores de cadena, o comentarios nunca se confundan con delimitadores estructurales.
  2. 2
    Separación de bloques y declaraciones
    Cuando el escáner encuentra una llave de apertura de nivel superior, extrae el preludio (el selector o la palabra clave de la regla @) y procesa recursivamente el cuerpo del bloque, que a su vez puede contener reglas anidadas (@media, @supports, anidación nativa de CSS) gestionadas en una profundidad de recursión más honda.
  3. 3
    Ordenación de propiedades e indentación
    Las declaraciones dentro de cada bloque se recopilan en una serie, y luego se ordenan opcionalmente por orden alfabético del nombre de la propiedad antes de escribirse con el ancho de sangría elegido (2 o 4 espacios). El modo Minificar omite por completo los espacios en blanco y elimina los comentarios.
  4. 4
    Salida instantánea en el navegador
    Los resultados aparecen mientras escribes mediante un hook useMemo: nada se envía a ningún sitio. El CSS formateado o minificado se puede copiar al portapapeles o descargar como archivo .css, y el panel muestra la diferencia de tamaño respecto al original.

Herramientas relacionadas

🌐

Embellecedor y minificador de HTML

Da formato o minifica HTML con la sangría de anidación adecuada. Conserva el contenido dentro de los bloques <pre>, <script> y <style>.

Probar
🗄️

Formateador y embellecedor de SQL

Da formato legible a consultas SQL con sangría adecuada, mayúsculas o minúsculas configurables en las palabras clave y saltos de línea en las cláusulas principales. Funciona con cualquier dialecto SQL.

Probar
🗜️

Minificador y embellecedor de CSS

Minifica CSS para reducir el tamaño del archivo o embellece CSS minificado para facilitar la lectura. Instantáneo, en tu navegador.

Probar

Preguntas frecuentes