也许这是一个明显的答案,但是
为什么地球上会浏览器决定创建自己的供应商前缀border-radius
之类的?
我的意思是:为什么我必须输入:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
是否因为每个平台都认为“我们很酷,我们会想出一种更好的方法来制作圆角”?键入三行似乎是完全和莫名其妙的冗余。
Answers:
这是因为这些功能是在规范到达最终发布阶段之前由供应商实施的。
供应商前缀确保与功能更改等没有冲突。
最初,供应商前缀的目的是允许浏览器制造商开始支持实验性CSS声明。
假设W3C工作组正在讨论网格声明(顺便说一句,这并不是一个坏主意)。让我们进一步说,有些人创建了规范草案,但其他人不同意某些细节。众所周知,这个过程可能需要一段时间。
让我们进一步说,作为试验,微软决定实施建议的网格。此时,Microsoft不能确定规范不会更改。因此,它没有向其CSS添加网格,而是添加了-ms-grid。
供应商前缀的意思是“这是Microsoft对正在进行的提议的解释。” 因此,如果网格的最终定义不同,Microsoft可以添加新的CSS属性网格而不会破坏依赖于-ms-grid的页面
来源。
就像这篇帖子一样,重要的是要提到的是,现在大多数供应商都知道这些前缀只是在创建不必要的重复代码,而您需要指定3种不同的CSS规则以使一种效果在所有浏览器中都能正常工作的情况是不受欢迎的。
如本词汇表所述,有关Mozilla在2016年5月3日对供应商前缀的看法,
浏览器供应商现在正试图摆脱实验性功能的供应商前缀。他们注意到,Web开发人员正在生产型Web站点上使用它们,这污染了全球空间,并使劣势者更难以表现良好。
例如,仅在几年前,要在一个必须写的盒子上设置一个圆角:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;
但是现在浏览器已经完全支持此功能,您实际上只需要标准化版本:
border-radius: 10px 5px;