结合元素破坏性的CSS minifiers是否存在？

StackOverflow https://stackoverflow.com/questions/7811395

  •  26-10-2019
  •  | 
  •  

题

我发现这个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;
}

我认为CSTIDY都做到了这两种事情。上面的网页正确吗？是否存在这些类型的缩小可能是一个问题的情况？

有帮助吗？

解决方案

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

这 未压缩 代码将产生一个居中的段落，其最高边距和5px底部边距。

如果您通过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”定义将覆盖“自动”类中定义的“自动”类的左右边缘。

因此，我们可以看到，通过结合样式定义，即使具有完全相同的选择器也会引起一些不错的问题。

您个人会像这样编写代码吗？也许也许不是。由于级联的各种“权重”规则，因此可以属于这种代码陷阱而无需意识到。

此外，鉴于在当今的网页中，多个CSS文件通常被合并到一个文件中，以减少下载量，因此很容易想象CSS压缩机通过重新编写多个样式表（可能是）（可能是由不同的人撰写），这些人共同添加到一个文件中。

实际上，我在网站上为此而写了CSS压缩机， 彩票帖子. 。每个网页都有许多样式表，支持各种jQuery和其他组件，CSS压缩机用于自动将所有这些样式表压缩为一个下载。该网站上的所有页面至少都有10种不同的样式纸合并在一起，并且大多数页面都具有更多。

例如，如果您查看CSS压缩机页面本身后面的代码，您会发现头部中的主要样式表看起来像这样：

<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路径的一部分，而不是在查询字符串中，因为某些代理服务器不查看查询字符串以确定是否应从缓存中检索页面。）

我希望这更好地解释了事情，并有助于那些希望提高页面性能的人！

-todd

更多信息：

要添加到上述内容，请想象一下我们以您的颜色示例，并将样式定义与相同的选择器结合在一起。

这是一些未压缩样式：

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}

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

方法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压缩机，该CSS压缩机将不同定义块的样式组合在一起，因为级联反应是一件非常脆弱的事情，并且非常容易打破级联反应。

其他提示

该页面有一个 关于“未使用的原因”的部分，描述了为什么不做这两件事.

最重要的是，我认为它不是要执行这些事情，因为它不是完整的CSS解析器/解释器，并且会开始使用CSS等条件块之类的BORK。

通过“破坏性”，我认为您的意思是“ CSS无法正常工作”。

结合长途规则，例如第一个示例，可以完全没有任何不良影响。

在没有媒体块或其他花哨的东西的普通旧样式表中，第二个示例也不会引起任何问题。

＃2的原因是风险，是因为更改规则的顺序或一起折叠规则而不考虑级联反应可能会导致断裂。

一些CSS压缩机可以按字母顺序重新排序规则，也可以通过选择器类型进行重新排序。这些是非常冒险的，因为周围的行动规则可能会破坏作者创造的级联行为。

像YUI压缩机这样的小型仪均不要做任何事情，选择了更安全的策略，例如删除空格，冗余的半彩色和零等。

随着更多包含媒体块和其他CSS3代码的CSS，许多当前的CSS压缩机可能根本无法正常工作。大多数人没有适当的词法来解析代码 - 他们使用上下文意识到逐字节（整理）或正则（其余的大部分）来处理代码。

选择压缩机时，我建议您找到可以在本地完成的事情，并带有良好的测试套件，以便您可以正确处理（并且未正确处理）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top