Entrada
Utilidad para desarrolladores
Formateador CSS
Embellece o minifica CSS sin subir código. Inspecciona reglas, selectores y declaraciones, revisa avisos básicos de sintaxis y prueba el resultado en una vista previa aislada.
Tamaño
Reglas
Selectores
Declaraciones
Salida
CSS formateado o minificado
Avisos de validación
Problemas y advertencias de CSS
Estructura
Resumen de selectores y declaraciones
| # | Selector / regla @ | Declaraciones | Propiedades |
|---|
Vista previa aislada
Ejemplo renderizado con tu CSS
La vista previa se ejecuta en un marco aislado con una política de seguridad estricta; sus estilos no afectan a esta página y los recursos remotos quedan bloqueados.
Ejemplos
Ejemplos CSS habituales
Referencia rápida de CSS
| Concepto | Ejemplo | Notas |
|---|---|---|
| Regla | .card { padding: 16px; } | Un selector seguido de un bloque de declaraciones. |
| Declaración | color: #333; | Una propiedad y un valor separados por dos puntos. |
| Propiedad personalizada | --accent: #16735f; | Variable CSS reutilizable cuyo nombre comienza con dos guiones. |
| Consulta de medios | @media (max-width: 640px) | Aplica reglas anidadas cuando se cumple una condición. |
| Fotogramas clave | @keyframes fade | Define los pasos de una animación CSS. |
Notas de formato y validación
Formato que reconoce cadenasSe identifican cadenas entre comillas, comentarios y paréntesis antes de modificar el espacio estructural.
Minificación conservadoraElimina espacios innecesarios y conserva el espaciado dentro de funciones como calc().
Validación ligeraLos avisos cubren delimitadores equilibrados, cadenas o comentarios sin cerrar y declaraciones sin dos puntos. Usa un analizador o linter para comprobar todo el estándar.
Procesamiento localEl CSS permanece en el navegador. El formato, las estadísticas, la validación y la vista previa no suben el contenido.
Preguntas frecuentes del formateador CSS
¿Este formateador CSS sube mi código?
No. El formato, la minificación, las estadísticas, los avisos y la vista previa se ejecutan localmente en el navegador.
¿Puede sustituir a un linter CSS completo?
No. Detecta problemas estructurales comunes, pero la conformidad, compatibilidad y reglas del proyecto requieren un analizador o linter dedicado.
¿Minificar CSS puede cambiar su comportamiento?
El minificador conserva cadenas, comentarios cuando se solicita y espacios dentro de funciones. Prueba los hacks antiguos o directivas de herramientas antes de publicar.
¿La vista previa está aislada de la página?
Sí. Usa un iframe aislado y una política de seguridad estricta que bloquea recursos remotos.