Formateador y minificador de CSS
FormatoTodo se ejecuta en tu navegador: no se sube nada
Expande una hoja de estilos comprimida en una línea: cada declaración de un bloque va en su propia línea, las listas de selectores rompen en las comas, los bloques @media y las reglas anidadas se sangran un nivel más, y las reglas vacías se recogen en una línea. El modo minificar hace lo contrario: quita el espacio solo en posiciones estructurales y elimina el punto y coma sobrante antes de }. Los espacios que llevan significado, como el de margin: 0 auto o el de antes de los dos puntos en a :hover, se dejan tal cual, porque quitarlos cambia lo que significa la regla.
Funciones
- La salida va con resaltado: palabras clave, cadenas y comentarios con colores distintos
- Expande los bloques de reglas: el selector en su línea, una declaración por línea y la llave de cierre alineada con el selector
- Rompe las listas de selectores en las comas, mientras las comas dentro de un valor (pilas de fuentes, rgba()) se quedan donde están
- Recoge las reglas vacías en una sola línea, como a {}
- Normaliza los dos puntos de las declaraciones a color: red sin tocar los de las pseudoclases como &:hover y a:hover
- Los caracteres estructurales dentro de cadenas, comentarios y url() se ignoran, así que content: "}" y los puntos y coma de un data URI no rompen una regla
- Los data URI se tratan como una unidad, así que el punto y coma interno nunca parte una declaración en dos
- El minificador quita el espacio estructural, el punto y coma sobrante antes de } y los comentarios normales
- Conserva los comentarios de copyright escritos como /*! ... */
- Sin validación de sintaxis: las llaves descompensadas se sangran lo mejor posible en vez de rechazarse
Cómo se usa
- Pega tu CSS en el cuadro de entrada
- Elige el modo y el sangrado
- Pulsa Ctrl/⌘ + Enter o haz clic en «Ejecutar»
- Haz clic en «Copiar» para llevarte el resultado
Preguntas frecuentes
- ¿El minificador quita el espacio de margin: 0 auto?
- No. Solo se quita el espacio alrededor de { } ; , y :. «0 auto» son dos valores, y quitar un espacio convertiría la declaración en inválida, así que esos espacios se conservan siempre.
- ¿a :hover se convierte al minificar en a:hover?
- No. El espacio antes de los dos puntos es un combinador de descendiente, y a :hover y a:hover son dos reglas completamente distintas. El minificador lo conserva.
- ¿Admite el anidamiento de CSS?
- Sí. Los dos puntos de una pseudoclase y los de una declaración se distinguen por lo que viene después: solo los dos puntos seguidos de ; o } se tratan como de declaración, así que un selector nunca se reescribe como el inválido &: hover.
- ¿Se sube mi CSS a algún sitio?
- No. Todo ocurre en la memoria de tu navegador, la página no hace ninguna petición y funciona sin conexión.
Herramientas relacionadas
JS: minificar y embellecer
FormatoMinifica JavaScript (quita comentarios y espacios, conserva las licencias /*!) o lo embellece reindentando por llaves y puntos y coma. Nada se sube.
Formateador HTML
FormatoFormatea HTML en línea por niveles de etiqueta, manteniendo el texto y las etiquetas en línea en la misma línea y el contenido de script o pre intacto.
Conversor de color
ConversiónConvierte entre HEX, RGB, HSL, HWB, CMYK y los espacios Lab, OKLCH y XYZ, con temperatura de color, inverso, complementario, ANSI y contraste WCAG.
Formateador JSON
FormatoFormatea, valida y repara JSON en línea: árbol plegable, búsqueda de claves y valores, edición nodo a nodo y errores con línea y columna.
JSON a código
FormatoConvierte una muestra JSON en interfaces de TypeScript, structs de Go, clases de Java o structs de Rust; las claves que faltan salen opcionales.
Formateador SQL
FormatoFormatea SQL en línea: una cláusula por línea, palabras clave con el mismo estilo y subconsultas sangradas. El minificador quita los comentarios.