供应商前缀css偏离当前标准

时间:2012-06-24 23:11:49

标签: css vendor-prefix

我试图找到一个资源,其中列出了与当前W3C标准不同的特定于浏览器的CSS属性实现。

例如,假设IE支持这样的内容:

.my-class {
  -ms-foo: fizz buzz;
}

但当提案成为候选推荐时,标准化的等价物是:

.my-class {
  foo: buzz fizz;
}

为了支持在CR之前发布的IE版本,我想写一下:

.my-class {
  -ms-foo: fizz buzz;
  foo: buzz fizz;
}
谷歌搜索这些变化的清单并没有非常富有成效,但是围绕供应商前缀嗤之以鼻,但并不是很多。#34;陷阱"名单。到目前为止,我发现的最好的变化是offhand mentions(在这种情况下,-webkit-border-radius),但那些很少记录实际的预期输入;他们倾向于给出一个破碎的例子。

我发现存在OK list of the prefixes(以及他们的标准状态),但不幸的是,它没有提供发现我感兴趣的更改所需的详细信息。< / p>

那么,是否存在任何此类列表?

我会采用部分列表,或者排除真正旧浏览器的部分(例如,并不真正关心IE6)。我也只关心3.1大浏览器(IE,Firefox,Webkit / Chrome / Safari和 Opera )。

我也关心W3C未解决过的问题(如appearance),这是一个很难解决的问题,而不用担心供应商直接制造的东西。

3 个答案:

答案 0 :(得分:2)

我发现CSS3Info非常有用:http://www.css3.info/preview/已修改 - 抱歉,这就是我原本要发布的内容)。

编辑:嗯。我今天打零。我本可以发誓那个网站上的浏览器前缀还有更多......

答案 1 :(得分:2)

似乎没有详尽的清单,但根据Peter Beverloo的CompassCSSPrefixerthis list,这是我可以凑到一起的。

背景剪辑

-moz-background-clip接受paddingborder代替padding-boxborder-box -webkit-background-clip的行为与-moz版本相同,但也接受content而不是content-box

背景来源

-moz-webkit版本接受的值与background-clip等值

相同

背景尺寸

-webkit-background-size重复单个值,因此-webkit-background-size: 10px等同于background-size: 10px 10px。与background-size:10px等效的前缀webkit为-webkit-background-size: 10px auto;

border-radius和朋友

-mozborder-top-left-radiusborder-bottom-left-radius等值为-moz-border-radius-topleft-moz-border-radius-bottomleft等等。

-webkit-border-radius与最终规范的不同之处在于它处理两个值的简写。 Webkit将其视为所有长格式版本都传递了两个值。

更具体地说:

-webkit-border-radius: 1px 2px相当于

-webkit-border-top-left-radius: 1px 2px;
-webkit-border-top-right-radius: 1px 2px;
-webkit-border-bottom-left-radius: 1px 2px;
-webkit-border-bottom-right-radius: 1px 2px;

border-radius: 1px 2px相当于

border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 2px;

我知道的唯一解决方法是将-webkit-border-radius的两个值大小写扩展为长格式,以匹配正确的border-radius

显示

如果您希望diplay:box在任何地方都可以使用,则需要使用前缀值,如下所示:

display:-webkit-box;
display:-moz-box;
display:box;

我不知道为什么会这样,因为所有特定于盒子模型的属性(如box-align)在这些浏览器中都有前缀版本。


请注意,这不包括任何当前不属于W3C文档的内容,例如appearance,即使多个浏览器都支持它。

答案 2 :(得分:1)

与标准的偏差并不罕见(即渲染怪癖),但与标准/建议符号的偏差相当罕见,这个资源应该可以解决问题:

caniuse.com通常会在资源部分提供良好的外部链接,例如:对于border-radius,它与-webkit differencesthis exhaustive rendering overview

相关联