Formateador CSS
Embellece y minifica CSS con una indentación limpia directamente en tu navegador.
El Formateador CSS de ToolsSoup es una herramienta online gratuita que embellece y minifica CSS directamente en tu navegador. Pega un CSS desordenado, minificado o en una sola línea y obtén reglas limpias y bien indentadas, con una declaración por línea y un espacio después de cada dos puntos, o comprímelo de nuevo para ahorrar bytes. Anida correctamente at-rules como media, supports y keyframes, preserva el contenido de las cadenas y los valores url(), y nunca sube tu código — sin registro y sin que nada salga de tu dispositivo.
¿Qué es un formateador CSS?
Un formateador CSS — también llamado embellecedor o pretty printer — reescribe las hojas de estilo brutas con indentación y saltos de línea consistentes para que sean fáciles de leer y mantener. Coloca cada regla en su propio bloque, pone una declaración por línea, añade un espacio después de cada dos puntos e indenta las reglas internas de at-rules anidadas como media queries, bloques supports y keyframes. Los desarrolladores lo usan para ordenar CSS compilado o minificado, código copiado de las herramientas de desarrollo y estilos pegados de la web.
Cómo formatear CSS online
Embellecer CSS con ToolsSoup solo lleva unos segundos:
- Pega tu CSS en el cuadro de entrada de la izquierda.
- Elige el tamaño de la indentación — 2 espacios, 4 espacios o tabulación.
- Haz clic en Formatear para indentarlo, o en Minificar para comprimirlo al menor número de caracteres.
- Copia el resultado ya limpio y vuélvelo a colocar en tu hoja de estilos.
¿Gestiona las media queries y los keyframes?
Sí. Las at-rules que contienen otras reglas — como media, supports y keyframes — se rastrean por sus llaves, así que sus selectores y declaraciones internas se indentan un nivel más. El resultado refleja el anidamiento real de tu hoja de estilos en lugar de aplanar todo a un solo nivel.
¿Mantiene intactas las cadenas y los valores url()?
Sí. El texto entre comillas y dentro de url() puede contener caracteres como dos puntos, punto y coma y llaves que de otro modo confundirían a un formateador. ToolsSoup protege esos valores antes de formatear y los restaura después, así que las cadenas de contenido y las rutas de imagen nunca se dividen ni se corrompen.
¿Cuál es la diferencia entre formatear y minificar CSS?
Formatear añade indentación y saltos de línea para hacer el CSS legible, mientras que minificar elimina los comentarios y colapsa el espacio en blanco para que el archivo sea lo más pequeño posible. Ambos mantienen tus estilos idénticos, así que puedes alternar entre los dos libremente mientras desarrollas y publicar la versión minificada en producción.
¿Por qué usar este formateador CSS?
- 100% gratis, sin anuncios, registro ni límites de uso.
- Funciona por completo en tu navegador — tus estilos nunca se suben a un servidor.
- Embellece y minifica CSS con un clic.
- Elige indentación de 2 espacios, 4 espacios o tabulación.
- Anida correctamente las at-rules media, supports y keyframes.
- Preserva el contenido de las cadenas y url() sin corromper valores.
Preguntas frecuentes
¿Este formateador CSS es gratis?
Sí. Todas las herramientas de ToolsSoup son completamente gratuitas, sin cuenta, registro ni límites ocultos.
¿Mi CSS está seguro?
Por supuesto. Todo el formateo ocurre localmente en tu navegador usando JavaScript, así que tus estilos nunca se envían ni se almacenan en ningún servidor.
¿Anida correctamente las media queries?
Sí. Las reglas dentro de los bloques media, supports y keyframes se indentan un nivel más para que el anidamiento de tu hoja de estilos quede claro.
¿Romperá las cadenas o los valores url()?
No. Las cadenas entre comillas y los valores url() se protegen antes de formatear y se restauran después, así que los dos puntos, el punto y coma y las llaves dentro de ellos nunca se corrompen.
¿Cuál es la diferencia entre formatear y minificar?
Formatear indenta el CSS para facilitar la lectura, mientras que minificar quita los comentarios y el espacio en blanco para reducir el archivo. Ninguno de los dos cambia cómo se aplican tus estilos.