0

The anser to the question "Units on ā€œ0sā€ Transition in Firefox" points out that it is not valid to omit the unit of time values. My first but not main question would be:

Is this true? Is it for sure invalid to omit units in time values?

As far as I can see in the W3C specification, regarding length values it says

However, for zero lengths the unit identifier is optional (...).

Not so for values of other types, but at the same time it also does not say it is invalid. "time - CSS | MDN" very clearly says it is invalid.

So, just to be sure: Can anyone confirm it is invalid by additional references?

Main question: Which minifiers/compressors do not omit the unit of time values?

In fact, even if it were valid, Firefox does ignore declarations like a { transition: all .5s 0 }

So, using a compressor/minifier that does not omit the unit seems important to me. Firstly Firefox will need it, secondly it might be necessary for all browsers in future if it is invalid and they change their engines accordingly.


Note: I'm developing in ASP.net and want to use the Bundle Transformer for System.Web.Optimization namesapce. I need a compressor which I can use there. Either with a built-in implementation of the IMinifier interface or at least a usable library so I can write my own implementation of the interfaces.

I'll upvote answers with minifiers/compressors that at least have an API so it can be used programmatically. I'll accept the answer with a minifier/compressor with good compression that is locally usable with Bundle Transformer (which means no http request is needed).


With that said: Please feel free to mention any minifier that does not omit the unit of zero time values because I think this could be interesting for everyone, not just .net developers.

For now I tested the following tools:

  • YUI Compressor

    Just one example c# code so .net guys know what I'm talking about:

    public static void RegisterBundles(BundleCollection bundles)
    {
        IBundleTransform yuiTrans = new CssTransformer(new YuiCssMinifier());
        var cssBundle = new Bundle("~/content/css/default", yuiTrans)
                                  .IncludeDirectory("~/content/css", "*.css");
    }
    

    YUI minifies CSS without omiting the unit of time values.


    Update Dec 9 '14: Sadly, this is not true anymore. Thanks to Torin Finnemann who commented on this issue. You may test it yourself with this Online YUI Compressor.


    So if there is a declaration like

    a {
        transition: all 0.5s 0s;
    }
    

    the YUI Compressor minifies it to

    a{transition:all .5s 0s}
    

    Why not just using it? Well, currently I am, but YUI's compression level is not very good (e.g. color: black becomes color:black instead of color:#000). CSS Minifier Comparison gives an overview. That's why I'm searching for possible alternatives.

  • Default compressor of System.Web.Optimization

    I'm not sure, but if this blog post is right, System.Web.Optimization has it's own compressor implementation. It's definitly not Microsoft Ajax which produces different output in my tests. However, it minifies the above example to

    a{transition:all .5s 0}
    

    As you can see it omits the unit and therefore is not an alternative.

  • Microsoft Ajax

    Does omit the unit.

  • KryzhanovskyCssMinifier based on Sergey Kryzhanovsky's CSSO

    This was the last minifier I tested, so I don't have that much experience with it yet, but it looks much more promising than the others. It is smart enough to minify to the following (added whitespaces for readability):

    a{   -moz-transition:all .5s 0s;-o-transition:all .5s 0;
      -webkit-transition:all .5s 0 ;   transition:all .5s 0}
    

    As you can see, it omits the unit except for the vendor prefixed version -moz-transition. So, currently this does the job for Mozilla browsers. Firefox accepts the non-vendor-prefixed versions of transition since version 14.0 I think, but still recognize the prefixed versions. Since Firefox ignores the default statement because of the missing unit, it uses the prefixed one.

    Well, as I said this is the most promising minifier, but it is not a rock solid solution because Mozilla could someday remove the support for vendor prefixed statements in Firefox. Or, as I stated at the beginning of this post, if omiting the unit is invalid the other browsers could update their engines.

Conclusion: The question is still out there. If you know a minifier/compressor that does not omit the unit of zero time values, please share it.

Community
  • 1
  • 1
Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
  • 1
    From what I can see, the current version of YUI-compressor actually does remove the unit. It can be circumvented by specifying two decimal digits: .00s. https://github.com/yui/yuicompressor/issues/99 – Torin Finnemann Dec 08 '14 at 11:59

2 Answers2

2

Though they don't minify colors, the following two online minifiers retain the unit of zero time values.

http://cssminifier.com/

http://www.freeformatter.com/css-minifier.html

Jaaromy Zierse
  • 569
  • 4
  • 19
0

Clean-CSS allows you to specify whether you want to strip units from zero values or not: https://github.com/jakubpawlowicz/clean-css#user-content-how-to-set-compatibility-mode

--compatibility *,-zeroUnits
Drew Freyling
  • 1,258
  • 13
  • 14