css - 组合元素的 CSS Minifier 是否具有破坏性？

Question

我找到了这个 CSS minifier ( http://www.lotterypost.com/css-compress.aspx )。该页面底部有一个部分标记为“CSS 压缩器故意不做什么？”有四件事，其中两件事我不明白为什么它们可能具有破坏性:

将单独的边距、填充或边框样式组合到一个属性中。

  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;
}

未压缩 代码将生成一个居中的段落，顶部边距为 10 像素，底部边距为 5 像素。

如果您通过 CSS 压缩器运行 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”的左右边距。

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

你个人会写这样的代码吗？也许或也许不是。由于级联的各种“权重”规则，有可能在不知不觉中陷入这种类型的代码陷阱。

此外，鉴于在当今的 Web 页面中，多个 CSS 文件经常合并为一个文件以减少下载量到达服务器，因此很容易想象 CSS 压缩器通过重写多个样式表(可能是由不同的人编写)，它们一起附加到一个文件中。

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

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

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

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

在该样式表调用中节省空间和时间的技术包括:

将多个样式表合并为一个文件/下载，只需将它们全部附加在一起 ​​

使用 CSS 压缩器压缩组合样式表(不会弄乱级联!)

使用不同的域名(lp.vg)进行样式表下载，提高了浏览器并行下载的能力

使用非常短的域名 (lp.vg)

GZip 压缩应用于 Web 服务器上的样式表

样式表的版本号嵌入到 URL (".../d11019.0/...") 中，这样如果在多个样式表中的任何一个中更改了任何样式，我都可以更改版本号和浏览器永远不会使用它缓存的版本。 (请注意，版本号应该是 URL 路径的一部分，而不是查询字符串，因为某些代理服务器不会查看查询字符串来确定是否应该从缓存中检索页面。)

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

-托德

更多信息:

为了补充上述内容，想象一下我们是否以您的颜色为例，并将样式定义与相同的选择器组合在一起。

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

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

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

div.normal p {
    color: black;
}

CSS 压缩器产生以下输出:

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

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

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

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

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

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

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

我无法想象任何开发人员会以这种方式编写代码的情况(两个样式定义具有完全相同的选择器，一个紧接着另一个)，所以我得出结论，编码它所需的工作量，以及压缩机中的一个额外故障点，从长远来看是不值得的。

坦率地说，我会非常关心一个 CSS 压缩器，它组合了来自不同定义块的样式，因为级联是一个非常脆弱的东西，而且非常容易打破级联。