CSS Minifiers是否结合了具有破坏性的元素？

Question

我发现了这个CSS缩小器(http://www.lotterypost.com/css-compress.aspx).该页面底部有一个标题为"CSS Compressor故意不做什么？"的部分.有四件事,其中两件我无法理解为什么它们可能具有破坏性:

将单个边距,填充或边框样式组合到单个属性中.

  margin-top: 10px; 
  margin-right: 0; 
  margin-bottom: 8px;
  margin-left: 30px;

变

  margin: 10px 0 8px 30px;

并为不同样式块中指定的相同元素组合样式.

#element {
   margin: 0;
}

#element {
   color: #000000;
}

变

#element {
   margin: 0;
   color: #000000;
}

我认为CSSTidy可以做到这两点.上面的网页是否正确？是否存在这些类型的缩小可能成为问题的情况？

Answer 1

我是CSS压缩器的开发者,这是这个问题的主题(http://www.lotterypost.com/css-compress.aspx),所以我将详细说明压缩器如何打破CSS如果工具积极地重写它,则级联.

在样式表中有很多方法可以定位元素,并且由于CSS压缩器对页面的DOM结构,类,ID等没有深入的了解,因此压缩器无法知道跨越括号的优化定义是否会破裂.

例如,一个简单的HTML结构:

<div class="normal centered">
    <p>Hello world.</p>
</div>

还有一些CSS:

div.normal p {
    margin: 10px 0 10px 0;
}

div.centered p {
    margin: 10px auto;
}

div.normal p {
    margin-bottom: 5px;
}

的未压缩的代码将产生具有10px的上边距和5像素底部余量的居中的段落.

如果您通过CSS Compressor运行CSS样式,您将获得以下代码,该代码维护原始未压缩样式的顺序和级联.

div.normal p{margin:10px 0}div.centered p{margin:10px auto}div.normal p{margin-bottom:5px}

假设您希望通过组合两个div.normal p定义的边距来进一步压缩样式.它们都具有完全相同的选择器,并且它们似乎冗余地设置了底部边距.

可以通过两种方式组合边距:您可以将两个边距定义组合到第一个(顶部)div.normal p样式中,也可以将它们组合到最后一个(底部)样式中.让我们尝试两种方式.

如果将边距组合成第一个(顶部)div.normal p样式,则可以得到:

div.normal p{margin:10px 0 5px}div.centered p{margin:10px auto}

将边距组合在一起的结果将导致底部边距被错误地设置为10px,因为"居中"类将覆盖底部边距(因为"居中"样式定义现在出现在级联中的后期).

如果将边距组合到最后(底部)div.normal p样式中,则得到以下结果:

div.centered p{margin:10px auto}div.normal p{margin:10px 0 5px}

以这种方式组合边距的结果将导致段落不再显示为居中,因为底部"p"定义将覆盖"居中"类中定义的"auto"的左右边距.

所以我们可以看到,通过组合样式定义,即使具有完全相同的选择器也可能导致一些非常糟糕的问题.

你个人会写这样的代码吗？也许或许没有.由于级联的各种"权重"规则,有可能在没有意识到的情况下陷入这种类型的代码陷阱.

此外,鉴于在今天的网页中,多个CSS文件经常组合成一个文件以便以较少的下载次数到达服务器,很容易想象CSS Compressor通过重写多个样式表来皇家搞砸级联(可能由不同的人写的)被附加到一个文件中.

事实上,我在我的网站Lottery Post上为这个场景编写了CSS Compressor .每个Web页面都有许多支持各种jQuery和其他组件的样式表,CSS Compressor用于自动将所有这些样式表压缩成一个单独的下载.网站上的所有页面都至少有10种不同的样式表组合在一起,而且大多数页面都有更多.

例如,如果您查看CSS Compressor页面本身后面的代码,您会发现头部中的主样式表如下所示:

<link rel="stylesheet" href="http://lp.vg/css/d11019.0/j2HKnp0oKDOVoos8SA3Bpy3UHd7cAuftiXRBTKCt95r9plCnvTtBMU2BY2PoOQDEUlKCgDn83h16Tv4jbcCeZ(gupKbOQ9ko(TcspLAluwgBqrAjEhOyXvkhqHA(h5WFDypZDK2TIr(xEXVZtX7UANdFp6n1xfnxqIMR8awqGE)vrwUgY2hrCGNNTt1xV7R1LtCSfF46qdH1YQr2iA38r1SQjAgHze(9" />

URL中的gobbledeegook实际上是一个加密的字符串,其中包含要在服务器上组合的所有样式表.服务器压缩它们并缓存结果.

这一样式表调用的节省空间和时间的技术包括:

• 将许多样式表合并到一个文件/下载中,只需将它们全部附加在一起即可
• 使用CSS Compressor压缩组合样式表(不会弄乱级联!)
• 使用不同的域名(lp.vg)进行样式表下载,这提高了浏览器并行下载的能力
• 使用非常短的域名(lp.vg)
• GZip压缩应用于Web服务器上的样式表
• 样式表的版本号嵌入到URL(".../d11019.0/...")中,这样如果在任何多个样式表中更改了任何样式,我可以更改版本号和浏览器永远不会使用它已缓存的版本.(请注意,版本号应该是URL路径的一部分,而不是查询字符串中的一部分,因为某些代理服务器不查看查询字符串以确定是否应从缓存中检索页面.)

我希望这能更好地解释事情,对那些希望提高页面性能的人有所帮助!

-Todd

更多信息:

要添加上述内容,请想象我们是否采用您的颜色示例,并将样式定义与相同的选择器组合在一起.

以下是一些未压缩的样式:

div.normal p {
    margin: 10px 0 10px 0;
}

div.centered p {
    margin: 10px auto;
    color: blue;
}

div.normal p {
    color: black;
}

CSS Compressor生成以下输出:

div.normal p{margin:10px 0}div.centered p{margin:10px auto;color:blue}div.normal p{color:#000}

如果我们要应用具有相同选择器的样式定义的积极组合,我们将获得以下代码.

方法1,将两者结合到第一个定义中,会错误地使文本颜色为蓝色:

div.normal p{margin:10px 0;color:#000}div.centered p{margin:10px auto;color:blue}

方法2,将两者结合到第二个定义中,会错误地使文本左对齐:

div.centered p{margin:10px auto;color:blue}div.normal p{margin:10px 0;color:#000}

将样式定义与相同选择器组合在一起的唯一时间是100%无错误是当定义一个接一个地直接出现时,但在其他每种情况下,这种技术都有可能破坏级联的样式.

我无法想象任何开发人员会以这种方式编写代码的情况(两个样式定义具有完全相同的选择器,一个紧接着另一个),因此我得出结论,编码所需的工作量以及可能性压缩机的另一个故障点,远远不值得.

坦率地说,我会非常关注一个CSS压缩器,它结合了不同定义块的样式,因为级联是一个非常脆弱的东西,并且很容易打破级联.