供应商前缀的CSS与当前标准不符

8
我会尽力帮助您进行翻译。以下是需要翻译的内容:

我正在尝试找到一个资源,其中包含浏览器特定的CSS属性实现列表,这些属性与当前的W3C标准不同。

例如,假设IE支持以下内容:

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

但是当提案成为候选推荐时,标准化的等效物是:
.my-class {
  foo: buzz fizz;
}

为了支持 CR 之前发布的 IE 版本,我想写成这样:
.my-class {
  -ms-foo: fizz buzz;
  foo: buzz fizz;
}

通过谷歌搜索这些更改的列表并不是很有成效,虽然有很多人在困扰供应商前缀的问题,但没有太多的“坑点”列表。到目前为止,我找到的最好的就是提及变化(在那种情况下是 -webkit-border-radius)的偶尔提到,但这些很少记录实际预期的输入; 它们往往只是给出一个错误的示例。

我发现了一个前缀列表(以及它们的标准状态),但不幸的是它没有提供识别我感兴趣的更改所需的详细信息。

那么,是否存在这样的列表?

我可以接受部分列表或排除真正古老的浏览器的列表(例如,不太关心IE6)。我也只关心三个主要浏览器(IE,Firefox,Webkit / Chrome / Safari和Opera)。

我还关心W3C没有解决的事情(例如外观),这是一个艰难的问题,而不必担心那些厂商直接捏造的东西。


1
@BoltClock 42秒... - Tieson T.
1
实际上,与标准相差很大的版本是-moz-border-radius,而不是更接近标准的-webkit-border-radius - BoltClock
@BoltClock 好的,现在我有两个了... 想到要抓取大约30个浏览器版本并进行暴力破解真是令人恐惧。 - Kevin Montrose
如果有用的话,WebMatrix使用三个XML文件向IDE提供供应商前缀。如果您不介意查看XML,我可以将它们发布到Dropbox上。 - Tieson T.
@TiesonT。如果有关于这些值应该如何不同的信息,那会很有用;如果只是一些带前缀的属性列表,那就没什么用了。 - Kevin Montrose
显示剩余5条评论
3个回答

2
我发现CSS3Info很有用:http://www.css3.info/preview/编辑 - 抱歉,这是我最初想发布的内容)。 编辑:嗯。今天我一无所获。我敢打赌那个网站上有更多关于浏览器前缀的内容...

@KevinMontrose 对不起,我再次核对了一下,它只显示 box-shadowborder-radius 的前缀。请随意点踩我... :p - Tieson T.

1

标准的偏差并不罕见(例如渲染怪异),但是从标准/建议符号的偏差在我看来相当罕见,这个资源应该可以解决问题:

caniuse.com通常在资源部分提供良好的外部链接,例如对于border-radius,它链接到-webkit差异这个详尽的渲染概述


1

目前似乎没有详尽的列表,但根据CompassCSSPrefixer和Peter Beverloo在this list中列出的内容,我可以整理出以下信息。

background-clip

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

background-origin

-moz-webkit 版本接受与它们的 background-clip 等效项相同的值

background-size

-webkit-background-size 会将单个值复制一遍,因此 -webkit-background-size: 10px 等同于 background-size: 10px 10px。而 background-size:10px 的前缀 webkit 版本是 -webkit-background-size: 10px auto;

border-radius 和相关属性

-moz 版本的 border-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

显示

如果您想要display:box在任何地方都能工作,则需要使用类似以下的前缀值:

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

我不知道为什么会这样,因为所有与盒模型相关的属性(如box-align)在这些浏览器中都有前缀版本。
请注意,这不包括任何目前不属于 W3C 文档的内容,例如 外观,即使多个浏览器支持它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接