Cómo usarla
- Pega CSS en el campo de entrada, abre un archivo .css o prueba el ejemplo.
- Elige Embellecer para obtener código legible o Minificar para obtener la salida más compacta.
- Al embellecer, elige 2 espacios, 4 espacios o tabulaciones.
- Copia el resultado o descárgalo como un archivo .css. Si las llaves o las comillas están desequilibradas, el error muestra la línea y la columna.
Cómo funciona
El formateador primero divide la hoja de estilos en tokens: cadenas entre comillas simples o dobles, valores url(…), comentarios, llaves y puntos y comas. Como las cadenas y los valores url() se tratan como un único token, un punto y coma dentro de una URI de datos o una llave dentro de content: "{ }" nunca confunde la estructura y su contenido se copia exactamente.
Beautify coloca cada selector de una lista de selectores en su propia línea, añade espacios alrededor de los combinadores de hijo, hermano y adyacente (>, ~, +) y escribe cada declaración como “property: value;” en su propia línea. Los bloques dentro de @media, @supports, @layer, @container y del anidamiento nativo de CSS se sangran un nivel por cada nivel de profundidad. Si falta el punto y coma después de la última declaración de un bloque, se añade. Los comentarios se mantienen donde están.
Minify elimina los comentarios (excepto los avisos de licencia /*! … */), colapsa los espacios en blanco, elimina los espacios alrededor de llaves, dos puntos, puntos y comas, comas y combinadores de selectores, y suprime el punto y coma antes de cada llave de cierre. Los espacios que cambian el significado se conservan: el combinador descendente en “.a .b”, el espacio en “a :focus” y los espacios dentro de valores como calc(100% - 2px). “! important” se normaliza a “!important”.
La herramienta no reescribe los valores: los colores, las unidades y los ceros se dejan tal como están escritos, y las reglas no se combinan ni se reordenan. Los archivos SCSS o Less con anidamiento sencillo suelen funcionar, pero no se entiende su sintaxis propia, como los comentarios de línea // o los mixins.
Ejemplos
Leer un archivo de framework minificado
Pegue un fragmento de bootstrap.min.css en una sola línea y elija Beautify con 2 espacios para ver cada regla, las media queries y sus reglas anidadas en líneas separadas e indentadas.
Publicar una hoja de estilos escrita a mano
Minifique una hoja de estilos de 12 KB con comentarios e indentación antes de insertarla en línea en una plantilla de correo electrónico o en el head de una página. El resumen muestra el número de caracteres antes y después.
Encontrar una llave que falta
Una hoja de estilos deja de aplicarse a mitad del archivo. El formateador informa «Este { nunca se cierra con una } de cierre correspondiente» con la línea de la regla a la que le falta la llave de cierre.
Preguntas frecuentes
¿Es seguro usar en producción el CSS minificado con esta herramienta?
Solo elimina los comentarios y los espacios en blanco que CSS ignora, por lo que las reglas se comportan igual. No realiza las optimizaciones más profundas de las herramientas de compilación, como combinar reglas o acortar colores, por lo que el resultado puede ser un poco más grande que el de estas.
¿Por qué se mantiene un espacio en “a :focus”?
En un selector, un espacio es el combinador descendente. “a :focus” significa un elemento enfocado dentro de un enlace, mientras que “a:focus” significa un enlace enfocado. Eliminar ese espacio cambiaría qué elementos coinciden.
¿Puede formatear SCSS o Less?
Las reglas anidadas normales se formatean correctamente. La sintaxis exclusiva de preprocesadores, como los comentarios //, los mixins con argumentos o los bloques @if, no se reconoce y puede formatearse de forma extraña, así que revisa el resultado.
¿Se eliminan los comentarios de licencia al minificar?
Los comentarios que empiezan por /*! se conservan, lo que es la convención habitual para los avisos de licencia y derechos de autor. Todos los demás comentarios se eliminan.
Privacidad
Tu CSS se procesa solo en tu navegador. No se sube, no se almacena ni se incluye en las analíticas.