css - CSS 速记效率

Question

background-color: #BADA55;和之间的效率有什么区别background: #BADA55;？我意识到这很简单，但是浏览器提取每个值的方式是否存在差异。另外，在一个稍微相关的注释上，在CSS3Please上，我注意到对于线性渐变，他们使用background-image. 有什么理由不简单地使用background？

Answer 1

该规范没有提到浏览器应该如何实现属性解析，特别是速记属性。它只是一个语法，而语法没有说明它的实现。我怀疑，浏览器如何解析速记声明完全取决于实现并且不容易回答（当然，除非你有源代码）。

事实上，我们有大量专门针对 IE 的 CSS hack 的主要原因是它对 CSS 的理解有多么不同（而且通常很差）。

有什么理由不简单地使用background？

答案就在你上一句话：

另外，在一个稍微相关的注释上，在CSS3Please上，我注意到对于线性渐变，他们使用background-image.

确实; CSS 渐变被视为与背景一起使用的图像，并记录在图像值模块中。他们应用的单个背景属性是background-image.

如果您使用速记属性仅指定颜色或仅指定渐变，它将使用其余值的初始值。如果使用风格的这种差异很重要，那么性能差异就完全不可能了，因为它不再是一个公平的比较。

在这个例子中，第二个background速记声明将完全覆盖第一个，留下纯色和没有渐变的初始值background-imageis none：

background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;

速记符号的目的是在单个声明中指定多个相关属性的值，因此为了同时应用渐变和颜色，应将其重写为：

background: radial-gradient(black, transparent) green;

Answer 2

你的第二个例子应该是：background: #BADA55;，但无论哪种方式都很好，不应该是你需要担心的事情。

如果您对浏览器如何解析 CSS 感到好奇，我可以告诉您：这取决于（曾经使用过 IE 吗？）。对于 Chrome，您可以在 GitHub 上查看源代码，并且可以在此处找到 Firefox 源代码。