cssmin.js

September 23rd, 2009. Tagged: CSS, JavaScript, performance, yui

cssmin.js is a JavaScript port of YUICompressor's CSS minifier.

The motivation

Minifying CSS helps reduce file sizes and makes your pages faster and your users happier. YUICompressor is cool but is written in Java, which can be a blocker for some folks - you know JVM, command line, classpaths... No more excuses, now you have a simple light JavaScript version. And as you know, JavaScript is everywhere, so you can run it however you want, integrate with your editor and so on.

The links

The integration

If you want to integrate the library into your environment, it's really easy. It's just one file with one function in it. So, just a simple function call:

var result = YAHOO.compressor.cssmin(input_css_code);

The credits

Julien Lecomte - creator of YUICompressor
Isaac Schlueter - he maintains the YUICompressor and is the author of the original cssmin utility which was ported to Java by Julien.

Ha, what about a quiz? Guess the language of Isaac's original cssmin and I'll send you a free copy of Even Faster WebSites and I'll sign my chapter. Seriously.

UPDATE: For Ruby folks, there's a Ruby port from the Ryan Grove.

Tell your friends about this post: Facebook, Twitter, Google+

59 Responses

  1. I’m going to guess Isaac wrote it in PHP

  2. [...] First Tweet 15 minutes ago stoyanstefanov Stoyan Stefanov Highly Influential New blog post: cssmin.js http://www.phpied.com/cssmin-js/ view retweet [...]

  3. heh, the shortest contest ever :)

    Greg, send me your mailing address to ssttoo at gmail

  4. Add to the end for correct work in IE6
    //:first-letter and :first-line for IE6
    css = css.replace(/:first-letter+/g, “:first-letter “);
    css = css.replace(/:first-line+/g, “:first-line “);

  5. Thanks P.Sorokin!

  6. [...] phpied.com Stoyan’s blog about (x)html, ajax, bookmarklets, browsers, css, firebug, javascript, json, mdb2, mysql, pear, performance, php, phpbb, tools, yslow, yui, writing, music,… life and everything. « cssmin.js [...]

  7. I need a perl version of this script, for server side optimization…

  8. Any idea how to perform CSS minimization for ASP.NET C#?

  9. [...] – yes, the same YUI compressor that does JavaScript minification. I’ve actually ported the CSS minification part of it to JavaScript (it’s in Java otherwise) some time ago. There’s even an online form [...]

  10. [...] Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js. [...]

  11. [...] 3. Perform Compression CSS (Stylesheet) CSS compression is actually quite simple, almost the same way with the above is by removing unnecessary white space. Compacting CSS coding can also be intensified when downloading, parsing and execution time on a page. For simplicity we do the compression on CSS, please use the many free tools available such as YUI Kompresor and cssmin.js. [...]

  12. Attention if you have Microsoft filters !

    For example:
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;

    The output will be:
    -ms-filter:”alpha(opacity=100)”;

    Cheers Markus

  13. All my css are called from my database with relevant links to the database how do I implement this tool?

  14. +1 to Markus’s comment about Filter; the DXImageTransform version of the filters (IE5+) are NOT the same as the shorter IE4 ones. From MSDN:

    “When you use the Internet Explorer 4.0 filter syntax, margins can affect how some filters are applied and rendered. An object’s boundary can be clipped when it is set too close to the filtered content. For example, if you apply a Glow filter to an object’s text without a margin, the object boundary clips some of the glow effect if the text is next to the boundary.”

    “With Internet Explorer 5.5 syntax, the Shadow, DropShadow, and Glow filters extend the boundary of an object to make room for the filter effect, while the Internet Explorer 4.0 versions clip the filter effect at the boundary.”

    “In many cases, color is expanded to include the Alpha component (#AARRGGBB) in the Internet Explorer 5.5 filters.”

    http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

    Has this been fixed in CSSMin, and indeed YUI Compressor?

  15. Thanks – very usefull

  16. [...] du antingen använda dig av plugins till WordPress eller av gratistjänster som YUI Compressor och cssmin.js.Jag testade själv att att slumpvis välja ut två webbplatser, Trygg-Hansa & Nordea, och [...]

  17. [...] your code files.  Each of the tools can be downloaded for free at the following developer sites: cssmin-js and jsmin.  For the purposes of this article, I have saved both files (cssmin.js and jsmin.exe) [...]

  18. thanks for this awesome program :)

  19. thanks PHPIED, it’s very usefull

  20. [...] pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan sepertiYUI Kompresor dan cssmin.js.   4. Letakan CSS (Stylesheet) di Atas Adakalanya kita tidak meletakan CSS di header, biasanya [...]

  21. Greetings. How can I run the script on http://garaj-bg.com/ ?
    It’s on a shared hosting, using Apache. I don’t understand much to tell you more.

  22. Really nice post, it’s very usefull

  23. [...] a page of your site. It can help reducing latency, enhancing compression and faster loading. Cssmin.js tool can help you on this [...]

  24. Sorry, not understand how to use it or implement.

  25. [...] Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js. [...]

  26. [...] Lakukan Kompresi CSS (Stylesheet) Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan sepertiYUI Kompresor dan cssmin.js. [...]

  27. [...] La compression d’un fichier css permet d’accélérer le téléchargement, l’analyse et le temps d’exécution Un compresseur css permet de réduire significativement la taille d’un fichier css. Par exemple csscompressor.com propose plusieurs options tel que compress color, compress font-weight, Remove unnecessary backslashes, Remove unnecessary semi-colons. On peut choisir le niveau de compression. Selon le niveau choisi, les lignes du fichiers seront soit regroupées sur une seule et même ligne, soit sur plusieurs.  http://www.phpied.com/cssmin-js/ [...]

  28. [...] La compression d’un fichier css permet d’accélérer le téléchargement, l’analyse et le temps d’exécution Un compresseur css permet de réduire significativement la taille d’un fichier css. Par exemple csscompressor.com propose plusieurs options tel que compress color, compress font-weight, Remove unnecessary backslashes, Remove unnecessary semi-colons. On peut choisir le niveau de compression. Selon le niveau choisi, les lignes du fichiers seront soit regroupées sur une seule et même ligne, soit sur plusieurs.  http://www.phpied.com/cssmin-js/ [...]

  29. [...] La compression d’un fichier css permet d’accélérer le téléchargement, l’analyse et le temps d’exécution Un compresseur css permet de réduire significativement la taille d’un fichier css. Par exemple csscompressor.com propose plusieurs options tel que compress color, compress font-weight, Remove unnecessary backslashes, Remove unnecessary semi-colons. On peut choisir le niveau de compression. Selon le niveau choisi, les lignes du fichiers seront soit regroupées sur une seule et même ligne, soit sur plusieurs.  http://www.phpied.com/cssmin-js/ [...]

  30. Really great stuff for optimizing my sites page load speed :)

  31. [...] cssmin.js is a JavaScript port of YUICompressor’s CSS minifier. This entry was posted in Dalla rete and tagged compression, minification, sviluppare. Bookmark the permalink. ← This is Responsive [...]

  32. [...] Several tools are freely available to minify JavaScript, including the YUI Compressor and cssmin.js. [...]

  33. nice post!

  34. [...] Diversi strumenti sono liberamente disponibili per la minimizzazione del codice, compreso il compressore YUI oppure cssmin.js. [...]

  35. Amazing post about compressing css. Thank you.

  36. Thank you for the best tool for compressing css files!

  37. [...] cssmin.js [...]

  38. Attention if you have Microsoft filters !

    For example:
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;

    The output will be:
    -ms-filter:”alpha(opacity=100)”;

    Cheers Markus

  39. Thank you for information. Really helped to improve page speed

  40. […] Several tools are freely available to minify CSS, including the YUI Compressor and cssmin.js. […]

  41. […] pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js.17. Letakan CSS (Stylesheet) di AtasAdakalanya kita tidak meletakan CSS di header, biasanya cara […]

  42. http://tools.w3clubs.com/cssmin/ – error Yahoo is not defined

  43. […] from the code in order to reduce it size and improves the load time.You can use the tool cssmin.js  | YUI Compressor or refer the website http://cssminifier.com/  to minify the CSS […]

  44. […] To minify CSS, you can try YUI Compressor and cssmin.js. […]

  45. […] compiladores, en javascript Closure Compiler, JSMin o YUI Compressor. En CSS: YUI Compressor and cssmin.js. Es probable que haya otros claramente, pero es cuestión de buscar y conseguir con el que se […]

  46. your article increase my blogging experiance about page speed for loading blog

  47. […] To minify CSS, you can try YUI Compressor and cssmin.js. […]

  48. […] To minify CSS, you can try YUI Compressor and cssmin.js. […]

  49. […] Compressor y cssmin.js. […]

  50. fine, I am blog wery speedy

  51. Hi,
    For those of us that are struggling to fix someone else’s clumbersome WP theme script: how do you do this? Copy the github code into a file called cssmin.js? Put that where? Not clear about the integration at all. What kind of file? PHP? Where do you put it? What do you name it?
    Sorry, but it’s not easy for everyone!
    Thanks,

  52. hi,thank you so much,

    but i try to fix it but some plugins did not work after doing that, maybe i do it wrong ,could you please help me to solve them?

    regards

  53. Does this really increase page load time that much? I tried the demo, but the code is impossible to look at once compressed. I suppose if you never wanted to touch your code again this would be fine, but as a designer I’m always tweaking and updating my designs. I’m interested in speeding up load times for viewer retention, but this seems like it would make editing files a nightmare. I pride myself with my clean code. It’s easy to look at and edit. I’m just playing Devil’s advocate. Is it really that much faster?

  54. Sorry, not understand how to use it or implement.

  55. […] Chrome’ın eklentisi ve internette online araçlar mevcuttur. CSS için YUI Compressor ve cssmin.js Javascript minimize etmek için Closure Compiler, JSMin, YUI […]

  56. […] compiladores, en javascript Closure Compiler, JSMin o YUI Compressor. En CSS: YUI Compressor and cssmin.js. Es probable que haya otros claramente, pero es cuestión de buscar y conseguir con el que se […]

  57. Thanks for the article, I have used this to good optimization for my site

  58. Thanks! YUI Compressor is good optimization for my site.

  59. I have a blog created by Blogspot (Blogger). After check pagespeed (google service), there’re some noties. Now, if i wanna compress this: http://platform.twitter.com/widgets.js, how i can setup in my blog template ? where to put it in my blog ?

Leave a Reply