ES

Minificar CSS: reducir, formatear e incrustar el CSS en el HTML

Con esta herramienta para minificar CSS reduces una hoja de estilos, la formateas para leerla o la incrustas en atributos style para boletines por correo. Comentarios, espacios y ceros innecesarios desaparecen sin cambiar el efecto. Los errores de sintaxis indican la línea y tu código se queda en el navegador.

Fuente: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Actualizado: .

Mi caja de herramientasTus datos se guardan solo en este navegador.

El código se procesa solo en tu navegador. En el modo de incrustación, pega un documento HTML completo o un fragmento con <style>.

Tu texto se queda en tu navegador: no se envía, no se guarda y no aparece en la dirección de la página.

Se trata como un bloque style más al final, por ejemplo de un archivo CSS aparte.

Resultado

Resultado
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Tamaño
214 → 144 caracteres (33 % menos).
Eliminado: 1 comentarios, 0 reglas vacías. Los comentarios que empiezan por /*! se conservan.

Cómo se calcula

Esta herramienta ofrece tres cosas para hojas de estilo: minificar para archivos pequeños, formatear para código legible e incrustar para correos HTML, donde algunos programas ignoran o recortan los bloques style.

Minificar CSS

  1. Elige «Minificar» y pega tu CSS.
  2. Copia el resultado o descárgalo como style.min.css. Debajo ves cuánto se redujo el archivo.

Solo se aplican transformaciones que no cambian el efecto: desaparecen los comentarios (salvo /*! … */) y los espacios, también el último punto y coma antes de }, 0.50em pasa a .5em, #aabbcc a #abc y 0px a 0. Los ceros con unidad se mantienen donde hacen falta: en calc(), min(), max(), clamp(), en la forma abreviada flex, en tiempos, ángulos y porcentajes y en propiedades personalizadas. Las cadenas y url() no cambian.

Formatear CSS

El CSS comprimido se convierte en código legible: una declaración por línea, listas de selectores línea a línea, bloques con sangría y una línea en blanco entre reglas. Los comentarios se conservan.

Incrustar CSS en el HTML

Pega un documento HTML con un bloque style. Para cada elemento se evalúan las reglas que encajan, se ordenan por especificidad y orden y se escriben en el atributo style. Un atributo style existente gana a las reglas normales, y !important a todo. Lo que no se puede escribir en un elemento, como :hover, pseudoelementos, @media y @font-face, permanece en un bloque style.

Conviene saber

Tu código se queda en tu navegador y no se envía ni se guarda.

Preguntas frecuentes

¿Cómo puedo minificar CSS?

Elige el modo «Minificar» y pega el CSS. Se eliminan comentarios, espacios y ceros innecesarios, y el resultado se puede copiar o descargar como archivo.

¿Minificar cambia el aspecto de la página?

No, solo aplica transformaciones seguras. Los ceros con unidad se mantienen, por ejemplo, en calc() y en la abreviatura flex, porque allí hacen falta. Las cadenas y url() no se tocan.

¿Para qué sirve incrustar el CSS?

Algunos programas de correo ignoran los bloques style total o parcialmente. Al incrustar, cada regla se escribe en el elemento como atributo style para que el formato llegue.

¿Qué pasa con :hover y @media al incrustar?

No se pueden escribir en un elemento y por eso permanecen en un bloque style en el head. Los programas que los admiten siguen aplicándolos.

¿Cómo resuelve la herramienta reglas contradictorias?

Según la cascada CSS: primero !important, luego mayor especificidad y, en empate, la regla posterior. Un atributo style existente cuenta como un selector de máxima especificidad.

¿Se sube mi código?

No. Todo se ejecuta en tu navegador; el código no se envía, no se guarda y no se escribe en la barra de direcciones.

Fuentes y base legal

Última actualización: · Principios editoriales

Herramientas relacionadas