cssmin.js
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.
This entry was posted on Wednesday, September 23rd, 2009 and is filed under CSS, JavaScript, performance, yui. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
September 24th, 2009 at 12:02 am
I’m going to guess Isaac wrote it in PHP
September 24th, 2009 at 12:08 am
[...] First Tweet 15 minutes ago stoyanstefanov Stoyan Stefanov Highly Influential New blog post: cssmin.js http://www.phpied.com/cssmin-js/ view retweet [...]
September 24th, 2009 at 12:11 am
heh, the shortest contest ever
Greg, send me your mailing address to ssttoo at gmail
September 24th, 2009 at 12:18 pm
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 “);
September 24th, 2009 at 4:25 pm
Thanks P.Sorokin!
October 3rd, 2009 at 12:03 pm
[...] 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 [...]
February 14th, 2010 at 11:06 am
I need a perl version of this script, for server side optimization…
October 15th, 2010 at 4:39 pm
Any idea how to perform CSS minimization for ASP.NET C#?
November 29th, 2010 at 9:46 pm
[...] – 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 [...]
March 6th, 2011 at 9:12 pm
[...] 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. [...]
June 26th, 2011 at 2:53 am
[...] 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. [...]
June 28th, 2011 at 3:49 am
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
July 5th, 2011 at 10:13 am
All my css are called from my database with relevant links to the database how do I implement this tool?
August 31st, 2011 at 11:11 am
+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?
October 22nd, 2011 at 4:45 pm
Thanks – very usefull
November 3rd, 2011 at 10:33 am
[...] 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 [...]
November 25th, 2011 at 1:08 pm
[...] 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) [...]
December 15th, 2011 at 1:13 am
thanks for this awesome program
January 2nd, 2012 at 1:12 pm
thanks PHPIED, it’s very usefull
January 29th, 2012 at 12:45 am
[...] 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 [...]
February 3rd, 2012 at 9:02 am
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.
February 3rd, 2012 at 1:26 pm
Really nice post, it’s very usefull
March 19th, 2012 at 3:25 pm
[...] a page of your site. It can help reducing latency, enhancing compression and faster loading. Cssmin.js tool can help you on this [...]
May 24th, 2012 at 11:05 am
Sorry, not understand how to use it or implement.
June 14th, 2012 at 8:18 am
[...] 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. [...]
July 12th, 2012 at 7:20 am
[...] 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. [...]
July 14th, 2012 at 5:26 pm
[...] 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/ [...]
July 14th, 2012 at 5:28 pm
[...] 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/ [...]
July 15th, 2012 at 6:11 am
[...] 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/ [...]
July 28th, 2012 at 2:44 pm
Really great stuff for optimizing my sites page load speed
September 25th, 2012 at 5:18 am
[...] 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 [...]
October 31st, 2012 at 6:43 pm
[...] Several tools are freely available to minify JavaScript, including the YUI Compressor and cssmin.js. [...]
November 23rd, 2012 at 1:06 am
nice post!
January 16th, 2013 at 11:03 am
[...] Diversi strumenti sono liberamente disponibili per la minimizzazione del codice, compreso il compressore YUI oppure cssmin.js. [...]
February 21st, 2013 at 6:35 am
Amazing post about compressing css. Thank you.
March 18th, 2013 at 1:00 pm
Thank you for the best tool for compressing css files!
March 24th, 2013 at 6:12 pm
[...] cssmin.js [...]
April 19th, 2013 at 11:17 pm
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