Formateador CSS
Indenta una hoja de estilos para que puedas leerla, enteramente en tu navegador. No se renombra, se acorta ni se normaliza nada.
Se ejecuta enteramente en tu navegador. No se sube, registra ni guarda nada.
Pega una hoja de estilos minificada o mal indentada y léela como es debido. El formateo se hace en tu navegador, y de la hoja no se cambia nada más allá de sus espacios en blanco.
Cómo funciona
La hoja se divide en piezas —comentarios, cadenas, direcciones, nombres, números, paréntesis y llaves— y luego se vuelve a escribir. Cada regla recibe su propio bloque, cada selector de una lista su propia línea, y cada declaración su propia línea dentro de la regla. Las reglas anidadas, las media queries y los keyframes se anidan con ella.
El espacio en blanco se conserva salvo que se pueda demostrar que no significa nada. Eso es lo contrario de lo que hacen casi todos los formateadores, y es deliberado: en CSS un espacio entre dos selectores es el combinador de descendiente, así que «.a .b» y «.a.b» seleccionan elementos distintos. Solo se quita espacio antes de una coma, un punto y coma o un cierre, y después de una apertura, donde CSS no puede leerlo como nada.
El único espacio que se añade es el que va después de los dos puntos de una declaración. Distinguir esos dos puntos de los de una pseudoclase es por lo que el formateador mira hacia delante hasta el siguiente cierre o punto y coma antes de decidir qué está leyendo.
Ejemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Una regla escrita en una línea | a{color:red;margin:0} | a { color: red; margin: 0; } |
Preguntas frecuentes
¿Se envía mi hoja de estilos a alguna parte?
No. El formateador es JavaScript ejecutándose en esta página. No se sube nada, no se registra nada y no se almacena nada: puedes desconectar la red y la herramienta sigue funcionando.
¿También minifica?
No, y es una decisión y no un olvido. Minificar CSS significa decidir qué espacios en blanco tienen significado y cuáles no, y equivocarse en eso cambia a qué elementos se aplica una regla, en silencio y de una forma de la que te enterarías en producción. Ese es otro trabajo, y merece hacerse bien o no hacerse.
¿Va a corregir o a ordenar mis valores?
No. No pasará a minúsculas un color hexadecimal, no acortará #ffffff, no quitará un cero inicial, no reordenará tus declaraciones ni añadirá prefijos de proveedor. Cada una de esas cosas es una opinión sobre tu código y no una cuestión de disposición, y algunas cambian el comportamiento. Solo se mueven los espacios.
¿Entiende Sass o Less?
En parte, y con honestidad: dispone las reglas anidadas, que es lo que esos lenguajes comparten con el CSS moderno. No tiene ni idea de lo que significa un mixin, una variable o una directiva de control, así que los trata como los tokens que son. No se pierde nada, pero no esperes que sepa que @if abre una rama.
¿Qué pasa con un data URI?
Sobrevive. Un url() sin comillas se lee como una sola pieza hasta su paréntesis de cierre, porque un data URI contiene a menudo un punto y coma y leerlo como el final de una declaración partiría el valor en dos.
Conviene saber
- La salida contiene exactamente las piezas que contenía la entrada. Lo único que se añade es un punto y coma en la última declaración de un bloque, que es seguro en todas partes y mantiene estable el resultado cuando la regla crece luego una línea más.
- Una cadena, un comentario o un url() sin cerrar se rechazan en lugar de reformatearse, porque a partir de ahí la herramienta ya no puede distinguir el código del texto.
- La disposición es determinista: la misma hoja con la misma opción produce siempre la misma salida, y formatear una hoja ya formateada no cambia nada.
Todas las herramientas de Código