Question

嗯，这是一个奇怪的问题。无论如何，如果我在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以正确的方式管理这类错误使它们工作，但现在我有点好奇。我是否正确地认为这种使用前缀（实际上不是后缀）的方式不是标准的，应该避免，尽管它们似乎在运行？

Answer 1

浏览器忽略了第二个和第三个规则，因为它们是无效的语法。它＆＃34;工作＆＃34;因为所有现代浏览器现在都支持box-shadow没有前缀，因此使用第一条规则。

在Chrome中，您可以通过查看devtools中的样式来查看此内容。缺少无效的规则，因为它们已被丢弃。

Firefox在＆＃34; CSS＆＃34;中报告以下错误标签：

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

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

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

Answer 2

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

Answer 3

前缀不标准。它们是尚未完全标准化的专有扩展。只有供应商知道他编程的内容及其工作方式，除非他记录了功能，否则它可能也是一个错误。

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

在属性名称后使用浏览器前缀

3 个答案: