Monu Tools

Formateador CSS

Embellece CSS con una sangría limpia o minifícalo para reducir el tamaño. Maneja media queries, calc() y comentarios de licencia.

Cómo usar Formateador CSS

  1. 01

    Pega tu CSS en el cuadro de entrada.

  2. 02

    Elige Embellecer para formatearlo o Minificar para comprimirlo.

  3. 03

    Elige el tamaño de sangría y copia el resultado.

Qué hace el formateador de CSS

Es un formateador de CSS que embellece hojas de estilo con una sangría limpia y uniforme, o las minifica para reducir el tamaño del archivo. Eliges el tamaño de sangría al embellecer, y cambias a minificar cuando quieres la salida más pequeña.

Cuándo embellecer y cuándo minificar

Un CSS legible es más fácil de examinar, revisar y depurar: cuando cada regla y declaración está sangrada de forma uniforme, puedes ver los selectores, el anidamiento y la forma de tus media queries de un vistazo.

Minificar es para producción. Elimina los espacios en blanco y los comentarios que los navegadores no necesitan, para que el archivo se descargue más rápido. En una hoja de estilo grande el ahorro se acumula, sobre todo antes de la compresión gzip en el servidor.

Minificar con cuidado con calc() y media queries

El minificador es cuidadoso donde importa. Mantiene los espacios alrededor del más y el menos dentro de calc(), para que calc(100% - 30px) siga siendo válido, y solo quita los espacios alrededor de caracteres estructurales como llaves, dos puntos y punto y coma. También maneja correctamente las media queries anidadas.

Los comentarios de licencia se conservan

Los comentarios de licencia escritos en la forma /*! ... */ se conservan, que es la convención estándar para mantener los avisos de copyright y licencia en la salida minificada aunque se eliminen los comentarios normales.

Funciona en tu navegador

Tanto embellecer como minificar se ejecutan enteramente en tu navegador, así que tus hojas de estilo nunca salen de tu dispositivo. La herramienta da formato para la legibilidad y el tamaño; no valida que tu CSS sea correcto.

Preguntas frecuentes

¿Minificar rompe las expresiones calc()?

No. El minificador conserva los espacios alrededor del más y el menos dentro de los valores, para que calc(100% - 30px) siga siendo válido. Solo quita espacios alrededor de caracteres estructurales como llaves, dos puntos y punto y coma.

¿Se eliminan los comentarios al minificar?

Los comentarios normales se eliminan para ahorrar espacio, pero los comentarios de licencia escritos como /*! ... */ se conservan, que es la convención estándar para preservar los avisos de copyright.

¿Se sube mi CSS a algún sitio?

No. Tanto embellecer como minificar se ejecutan totalmente en tu navegador, así que tus hojas de estilo nunca salen de tu dispositivo.

¿Cuándo debo embellecer y cuándo minificar?

Embellece mientras lees, editas o revisas CSS. Minifica la hoja de estilo final para producción, donde un archivo más pequeño carga más rápido para los visitantes.

¿Comprueba que mi CSS sea válido?

No. Da formato y minifica el texto para legibilidad y tamaño, pero no valida las propiedades ni los valores, así que reformateará el CSS aunque contenga un error.

Fuentes

Insertar esta herramienta

Añade esta herramienta a tu propio sitio web. Copia el fragmento de abajo. Se mantiene actualizado automáticamente.

<iframe src="https://monu.tools/embed/es/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Herramientas relacionadas