Formateador CSS
Embellece CSS con Prettier: una declaración por línea, espaciado coherente, 2 o 4 espacios o tabulaciones y media queries bien anidadas. Funciona en tu navegador.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
Herramientas Relacionadas
Ver Todas¿Qué es Formateador CSS?
El Formateador CSS convierte hojas de estilo minificadas o inconsistentes en CSS legible usando Prettier: cada regla y declaración en su propia línea, espaciado normalizado alrededor de los dos puntos y los selectores, y at-rules anidadas con sangría.
Cómo usar Formateador CSS
- Pega el CSS en el cuadro de entrada o haz clic en Cargar ejemplo.
- Elige la Sangría.
- Haz clic en Formatear (la salida también se actualiza mientras escribes).
- Copia o descarga el CSS formateado.
Ejemplo
a{color:red;margin:0 auto} a {
color: red;
margin: 0 auto;
} Cuándo usar Formateador CSS
Úsalo para leer el CSS minificado de un sitio web, normalizar hojas de estilo escritas a mano antes de una revisión o formatear fragmentos CSS para documentación. No comprueba nombres ni valores de propiedades: para eso usa el Validador CSS. Para SCSS o Less, elige ese lenguaje en el Embellecedor de código.
Cómo funciona Formateador CSS
La hoja de estilo se analiza con el parser de Prettier basado en PostCSS y se imprime con las reglas CSS de Prettier: un espacio después de cada dos puntos, cada declaración termina en punto y coma y los selectores de una lista van en líneas separadas. Los bloques sin cerrar y otros errores de sintaxis se reportan con línea y columna.
Casos de Uso Comunes
- Desminificar CSS para depurar un sitio en producción
- Normalizar el formato antes de una revisión de código
- Formatear fragmentos CSS para artículos de blog
- Limpiar el CSS exportado por herramientas de diseño
Nota de Seguridad
Todo se ejecuta localmente en tu navegador; el código que pegas no se sube a ningún servidor.
Preguntas Frecuentes
¿Reordena las propiedades?
No, las declaraciones mantienen su orden original.
¿Puede formatear SCSS o Less?
Usa el Embellecedor de código y selecciona SCSS o Less.
¿Se conservan los comentarios?
Sí, los comentarios se mantienen.