Embellecedor y minificador CSS

Da formato a una hoja de estilos con un selector por línea, o minimízala quitando los espacios y los comentarios que el navegador ignora. Las dos acciones son reescrituras de texto en esta página: no se sube nada y las cadenas, el contenido de url() y las propiedades personalizadas vuelven intactos.

Se ejecuta localmente en tu navegador

Cómo formatear o minimizar una hoja de estilos

Pega una hoja de estilos y pulsa Formatear para obtener un selector por línea con sangría de tabulador, o Minimizar para quitar los espacios y los comentarios que el navegador ignora de todos modos. Las dos acciones reescriben texto dentro de esta página: el CSS no se sube a ningún sitio y no hay que instalar nada ni crear una cuenta.

La reescritura es deliberadamente conservadora. Los valores se mantienen tal como están escritos —las cadenas, el contenido de url() como los URI data:, los selectores de atributo, las secuencias de escape y las propiedades personalizadas nunca se recolocan— y no se añade nada: ni puntos y coma que falten, ni prefijos de navegador, ni reglas fusionadas. Lo que devuelve es tu propia hoja de estilos, con otra disposición.

  1. Pega el CSS en el campo superior o escribe encima del texto de ejemplo.
  2. Ajusta las tres opciones que hay debajo: Eliminar comentarios borra los bloques /* … */, Propiedades en minúsculas viene activada y solo afecta a los nombres de propiedad, y Disposición horizontal pone cada regla en una línea y solo se aplica a Formatear.
  3. Pulsa Formatear para leer la hoja o Minimizar para reducirla antes de publicarla; el resultado aparece abajo, en el cuadro de salida y con colores de sintaxis.
  4. Copia se lleva el texto exacto de la salida y Limpiar vacía la entrada, la salida y el propio cuadro de salida.

Qué conserva la salida y qué reescribe

Cómo coloca Formatear la hoja de estilos

Formatear escribe un selector por línea, sangra cada nivel de anidamiento con un tabulador y pone cada declaración en su propia línea dentro de selector { … }. Las listas de selectores conservan sus comas, las reglas @ como @media y @supports conservan sus bloques y una regla vacía sigue vacía. Una declaración escrita sin punto y coma sigue sin él, y varios puntos y coma seguidos se reducen a uno.

Es una pasada de espacios, no de estilo: las líneas largas no se parten por columna, no se reordenan declaraciones ni reglas, no se fusionan declaraciones duplicadas ni atajos, y no se añaden prefijos de navegador. Una hoja sangrada con ocho espacios y otra partida a mano salen con la misma sangría de tabulador.

Cuándo conserva un espacio Minimizar

Minimizar reduce cada tanda de espacios a uno solo cuando el CSS lo necesita y la elimina cuando no: .a > .b pasa a .a>.b y red !important a red!important, mientras que calc(100% - 20px), 1px solid #000 y la lista de valores de rgba(0, 0, 0, .5) conservan los espacios y las comas que sí importan. Los tabuladores y los saltos de línea desaparecen en todo el archivo salvo dentro de las cadenas y de los url().

El ahorro procede solo del espacio en blanco, los comentarios y los puntos y coma repetidos. Un archivo ya minimizado apenas cambia: la hoja de Bootstrap 3.3.7, de 121 KB, pierde aquí 333 bytes porque ya no queda nada que quitar. Un archivo sangrado a mano y con cabeceras de comentarios gana unos pocos puntos más. Renombrar clases, fusionar reglas y borrar selectores sin uso no forman parte de esta herramienta.

Qué hace cada una de las tres opciones

Eliminar comentarios está desactivada por defecto; al activarla, los bloques /* … */ se borran antes del resto del trabajo, incluidos los avisos de licencia /*! … */, el único caso en que Minimizar altera un archivo que una licencia espera conservar. Propiedades en minúsculas viene activada y solo pasa a minúsculas los nombres de propiedad: COLOR:RED queda como color:RED. Los valores mantienen su grafía, así que url(X.PNG) no se toca, y los nombres de las reglas @ tampoco.

Las propiedades personalizadas quedan fuera de esa conversión a propósito. --MainColor y var(--MainColor) nombran la misma variable solo mientras coincide la grafía, de modo que reescribir la definición como --maincolor rompería todas las referencias. Disposición horizontal une la salida formateada para que cada regla ocupe una sola línea con un salto tras la llave de cierre; Minimizar ignora ese ajuste.

Dónde se detiene la herramienta

Detrás de los dos botones no hay un analizador de CSS, así que no se valida ni se repara nada. Una llave de cierre que falta se devuelve tal como se escribió, una llave de sobra se mantiene y el texto que no es CSS —HTML, JavaScript, prosa— vuelve sin cambios. Una hoja que un navegador ya acepta se acepta aquí igual; una rota vuelve rota y en el mismo punto.

No se sube nada: toda la herramienta es un script que llega con la página, así que no hay ninguna petición mientras trabajas y sigue funcionando sin conexión. El límite práctico es el tamaño: una hoja de 1,2 MB se reescribe en unos 130 ms, pero colorear el resultado en pantalla cuesta alrededor de 1,7 s, y eso es lo que se espera.

Herramientas recientes: