Menu
For example
input{margin:0}body{margin:0;background:white} would be shorter written like this
input,body{margin:0}body{background:white} or this
input,body{margin:0}body{margin:0;padding:0} would be shorter written like this
input,body{margin:0}body{padding:0} Conclusion no such tool See the accepted answer.
A tip to the tool writers, you may want to consider gzip. Sometimes, leaving a few bytes on a second-rate optimization will be shorter in the end because gzip is essentially byte-level deduplication. If there are two identical sections, gzip will reference the earlier one. Ideally this would be considered in deciding if certain optimizations should be skipped some or all of the time, and what the order of the selectors and rules should be.
617
Why should you minify CSS? Website owners mainly choose to minify CSS to increase their page speed. The basic principle is simple: The less code there is to process, the less time it takes to load the web page. This allows you to delight website visitors with fast load times.
Minification, generally, is a great approach for optimizing websites. Minifying CSS files increases page load times and requires fewer resources by the browser to download. During development, comments, indentation, and other forms of formatting improve code readability and collaboration.
This can be done using CSSO.
Consider the following input:
input{margin:0}body{margin:0;background:white} CSSO output:
input,body{margin:0}body{background:#fff} (exactly what you are looking for)
But unfortunately, CSSO optimize this:
.dont-care { background-image: url("images/chart.png"); background-repeat: no-repeat; } To:
.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat} However, CSSTidy converts the above to the corresponding shorthand property:
.dont-care { background:url("images/chart.png") no-repeat; } Seven Four steps solution for optimizing CSS:
Here is the practice I follow:
all.css.all.min.css Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..
But what about old IE hacks?
If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.
For example:
.dont-care { background-image: url("images/chart.png"); *background-image: url("images/chart.jpg"); background-repeat: no-repeat; } CSSO output:
.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat} CSSTidy will ignore asterik(* hack used for IE6), and output:
.dont-care { background:url("images/chart.jpg") no-repeat; } You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the <head> tag of your HTML/masterpage/template/layout file eventually:
<!--[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]--> where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.
Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:
Consider that example:
.a{ background-attachment: fixed; } .b { background-image: url("images/chart.png"); background-repeat: no-repeat; } and if you'd have
<div class="a b"></div>— an element with both classes, you can't optimize the .b as you write, 'cause it would override thebackground-attachmentset in .a.
So, no, that's not a safe optimization.
96
Take a look at CSS Tidy, it can do some merging: http://csstidy.sourceforge.net/
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
