0

嗯，这是一个奇怪的问题。无论如何，如果我在 css 属性名称之后使用浏览器前缀而不是将其放在之前会发生什么？例子：

 box-shadow: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset;
 box-shadow -moz-: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset;
 box-shadow -webkit-: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset;

这不仅是一个好奇的问题，我的朋友说他写了这行 css 并且它们有效。我回答他 Chrome 和 Firefox 以正确的方式管理此类错误，使其正常工作，但现在我有点好奇。我是否认为这种使用前缀（实际上不是后缀）的方式不是标准的，应该避免，尽管它们似乎可以运行？

4

3 回答 3

2

浏览器忽略第二条和第三条规则，因为它们是无效的语法。它“有效”是因为所有现代浏览器现在都支持box-shadow无前缀，因此使用第一条规则。

在 Chrome 中，您可以通过查看 devtools 中的样式来看到这一点；无效规则丢失，因为它们已被丢弃。

Firefox 在“CSS”选项卡中报告以下错误：

Expected ':' but found '-moz-'.  Declaration dropped. box-shadow.html:4:16
Expected ':' but found '-webkit-'.  Declaration dropped. box-shadow.html:5:1

在属性名称之后放置供应商前缀的概念没有在任何标准中定义，并且不受任何浏览器的支持。它是无效的纯粹和简单。

换句话说，您可以删除无效的第二条和第三条规则，一切都会以完全相同的方式进行。

于 2015-06-15T04:00:00.190 回答
0

前缀没有标准。它们是尚未完全标准化的专有扩展。只有供应商知道他编写了什么程序以及它是如何工作的，除非他记录了功能，否则它也可能是一个错误。

这就是为什么我不会使用浏览器供应商未记录的任何内容的原因。否则，您最终可能会在浏览器版本之间失去功能。

于 2013-08-05T00:35:28.303 回答
0

这不应该是一个标准。我会避免使用这个。我能想到它如何工作的唯一原因是他们解析它的方式。就像您可以混合背景样式属性的值一样。（就像你可以做的那样，background: url("pathtoimage") #FFF虽然它应该是background: #FFF url("pathtoimage")。）

于 2013-08-05T00:29:56.727 回答