Morton 5 de abril de 2014 a las 07.32
   Imprimir artículo
elWebmaster.com

Limpia el CSS que no utilizas de tu código con Uncss


css3wide1¬ŅSabes qu√© es tan bueno que a√Īadir herramientas a un sitio web o aplicaci√≥n? Remover cosas que no necesitan. Afortunadamente, hay una herramienta que te permite deshacerte del CSS no utilizado en tu sitio. ¬ŅQuieres conocerla?

Ya sea código, imágenes, o dependencias, deshacerse de todo el código basura es como el primer sorbo de un gran vaso de vino luego de un día de estresante trabajo. Y para eso hay una herramienta llamada Uncss, desarrollada en NodeJS. Un uso básico de la herramienta de línea de comandos de Uncss sería:

uncss http://www.elwebmaster.com > styles.css

La salida de la ejecución es una hoja de estilos presentado sólo las reglas de CSS usadas. Las no usadas son removidas.

¬ŅPero c√≥mo funciona Uncss? Los archivos HTML son cargados por PhantomJS y JavaScript es ejecutado. Las hojas de estilo utilizadas son extra√≠das del HTML resultante. Las hojas de estilo son concatenadas y las reglas son parseadas por css-parse. los filtros document.querySelector dejan afuera a los selectores que no son encontrados en los archivos HTML. Las reglas restantes son convertidas de vuelta a CSS.

Como con cada herramienta basada en NodeJS, puedes sacar ventaja de su API en JavaScript. Aquí hay un ejemplo de uso:

  1. var uncss = require('uncss');
  2.  
  3. var files   = ['my', 'array', 'of', 'HTML', 'files'],
  4.     options = {
  5.         ignore       : ['#added_at_runtime', /test\-[0-9]+/],
  6.         media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
  7.         csspath      : '../public/css/',
  8.         raw          : 'h1 { color: green }',
  9.         stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
  10.         ignoreSheets : [/fonts.googleapis/],
  11.         urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
  12.         timeout      : 1000,
  13.         htmlroot     : 'public'
  14.     };
  15.  
  16. uncss(files, options, function (error, output) {
  17.     console.log(output);
  18. });
  19.  
  20. uncss(files, function (error, output) {
  21.     console.log(output);
  22. });
  23.  
  24. var raw_html = '...';
  25. uncss(raw_html, options, function (error, output) {
  26.     console.log(output);
  27. });

Haz clic aquí para descargar Uncss >>

Te recomendamos darle a Uncss una oportunidad. ¬°Esperamos que te sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder