OnlineConverTools
Iniciar sesión

Formateador CSS

Formatea o minifica CSS

Acerca de Formateador CSS

«Formateador CSS» tiene dos botones para una misma hoja de estilos. «Formatear» ejecuta js-beautify, el motor de beautifier.io: una declaración por línea, sangría de 2 espacios, como máximo una línea en blanco entre reglas, y los comentarios y los valores url(data:…) quedan intactos. «Minificar» ejecuta CSSO: se eliminan los comentarios (salvo los comentarios de licencia /*!) y los espacios en blanco, se fusionan las reglas idénticas (a y button con las mismas declaraciones pasan a ser a,button) y se acortan los colores y los valores cero. js-beautify y CSSO funcionan los dos en tu navegador. Ninguno de los dos valida: el CSS no válido se formatea tal cual, y «Minificar» puede eliminar sin avisar lo que no sabe analizar.

Ejemplo

«Minificar»: dos reglas con las mismas declaraciones se fusionan y #ff0000 pasa a ser red.

Entrada

a{color:#ff0000;margin:0px 0px}
button{color:#ff0000;margin:0px 0px}
/* end */

Salida

a,button{color:red;margin:0}

Cómo formatear o minificar CSS

  1. 1Pega una hoja de estilos en «Entrada».
  2. 2Haz clic en «Formatear» para obtener CSS con sangría, o en «Minificar» para la versión compacta.
  3. 3Compara «Salida» con tu original antes de reemplazarlo.
  4. 4Haz clic en «Copiar» o «Descargar»; el archivo se llama «formatted.css» tanto después de «Formatear» como de «Minificar».

Formatos y límites

Entrada
Texto CSS, incluidas las reglas @ como @media
Formatear
js-beautify: sangría de 2 espacios, como máximo una línea en blanco seguida
Minificar
CSSO: fusiona reglas idénticas, acorta colores y ceros, elimina espacios en blanco y comentarios (salvo los /*!)
Validación
Ninguna: los errores de sintaxis no se indican

Dónde se procesa tu CSS

Ambos motores son bibliotecas de JavaScript que tu navegador carga con el primer clic; el CSS que pegas se procesa en tu dispositivo y no se sube. Si se muestra un error, su texto se envía a nuestro registro de errores con el nombre de la herramienta y el nombre y la versión de tu navegador, sin los pasajes entre comillas, los números largos ni las direcciones.

Preguntas frecuentes

¿Puede la minificación romper mi CSS?

No, si el CSS es válido: CSSO solo aplica cambios que dan el mismo resultado, como fusionar reglas idénticas. El CSS no válido es otra cosa, porque CSSO puede eliminar sin avisar la parte que no sabe leer, así que revisa la salida.

¿«Formatear» cambia mis valores?

No. «Formatear» solo cambia los espacios en blanco: los saltos de línea, la sangría de 2 espacios y el espacio después de cada dos puntos. Las cadenas, los comentarios y los valores url(data:…) se conservan carácter por carácter.

¿Qué elimina «Minificar»?

Los comentarios que no son de licencia /*!, los saltos de línea, los espacios, el último punto y coma de cada regla y las unidades de los valores cero; además convierte #ff0000 en red y une las reglas que comparten las mismas declaraciones, como en el ejemplo de arriba.

Consejos y trucos

  • ✓Formatea primero una hoja de estilos minificada de terceros para encontrar la regla que necesitas y luego edita tu propio código fuente.
  • ✓Para SCSS o LESS, usa «Formateador de código», que formatea ambos con Prettier.

Herramientas relacionadas