Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Embellece una hoja de estilos para que puedas leerla, o la reduce cuando la quieres más pequeña. Ambas direcciones se comprueban contra el flujo de tokens en cada ejecución, así que la salida es tu hoja de estilos con otros espacios en blanco y nada más: sin fusión de shorthands, sin acortar colores, sin reordenar reglas.
CSS de entrada
Suelta un archivo .css
Se lee en esta pestaña. No se sube nada.
Formateado
Reglas
5
Selectores
9
Declaraciones
9
Reglas at
1
Propiedades personalizadas
2
Cómo se usa
Pega el CSS o suelta un archivo
Las at-rules anidadas, las propiedades personalizadas, `:is()` y los selectores modernos se analizan todos. La barra de estadísticas bajo los paneles cuenta reglas, selectores, declaraciones y propiedades personalizadas sobre la marcha.
Embellece con la disposición que uses
Ancho de indentación, un selector por línea o varios, una línea en blanco entre reglas, comentarios conservados o eliminados. Estas son las cuatro cosas en las que las hojas de estilos realmente discrepan.
O minifica, y conserva la cabecera de licencia
La convención `/*!` marca un comentario que debe sobrevivir a la minificación. El interruptor la respeta, y las cifras antes/después/ahorrado te dicen si valió la pena hacerlo.
Preguntas frecuentes
¿Por qué no acorta `#ffffff` a `#fff`?
Porque cada reescritura «segura» tiene una hoja de estilos donde no lo es. Acortar colores, fusionar shorthands, reordenar declaraciones y eliminar reglas «redundantes» cambian el comportamiento en algún sitio, y un minificador que rompe una página en silencio es peor que uno que ahorra menos bytes. Gzip recupera la mayor parte de la diferencia de todos modos.
¿Qué son los «problemas léxicos» de los que informa?
Sitios a los que el tokenizador no pudo encontrar sentido: un comentario sin cerrar, una cadena que llega hasta el final del archivo, una llave suelta. Se informan con un desplazamiento en bytes y el formateador sigue adelante, porque una hoja de estilos con una regla rota sigue mereciendo leerse.
¿Añade prefijos de proveedor?
No. Prefijar necesita un objetivo de compatibilidad de navegadores y una base de datos de lo que requiere cada propiedad, y ambas cambian cada mes. Ese es el trabajo de Autoprefixer y necesita un paso de build para hacerlo honestamente.
¿Sobrevivirá a una URL que contiene un punto y coma?
Sí: `url(dots;grid.png)` y una cadena `content: "{ not a block; }"` se tokenizan como valores únicos en lugar de partirse por la puntuación de dentro. Ese caso está en la muestra de la página precisamente porque los formateadores ingenuos lo hacen mal.
Puede recibir de
Empaquetador de sprites
Sprite Sheet Packer
Junta muchas imágenes en un solo atlas y emite el mapa de fotogramas en CSS o JSON.
Formateador y minificador de HTML
HTML Beautifier & Minifier
Formatea o minifica HTML preservando los elementos en línea, con opción de colapsar los espacios en blanco.
Formateador y minificador de JavaScript
JavaScript Beautifier & Minifier
Quita comentarios y espacios de JavaScript o TypeScript sin renombrar nada, y vuelve a indentar un paquete minificado para poder leerlo.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
Formateador y minificador de HTML
HTML Beautifier & Minifier
Formatea o minifica HTML preservando los elementos en línea, con opción de colapsar los espacios en blanco.
Formateador y minificador de JavaScript
JavaScript Beautifier & Minifier
Quita comentarios y espacios de JavaScript o TypeScript sin renombrar nada, y vuelve a indentar un paquete minificado para poder leerlo.
SVG a data URI para CSS
SVG to CSS Data URI
Codifica un SVG como data URI de fondo en CSS, escapando solo lo imprescindible para que ocupe poco.
Codificador y decodificador Base64
Base64 Encoder & Decoder
Codifica y decodifica Base64 y Base64URL, para texto o archivos, tratando UTF-8 correctamente.
curl a código
curl to Code
Convierte un comando curl en fetch, axios, requests de Python, Go, PHP o PowerShell.