Formateador de CSS
Formatea CSS conservando selectores, declaraciones, comentarios, valores y estructura de reglas at-rule.
Make CSS easier to review
El CSS comprimido puede ocultar selectores, declaraciones, comentarios y valores largos en una línea. El formateador muestra un diseño legible.
El formato cambia la presentación y no demuestra validez, eficiencia, accesibilidad o compatibilidad. Conserva la fuente y revisa un diff.
Usa una muestra con selectores, declaraciones, comentarios, custom properties, media queries y valores entre comillas.
Formatting is not CSS validation
CSS contiene selectores, declaraciones, valores, comentarios, at-rules, funciones, custom properties y bloques. La indentación muestra sus límites.
El formateador organiza espacios y tokens, pero no prueba estándares, especificidad, accesibilidad, rendimiento o compatibilidad del build.
Los valores pueden incluir strings, URLs, escapes, gradientes, variables y extensiones del proveedor.
How to format CSS
- Pega una hoja CSS completa o un fragmento compatible.
- Revisa selectores, llaves, declaraciones, comentarios, propiedades personalizadas, funciones y at-rules.
- Compara propiedades, valores, comillas, URLs, variables y orden con el original.
- Ejecuta linter, build, accesibilidad y pruebas de navegador.
- Elimina URLs privadas, tokens y datos de usuario de las muestras.
Formatting method
- Lee selectores, declaraciones,
Lee selectores, declaraciones, valores, comentarios, bloques, funciones y at-rules.
- Añade saltos e
Añade saltos e indentación para revisar reglas y bloques anidados.
- Conserva valores, strings,
Conserva valores, strings, URLs, custom properties, comentarios y orden.
Confirma recuperación, dialecto, extensiones vendor, comentarios, espacios y mensajes de error en un motor real.
Read the formatted result
El resultado es un CSS legible. Compara selectores, declaraciones, valores, comentarios, bloques, funciones y orden con la fuente.
Un fallo no prueba soporte exacto del parser o recuperación.
Un problema de navegador, linter o build es separado; formatear no optimiza rendimiento.
Errores comunes
Confundir indentación con validación puede ocultar valores inválidos, sorpresas de especificidad o problemas de accesibilidad.
Cambiar custom properties, strings, URLs, escapes u orden puede cambiar el comportamiento.
No supongas que una extensión de proveedor funciona igual en todas las herramientas.
Pegar URLs privadas, tokens o estilos de usuarios puede exponer datos.
Límites y casos especiales
La función formatea CSS y no garantiza estándares, lint, accesibilidad, seguridad, rendimiento, compatibilidad o minificación.
Prueba custom properties, at-rules, extensiones, funciones, escapes, comentarios y hojas grandes con herramientas reales.
No pegues estilos confidenciales sin permiso.
Examples
¿El formato valida CSS?
¿El formato valida CSS?
Pega una hoja CSS completa o un fragmento compatible.
El resultado es un CSS legible. Compara selectores, declaraciones, valores, comentarios, bloques, funciones y orden con la fuente.
¿Cambia el cascade?
¿Cambia el cascade?
Revisa selectores, llaves, declaraciones, comentarios, propiedades personalizadas, funciones y at-rules.
Un fallo no prueba soporte exacto del parser o recuperación.
¿Se conservan los valores?
¿Se conservan los valores?
Compara propiedades, valores, comillas, URLs, variables y orden con el original.
Un problema de navegador, linter o build es separado; formatear no optimiza rendimiento.
¿Se conservan comentarios?
¿Se conservan comentarios?
Ejecuta linter, build, accesibilidad y pruebas de navegador.
El resultado es un CSS legible. Compara selectores, declaraciones, valores, comentarios, bloques, funciones y orden con la fuente.
¿Puede formatear media queries?
¿Puede formatear media queries?
Elimina URLs privadas, tokens y datos de usuario de las muestras.
Un fallo no prueba soporte exacto del parser o recuperación.
¿Mejora el rendimiento?
¿Mejora el rendimiento?
Pega una hoja CSS completa o un fragmento compatible.
Un problema de navegador, linter o build es separado; formatear no optimiza rendimiento.
Frequently asked questions
¿El formato valida CSS?
No. Usa parser, linter, build, accesibilidad y navegador.
¿Cambia el cascade?
Deberían cambiar solo espacios; compara el orden y prueba.
¿Se conservan los valores?
Los ejemplos conservan valores, strings, URLs y funciones; revisa el diff.
¿Se conservan comentarios?
Los ejemplos conservan comentarios; confirma con tu entrada.
¿Puede formatear media queries?
El ejemplo muestra un at-rule anidado; confirma soporte.
¿Mejora el rendimiento?
No. Usa profiling y optimización específica.
¿Repara CSS inválido?
No lo supongas; corrige la fuente y valida.
¿Qué hago después?
Revisa diff y ejecuta linter, build, accesibilidad y pruebas de navegador.