online - minimizar un css
¿Hay un minificador/compilador de CSS avanzado que hace cosas como la redundancia de tira y las reglas idénticas separadas por comas? (11)
Por ejemplo
input{margin:0}body{margin:0;background:white}
sería más corto escrito así
input,body{margin:0}body{background:white}
o esto
input,body{margin:0}body{margin:0;padding:0}
sería más corto escrito así
input,body{margin:0}body{padding:0}
Conclusión no hay tal herramienta Ver la respuesta aceptada.
Un consejo para los escritores de herramientas , es posible que desee considerar gzip. A veces, dejar unos pocos bytes en una optimización de segunda velocidad será más corto al final porque gzip es esencialmente una deduplicación de nivel de byte. Si hay dos secciones idénticas, gzip hará referencia a la anterior. Lo ideal sería considerar esto al decidir si ciertas optimizaciones deberían omitirse parte del tiempo o todo el tiempo, y cuál debería ser el orden de los selectores y las reglas.
CSSO está un poco desactualizado, ACCSS es un puerto CSSO que soluciona los problemas abiertos del código original.
https://github.com/acwtools/accss
y también tiene una mejor relación de compresión
Echa un vistazo a CSS Tidy, puede hacer algunas combinaciones: http://csstidy.sourceforge.net/
Esto se puede hacer usando CSSO .
Considere la siguiente entrada:
input{margin:0}body{margin:0;background:white}
Salida CSSO:
input,body{margin:0}body{background:#fff}
(exactamente lo que buscas)
Pero desafortunadamente, CSSO optimiza esto:
.dont-care {
background-image: url("images/chart.png");
background-repeat: no-repeat;
}
A:
.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}
Sin embargo, CSSTidy convierte lo anterior en la propiedad abreviada correspondiente:
.dont-care {
background:url("images/chart.png") no-repeat;
}
Solución de siete pasos para optimizar CSS:
Aquí está la práctica que sigo:
- Fusionar archivos CSS en
all.css. - Suministro a la entrada CSSO .
- Pulsa Minimizar
- Pegue la salida en
all.min.css
Excepto el pago de @Grillz para hacerlo de forma manual, hasta ahora no he encontrado una mejor oferta para la optimización de CSS.
Pero ¿qué pasa con los viejos hacks de IE?
Si está utilizando hacks CSS para IE6 y 7, CSSO conservará los hacks.
Por ejemplo:
.dont-care {
background-image: url("images/chart.png");
*background-image: url("images/chart.jpg");
background-repeat: no-repeat;
}
Salida CSSO:
.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}
CSSTidy ignorará asterik (* hack utilizado para IE6) y generará:
.dont-care {
background:url("images/chart.jpg") no-repeat;
}
También puede evitar los hacks y usar un archivo CSS separado para versiones anteriores de IE (por ejemplo, all.oldIE.css). Después de optimizar (utilizando los 7 pasos descritos anteriormente) ambos archivos por separado, esto es lo que puede usar en la etiqueta <head> de su archivo HTML / masterpage / template / layout eventualmente:
<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]-->
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->
donde all.min.css funcionaría para todos los navegadores, excepto para las versiones de IE menores y iguales a 7. Pero usar CSSO solo es una apuesta segura.
Actualizar
Salta la parte CSSTidy. CSSO hace una optimización segura. Según su desarrollador , la optimización taquigráfica no es segura:
Considera ese ejemplo:
.a{
background-attachment: fixed;
}
.b {
background-image: url("images/chart.png");
background-repeat: no-repeat;
}
y si tuviera
<div class="ab"></div>- un elemento con ambas clases, no puede optimizar el .b mientras escribe, porque anularía el conjunto debackground-attachmenten .a .
Entonces, no, esa no es una optimización segura.
Hay varios por ahi Algunos de los mejores son;
http://www.minifycss.com/css-compressor/
El segundo grupo agrupa las reglas que coinciden también y más.
No, no existe una herramienta de este tipo que se optimice al nivel que pides (que yo sepa al menos), y no estoy seguro de que quieras usarlo si lo hubiera. La razón es que no es un problema trivial encontrar el código CSS más pequeño posible. Para el trivial CSS que proporcionaste, es fácil. Pero imagina hacer eso en un bloque de 300kb de CSS. No es trivial. ¿Y vale la pena perder el tiempo de la CPU generándolo (podría ser si está guardando los resultados, pero no lo será si lo está sirviendo dinámicamente)?
¿Y cuál es la ganancia? ¿Ahorrando un poco por ciento como máximo en la transferencia? A menos que tenga tráfico a nivel de Facebook, no va a ahorrar mucho ancho de banda. Y un pequeño porcentaje tampoco afectará mucho a sus usuarios (incluso a través del acceso telefónico, transferir algunos kb no es tan malo).
Simplemente use un compresor estándar ( minify , YUI Compressor , etc.) y termine con él. En su lugar, preocuparse por la fruta que cuelga bajo. Los problemas fáciles de solucionar ...
Puede ser lo incorrecto, pero h ttp://www.cleancss.com/ ?
Recomendaría https://www.npmjs.com/package/gulp-clean-css
Si no tienes problemas para usar Gulp, está haciendo exactamente lo que quieres.
Si usa Visual Studio, puede instalar la extensión Web Essentials . Tiene soporte experimental para limpiar y fusionar reglas CSS, pero no exactamente como te suscribiste. Por un lado, crea más espacios en blanco, pero combina etiquetas css, que tienen (parcialmente) estilos iguales, por ejemplo ...
has probado less.js ? Puede escribir código css de una manera orientada a objetos, también puede usar este marco en el lado del cliente o del lado del servidor, debajo de una demostración en su caso:
/* you can write you desired css as follows */
body {
&input {
margin: 0;
}
background:white;
}
y se compilará automáticamente en:
body, input {
margin:0;
}
body {
background:white;
}
prueba MENOS.
LESS reconocerá automáticamente cuando guarde su archivo *.less e inmediatamente *.less su código CSS y se reducirá. Puede crear tantos archivos como desee y LESS los observará todos para activar la compilación.
Solo trabajarás en los archivos .less . La herramienta compilará automáticamente y guardará tus archivos como .css
Sí hay. El compresor YUI hace esto por ti. Me equivoqué, el compresor YUI es solo un minificador, pero de hecho es muy útil. Aquí se presenta qué y cómo se minimizan.
Este es un paquete .jar que deberá download y luego ejecutar a través de la terminal, si está en Unix o Linux (no sé de Windows, ¡así que alguien llena este vacío!), Con la siguiente sintaxis:
$ java -jar /path/to/yuicompressor-x.y.z.jar myfile.css -o myfile-min.css
La opción -o declara en qué archivo desea escribir su contenido reducido.