#223 · Formato y datos

Formateador CSS

Convierte CSS comprimido o difícil de leer en una estructura visual clara con reglas separadas, declaraciones por línea y sangría uniforme. Respeta comentarios y cadenas, funciona en el navegador y resulta útil para revisar estilos pegados desde plantillas, páginas o archivos generados.

Entrada de texto

Procesamiento local
Espacio publicitario

Cómo usar esta herramienta de texto

  1. Pega o escribe el contenido en el cuadro de entrada.
  2. Ajusta las opciones específicas de la herramienta si lo necesitas.
  3. Pulsa «Formatear CSS» o usa Ctrl/Cmd + Enter.
  4. Revisa el resultado y cópialo o descárgalo en TXT.

Qué hace esta herramienta

Recorre el CSS carácter a carácter, preserva cadenas y comentarios y añade saltos de línea después de llaves y declaraciones.

Recorre el CSS carácter a carácter, preserva cadenas y comentarios y añade saltos de línea después de llaves y declaraciones.

No corrige propiedades inválidas ni resuelve problemas de especificidad o compatibilidad entre navegadores.

Ejemplo

.card{padding:16px;color:#222} pasa a una regla con cada declaración en su propia línea.

Casos de uso

  • Revisar hojas de estilo minificadas.
  • Preparar fragmentos CSS para documentación.
  • Detectar visualmente reglas y declaraciones largas.

Consejos para obtener mejores resultados

  • Usa la misma sangría que el resto del proyecto.
  • Valida el CSS por separado si sospechas errores de sintaxis.
  • Revisa valores con funciones complejas como calc() o var().
  • Evita reformatear archivos generados si el proceso de compilación los sobrescribe.

Detalles del procesamiento

El contenido se procesa en el navegador con reglas deterministas específicas de esta herramienta. Los contadores del resultado se calculan sobre la salida generada y ayudan a comprobar el efecto del procesamiento.

No corrige propiedades inválidas ni resuelve problemas de especificidad o compatibilidad entre navegadores.

Preguntas frecuentes

¿El procesamiento cambia selectores, propiedades o valores CSS?

La herramienta está diseñada para modificar el espaciado y la presentación, no la intención de las reglas. Aun así, conviene probar CSS complejo o experimental.

¿Se mantienen las cadenas y los comentarios CSS?

Las cadenas se protegen durante el procesamiento. En el minificador puedes decidir si los comentarios ordinarios se eliminan.

¿Sirve para CSS con media queries y funciones como calc() o var()?

Sí para una limpieza o presentación básica, aunque reglas anidadas o sintaxis nueva deben revisarse en el navegador de destino.

¿La herramienta valida si una propiedad CSS es correcta?

No. No sustituye un validador de CSS ni comprueba compatibilidad entre navegadores.

¿El CSS se procesa de forma local?

Sí. El contenido se transforma directamente en el navegador sin requerir una API externa.

Resumen del módulo

EntradaCódigo CSS
OpcionesSangría de 2 o 4 espacios
SalidaCSS formateado