发表新帖
发表新帖

Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

后端 未结
关注
11 1776
暗喜
暗喜 2020-12-09 03:22

For example

input{margin:0}body{margin:0;background:white}

would be shorter written like this

input,body{margin:0}body{back
相关标签:
11条回答
  • 独厮守ぢ
    2020-12-09 03:56

    No, there is no such tool which optimizes to the level you ask (that I'm aware of at least), and I'm not sure you'd want to use it if there was. The reason is that it's not a trivial problem to find the smallest possible minified css code. For the trivial CSS you provided, it's easy. But imagine doing that on a 300kb block of CSS. It's not trivial. And is it worth wasting the CPU time generating it (it might be if you're caching the results, but it won't be if you're serving it dynamically)?

    And what's the gain? Saving a few percent at most on the transfer? Unless you have facebook level traffic, you're not going to save much bandwidth. And a few percent isn't going to impact your users much either (even over dial-up, transferring a few kb isn't that bad).

    Just use a standard compressor (minify, YUI Compressor, etc) and be done with it. Instead, worry about the low hanging fruit. The easy to fix problems...

    0 讨论(0)
  • 灰色年华
    2020-12-09 03:59

    Take a look at CSS Tidy, it can do some merging: http://csstidy.sourceforge.net/

    0 讨论(0)
  • 生来不讨喜
    2020-12-09 04:00

    Yes, there is. The YUI Compressor does this for you. I was wrong, the YUI Compressor is only a minifier, but indeed very useful. What and how they minify is presented here.

    This is a .jar package that you'll have to download and then run through the terminal, if you're on Unix or Linux (I don't know about Windows, so someone fill this gap!), with the following syntax:

    $ java -jar /path/to/yuicompressor-x.y.z.jar myfile.css -o myfile-min.css

    The -o option declares what file you wish to write your minified content to.

    0 讨论(0)
  • 长情又很酷
    2020-12-09 04:01

    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:

    1. Merge CSS files in all.css.
    2. Supply to CSSO input.
    3. Hit Minimize
    4. Paste the output in 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.


    Update

    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 the background-attachment set in .a.
    So, no, that's not a safe optimization.

    0 讨论(0)
  • 陌清茗
    2020-12-09 04:03

    If you use visual studio, you could install the Web Essentials extension. It has experimental support for cleaning and merging CSS rules, but not exactly like you subscribed. It, for one, creates more whitespace, but it does combine css tags, that have (partially) equal styles eg..

    0 讨论(0)
 看不清?
提交回复
热议问题