哪些CSS Minifiers / Compressors不会省略时间值的单位?

时间:2013-04-27 01:53:22

标签: c# asp.net css minify

问题“Units on “0s” Transition in Firefox”的anser指出省略时间单位值是无效的。我的第一个但不是主要的问题是:

这是真的吗?在时间值中省略单位肯定无效吗?

据我所知W3C specification,关于长度值,它说

  

但是,对于零长度,单位标识符是可选的(...)。

其他类型的值不是这样,但与此同时表示无效。 “time - CSS | MDN”非常明确地说 无效

所以,只是为了确定:任何人都可以通过其他参考确认无效吗?

主要问题:哪些缩放器/压缩器省略时间值的单位?

事实上,即使它有效,Firefox也会忽略a { transition: all .5s 0 }

之类的声明

因此,使用压缩器/缩小器省略该单元对我来说似乎很重要。首先,Firefox将需要它,其次,如果 无效并且他们相应地更改了引擎,则将来可能需要所有浏览器。


注意:我正在使用ASP.net进行开发,并希望将Bundle Transformer用于System.Web.Optimization namesapce。我需要一台可以在那里使用的压缩机。使用IMinifier接口的内置实现或至少可用的库,以便我可以编写自己的接口实现。

我将使用至少具有API的缩放器/压缩器来提供答案,以便可以以编程方式使用它。我会接受一个具有良好压缩的minifier /压缩器的答案,该压缩器可以在Bundle Transformer中本地使用(这意味着不需要http请求)。


随着说:请随意提及任何 minifier,它不会忽略零时间值的单位,因为我觉得这对每个人都很有意思,而不仅仅是.net开发者。

目前我测试了以下工具:

  • YUI Compressor

    只是一个示例c#代码,所以.net的人知道我在说什么:

    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在不省略时间值单位的情况下缩小CSS。


    2014年12月9日更新:可悲的是,这不再是真的了。感谢Torin Finnemann commented在此问题上Online YUI Compressor。您可以使用此CSS Minifier Comparison自行测试。


    所以,如果有像

    这样的声明
    a {
        transition: all 0.5s 0s;
    }
    

    YUI Compressor将其缩小为

    a{transition:all .5s 0s}
    

    为什么不直接使用它?嗯,目前我是,但YUI的压缩级别不是很好(例如color: black变为color:black而不是color:#000)。 this blog post给出了概述。这就是为什么我在寻找可能的替代方案。

  • System.Web.Optimization

    的默认压缩器

    我不确定,但如果Microsoft Ajax是正确的,System.Web.Optimization拥有自己的压缩器实现。绝对不是Microsoft Ajax在我的测试中产生不同的输出。但是,它将上面的例子缩小为

    a{transition:all .5s 0}
    

    如您所见,它省略了单位,因此无法替代。

  • KryzhanovskyCssMinifier based on Sergey Kryzhanovsky's CSSO

    省略该单位。

  • {{3}}

    这是我测试的最后一个缩小器,所以我还没有那么多经验,但它看起来比其他更有希望。它足够聪明,可以缩小到以下内容(添加空格以便于阅读):

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

    如您所见,除了供应商前缀版本-moz-transition之外,它省略了该单元。因此,目前这适用于Mozilla浏览器。从版本14.0开始,Firefox接受transition的非供应商前缀版本,但仍然可以识别前缀版本。由于Firefox因缺少单位而忽略了默认语句,因此它使用带前缀的语句。

    好吧,正如我所说,这是最有前途的缩小器,但它不是一个坚如磐石的解决方案,因为Mozilla有朝一日可能会删除对Firefox中供应商前缀语句的支持。或者,正如我在本文开头所述,如果省略单位 无效,其他浏览器可以更新其引擎。

结论:问题仍然存在。如果你知道一个minifier /压缩器没有省略零时间值的单位,请分享它。

2 个答案:

答案 0 :(得分:2)

虽然它们不会缩小颜色,但以下两个在线缩小器保留了零时间值的单位。

http://cssminifier.com/

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

答案 1 :(得分:0)

Clean-CSS允许您指定是否要从零值中删除单位:https://github.com/jakubpawlowicz/clean-css#user-content-how-to-set-compatibility-mode

--compatibility *,-zeroUnits