pulsa ⌘K para cambiar de herramienta
FORMAT & CONVERT
Formateador CSS
Formatea hojas de estilo CSS.
css-format
§01 ACERCA DE ESTA HERRAMIENTA
Descripción general
Un CSS minificado o generado por una máquina es casi imposible de leer o depurar. Esta herramienta reformatea cualquier hoja de estilo con una indentación coherente de dos espacios y una declaración por línea, mediante el motor CSS de js-beautify. Todo se ejecuta localmente en tu navegador.
Cómo se usa
- Pega tu hoja de estilo en el campo CSS.
- El campo Formatted se actualiza al instante mientras escribes: no hay ningún botón que pulsar.
- Copia el resultado desde el campo de salida.
Ejemplos
.a{color:red;margin:0}→
.a {
color: red;
margin: 0;
}
- Una media query en una sola línea como
@media(max-width:600px){.b{padding:1em}}se despliega en un bloque indentado, lo que facilita revisar las reglas de los puntos de ruptura.
Notas
El formateador solo reescribe los espacios: no valida la sintaxis, así que un CSS mal formado se deja pasar lo mejor posible en lugar de rechazarse con un error. Los comentarios se mantienen en su sitio. Incluso con hojas de estilo muy grandes el formateo sigue siendo instantáneo, ya que no hay ninguna ida y vuelta por la red.
FAQ
¿Se envía mi CSS a un servidor?
No. El formateo se ejecuta por completo en tu navegador mediante la biblioteca js-beautify. Tu hoja de estilo nunca sale de tu equipo.
¿Qué indentación aplica el formateador?
Una indentación de dos espacios, con cada regla y cada declaración en su propia línea. El ancho de indentación es fijo y no se puede configurar.
¿El formateo cambia el comportamiento del CSS?
No. Solo se ajustan los espacios y los saltos de línea. Los selectores, las propiedades, los valores y su orden se conservan, así que el resultado visual es idéntico.