Formateador CSS — lee una hoja minificada

Qué hace esta herramienta

CSS minificado o enredado se vuelve CSS legible.

a{margin:0 auto;--x:1px}@media print{a{color:#000}}

a {
  margin: 0 auto;
  --x: 1px
}

@media print {
  a {
    color: #000
  }
}

Una declaración por línea, un nivel de indentación por nivel de anidamiento, una línea en blanco entre las reglas de primer nivel. La indentación es una opción: dos espacios por defecto, cuatro si esa es tu convención.

Lo que deja exactamente como está

• Tus valores. #FFFFFF no se vuelve white, 0px no se vuelve 0, y margin: 10px 10px 10px 10px no se pliega. Esas reescrituras son trabajo de un optimizador, y cada una es un juicio sobre tu hoja de estilos.
• El orden. Declaraciones y reglas salen en el orden en que las escribiste. En CSS el orden es el significado: a igual especificidad gana la última regla.
• Tus comentarios. Conservan su sitio, encima de la regla o al final de la línea, que es para lo que se escribieron.

No es un validador

a { color: red

a {
  color: red

La llave que falta vuelve faltando. Un formateador lee lo que le das y lo maqueta; no te dice si un navegador lo aceptaría. Eso corta por los dos lados: una hoja con un error de sintaxis se ordena igual, lo que ayuda a encontrar el error, y un resultado ordenado no prueba nada sobre la validez. Para eso están las herramientas de desarrollo del navegador o un linter como Stylelint.

El otro sentido

El minificador CSS de este sitio hace el viaje inverso: quita los espacios que esta herramienta añade, mantiene intactas las cadenas, el contenido de url() y los comentarios de licencia, y deja tus valores en paz de la misma manera. Formatear para leer, minificar para publicar: la misma hoja, dos formas.

Privado por diseño

Todo se ejecuta localmente en tu navegador con JavaScript. Tus datos nunca se suben a un servidor, lo que hace que la herramienta sea segura para contenido sensible y funcione sin conexión.