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

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;

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

Answer 1

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

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

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

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

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

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