Formateador y Minificador de CSS

Formateador de CSS - Formatear y Embellecer CSS Online

Una potente herramienta de formateo y embellecimiento de CSS online que le ayuda a formatear, embellecer y minificar código CSS. Con resaltado de sintaxis, sangría personalizable y opciones de expansión de selectores. Perfecto para desarrolladores web, diseñadores y cualquier persona que trabaje con hojas de estilo.

¿Cuál es la diferencia entre formatear y minificar CSS?

Formatear (también llamado embellecer o imprimir bonito) reorganiza tu hoja de estilos para legibilidad humana: una declaración por línea, sangría consistente, líneas en blanco entre bloques de reglas y dos puntos alineados. Minificar hace lo contrario: elimina cada byte que el navegador no necesita: espacios en blanco, comentarios, el último punto y coma de cada bloque, comillas redundantes y prefijos de proveedor no usados. Una hoja de estilos típica del tamaño de Bootstrap se reduce de aproximadamente 180 KB formateada a 140 KB minificada, y a aproximadamente 22 KB después de gzip encima. Siempre registra la versión sin minificar en el control de versiones y minifica como parte de tu pipeline de compilación: depurar CSS minificado en DevTools es doloroso sin mapas de origen, y los mapas de origen te permiten mantener ambos mundos.

¿Cuánto se reducirá mi CSS al minificar y qué ahorro de gzip puedo esperar?

El CSS escrito a mano suele reducirse entre un 20-40% al minificar: el ahorro proviene de eliminar sangría, saltos de línea, comentarios y el último punto y coma de cada bloque. El CSS que ya es compacto (o ya está minificado) ahorra mucho menos. Después de hacer clic en Minificar, esta herramienta muestra un informe real de antes/después: tu tamaño original, el tamaño minificado, los bytes exactos y el porcentaje ahorrado, además de un tamaño gzip estimado. La cifra de gzip es la que más importa en producción porque los servidores casi siempre sirven CSS comprimido: el texto como el CSS es muy repetitivo, así que gzip (o Brotli) suele recortar el tamaño minificado un 70-80% adicional, lo que significa que una hoja de estilos minificada de 140 KB a menudo viaja como unos 20-30 KB por la red. Trata el número de gzip aquí como una estimación de una heurística de repetición, no un resultado exacto en bytes: el nivel de compresión de tu servidor y la elección entre Brotli y gzip lo modificarán ligeramente. La conclusión principal: minifica para reducir el coste de análisis y el tamaño de origen, y habilita siempre gzip/Brotli en el servidor para el grueso del ahorro de transferencia.

¿Esta herramienta cambia mis colores hex o valores rgb?

No. Esta herramienta preserva tus colores exactamente como están escritos: #FFFFFF sigue siendo #FFFFFF, rgb(255, 0, 0) se mantiene igual y la moderna sintaxis con barra rgb(255 0 0 / 0.5) se conserva textualmente. Aquí formatear solo realinea espacios, sangría y saltos de línea; minificar solo elimina los bytes que el navegador no necesita. Ninguna de las dos pasadas reescribe los tokens de color, por lo que tus valores de marca y cualquier formato sensible a diferencias sobreviven intactos. Si lo que quieres es normalización de color (acortar #aabbcc a #abc, poner el hex en minúsculas o convertir rgb() a hex), usa un optimizador dedicado como PostCSS con cssnano o csso en tu pipeline de compilación: esos hacen optimizaciones que esta herramienta deja intencionadamente en tus manos. Recuerda que el hex de tres dígitos (#abc) solo equivale a #aabbcc cuando cada par es idéntico, así que #336699 puede acortarse a #369 pero #336698 no.

¿Cómo se formatean los selectores CSS en la salida?

Al Formatear, cada selector separado por comas va en su propia línea, por lo que un selector compuesto largo como h1, h2, h3, h4, h5, h6 es fácil de escanear y editar. Los combinadores (>, +, ~) y el espacio en blanco descendiente los normaliza a espacios simples el motor Prettier. Los selectores de atributo mantienen su comillado original, y las pseudo-clases y pseudo-elementos permanecen adjuntos a su elemento precedente sin espacio en blanco (a:hover, ::before). Tus selectores nunca se reescriben por especificidad: la herramienta no elimina selectores universales ni altera de otro modo lo que un selector coincide, por lo que :where() y :is() de Selectors Level 4 se preservan exactamente como están escritas (recuerda que :where tiene especificidad cero mientras que :is toma la especificidad más alta de sus argumentos). Minificar mantiene los mismos selectores y solo elimina el espacio en blanco alrededor de ellos.

¿Qué pasa con los prefijos de proveedor como -webkit- o -moz- durante el formateo?

El formateo solo nunca añade ni elimina prefijos de proveedor: solo realinea espacios en blanco. La herramienta de prefijos empaquetada es un paso separado opcional. La recomendación moderna según caniuse.com es mantener CSS dirigido a tu matriz de navegadores soportados y dejar que Autoprefixer o PostCSS inyecten los prefijos correctos en tiempo de compilación desde la configuración Browserslist. A partir de 2026, la mayoría de los prefijos -webkit- para transformaciones, transiciones, animaciones, gradientes y flexbox son innecesarios en cualquier navegador lanzado después de 2020; los prefijos -ms- eran específicos de IE 10-11 y Edge Legacy, ambos al final de vida. Eliminar prefijos no usados puede ahorrar 5-15% del tamaño del CSS en bases de código heredadas. Esta herramienta preserva cada prefijo que escribes (tanto Formatear como Minificar dejan las declaraciones -webkit-, -moz-, -ms- y -o- exactamente como las escribiste); para añadir o eliminar prefijos según un objetivo de Browserslist, ejecuta Autoprefixer o PostCSS en tu paso de compilación.

¿Debería usar propiedades abreviadas como margin: 10px 20px o las largas como margin-top, margin-right?

La abreviada gana en bytes y legibilidad cuando estás estableciendo el conjunto completo junto: margin: 10px 20px son 18 bytes frente a 53 para las cuatro declaraciones largas. Pero la abreviada tiene una trampa oculta: REINICIA cada propiedad larga que cubre, incluso las que no mencionaste. Escribir background: red más tarde en la cascada elimina background-image, background-repeat, background-position: todos establecidos a sus valores iniciales. Esto hace que la abreviada sea peligrosa en CSS de componentes donde una regla padre puede haber establecido propiedades largas individuales. Como regla: usa abreviadas en resets y capas base donde intencionalmente empiezas desde cero; usa propiedades largas en sobrescrituras de componentes donde quieras cambiar un eje sin tocar los otros. Este formateador no convierte entre abreviada y larga: preserva tu intención autoral.

¿Cómo maneja el formateador características modernas de CSS como anidamiento, propiedades personalizadas y consultas de contenedor?

El Anidamiento CSS (Baseline 2023, sin preprocesador necesario) se formatea con cada regla anidada con sangría un nivel debajo de su padre, y el selector & preservado textualmente. Las propiedades personalizadas (--mi-color: azul) y referencias var() se dejan intactas: incluso valores inusuales como calc(var(--x) + 10px) mantienen su espacio en blanco interno, ya que los valores de propiedades personalizadas CSS preservan tokens. Las consultas de contenedor (@container) obtienen el mismo formato de bloque que las consultas @media y @supports, incluyendo cualquier condición container-name. Las capas de cascada (@layer base, components, utilities) preservan su orden de declaración, que es semánticamente significativo: reordenar capas cambiaría la cascada. Los registros @property de CSS Houdini y bloques @scope se reconocen y formatean con sangría apropiada.

¿Por qué mis comentarios desaparecen o se mueven durante el formateo?

El CSS estándar solo admite comentarios /* ... */ — // es inválido en CSS puro (es una característica de Sass/Less). Esta herramienta sigue la convención de la mayoría de los minificadores: al Minificar, los comentarios /* regulares */ se eliminan para ahorrar bytes, pero los comentarios de licencia que comienzan con /*! se conservan textualmente para que las cabeceras de atribución y licencia sobrevivan en producción. Al Formatear, todos los comentarios se preservan y se mantienen en su propia línea encima o al lado de la regla que describen. Si ves comentarios comportándose inesperadamente, verifica si tu fuente incluye literales de plantilla CSS-in-JS o sintaxis Sass: esos requieren herramientas diferentes. Como formatear solo reorganiza espacios en blanco, formatear la misma entrada dos veces produce una salida idéntica.

¿Cuál es la diferencia entre las funciones calc(), clamp() y min()/max()?

Las cuatro son funciones matemáticas definidas en CSS Values and Units Module 4, aceptadas en cualquier contexto de longitud, porcentaje, número o ángulo. calc(100% - 20px) realiza aritmética a través de unidades que el navegador no puede pre-resolver. min(50vw, 800px) devuelve el menor de dos valores: útil para limitar anchos fluidos. max(16px, 1rem) devuelve el mayor: útil para mínimos de accesibilidad en valores sensibles al zoom del usuario. clamp(16px, 4vw, 32px) es la combinación asesina: devuelve el valor del medio cuando el segundo argumento está entre el primero (mínimo) y el tercero (máximo), haciéndola la forma canónica de escribir tipografía fluida sin media queries. El anidamiento está permitido: calc(min(100%, 1200px) - 2rem). El formateador preserva el espacio en blanco dentro de estas funciones porque los operadores requieren espacios en ambos lados según la especificación.

Características Principales

• Formatear CSS con sangría personalizable (2, 4, 8 espacios o tabulaciones)
• Minificar CSS para reducir el tamaño del archivo para producción
• Informe de ahorro de minificación: tamaño original vs minificado, bytes ahorrados, porcentaje de reducción y tamaño gzip estimado
• Preserva cadenas, url() y URIs data: intactos al minificar
• Mantiene válidas las consultas @media, @supports y @container
• Conserva los comentarios de licencia /*! mientras elimina los comentarios normales al minificar
• Resaltado de sintaxis para selectores, propiedades, valores y colores
• Estadísticas de la salida (caracteres, líneas, tamaño)
• Copiar CSS formateado al portapapeles
• Descargar CSS formateado como archivo .css
• Cargar archivos CSS para formatear
• Soporte de modo oscuro
• Sin límites de tamaño de archivo
• Procesamiento 100% del lado del cliente - su código nunca sale de su navegador
• Funciona sin conexión después de la carga inicial
• Diseño responsivo compatible con móviles
• Preserva prefijos de proveedor y características modernas de CSS