我试图找到一个资源,其中列出了与当前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),这是一个很难解决的问题,而不用担心供应商直接制造的东西。
答案 0 :(得分:2)
我发现CSS3Info非常有用:http://www.css3.info/preview/(已修改 - 抱歉,这就是我原本要发布的内容)。
编辑:嗯。我今天打零。我本可以发誓那个网站上的浏览器前缀还有更多......
答案 1 :(得分:2)
似乎没有详尽的清单,但根据Peter Beverloo的Compass,CSSPrefixer和this list,这是我可以凑到一起的。
-moz-background-clip
接受padding
和border
代替padding-box
和border-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;
。
-moz
,border-top-left-radius
等border-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
differences和this exhaustive rendering overview