Embellecedor CSS y minificador
Formatee CSS desordenado o minimizado en hojas de estilo limpias y legibles, o comprima CSS formateado para reducir el tamaño del archivo. Ajuste la sangría, el formato del selector y el manejo de comentarios. Todo se ejecuta en tu navegador; su código nunca se carga.
Cómo embellecer y mejorar Minimizar CSS en línea
Comprender los dos modos
Las hojas de estilo CSS suelen terminar en dos estados: minificado (sin espacios en blanco, una línea, difícil de leer) o formato inconsistente (sangría mixta, saltos de línea extraños). Esta herramienta maneja ambas direcciones:
- Embellecer expande CSS comprimido en un diseño legible utilizando el formato maduro
js-bellezabiblioteca. La sangría, el formato del selector y el espacio entre reglas son configurables. - Minimizar elimina los comentarios y los espacios en blanco innecesarios para reducir los bytes entregados a sus usuarios, lo que resulta útil para enviar CSS de producción cuando no tiene un paso de compilación.
Cómo utilizar esta herramienta
- Pega tu CSS en el panel de entrada de la izquierda.
- Elija sus opciones de sangría y formato en la barra de herramientas.
- Hacer clic Embellecer para formatear, o Minimizar para comprimir.
- Copie el resultado, descárguelo como
.cssarchivo, o haga clic en Usar como entrada para encadenar operaciones.
La herramienta maneja CSS estándar, así como sintaxis anidada similar a SCSS, consultas de medios, fotogramas clave y variables CSS. Todo el procesamiento ocurre localmente en su navegador.
Preguntas frecuentes
¿Mi CSS está subido a alguna parte?
No. Tanto el embellecedor como el minificador se ejecutan completamente en su navegador utilizando JavaScript del lado del cliente. Su código nunca sale de su dispositivo y no se registra nada.
¿Cuánto ahorra realmente la minificación?
Para las hojas de estilo típicas escritas a mano o no minificadas, espere una reducción de tamaño de entre un 20% y un 40% después de la minificación, principalmente debido a la eliminación de comentarios, sangrías y nuevas líneas. En CSS ya compacto los ahorros son menores. El panel de salida muestra el delta de bytes exacto.
¿El minificador romperá mi CSS?
El minificador solo elimina los espacios en blanco, los comentarios y el punto y coma final al final de cada bloque de reglas. No reescribe selectores, fusiona reglas ni reordena propiedades, por lo que la salida tiene un comportamiento idéntico a la entrada.
¿Es compatible con SCSS o MENOS?
Da formato a reglas anidadas y comentarios de línea de estilo SCSS (//) lo suficientemente bien para uso ocasional, pero no es un compilador SCSS. Para flujos de trabajo SCSS/LESS reales, primero compile en CSS y luego formatee aquí si es necesario.
¿Admite variables CSS? @apoyay sintaxis moderna?
Totalmente compatible. Propiedades personalizadas (--var), @apoya, @recipiente, anidando, :es()/:dónde(), y mezcla de colores() todos pasan correctamente en los modos embellecer y minimizar.