1

最近我读了很多关于 CSS3 渐变的文章，我很好奇供应商前缀定义的顺序是否重要。例如，我看到很多以下内容： 

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B),
                                                            to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#0A284B', endColorstr='#135887');

但是，我有时也会看到 CSS 渐变定义的示例，其中过滤器声明位于顶部，或者其他还包含 -ms-filter 前缀等的示例。

所以我想我的问题是：

  • 定义的顺序重要吗？
  • 我应该使用 -ms-filter 前缀吗？

据我所知，只要常规背景声明在前，W3C-official linear-gradient 在后，没关系。

我应该注意，我专注于上面的线性渐变，但我认为同样的问题也适用于径向渐变。

4

1 回答 1

2

在处理带前缀的 CSS 时，定义的正确答案总是将带前缀的版本放在首位，然后是不带前缀的版本。

所以-webkit-whateverand-moz-whatever必须在 plain old 之前whatever，并且必须指定普通的无前缀版本（即使任何浏览器都不支持它）。

这一点很重要，因为浏览器识别的最后一个定义的版本是使用的版本，如果浏览器理解它，最好使用无前缀的“标准”版本。

在无前缀版本之上，单个前缀版本（如-moz-,-webkit-等）的顺序通常并不重要——任何给定的浏览器都应该只识别其中一个，所以它们在什么其他版本无关紧要。一个常见的答案这是为了将它们按长度顺序排列，因为它看起来很整洁，但实际上并不重要。

我在上一段中强调了“应该”，因为在某些情况下，某些浏览器（例如 Opera）-webkit-即使有自己的前缀也实现了-o-前缀。这是因为人们没有使用-o-前缀，并且他们觉得他们失去了某些网站的功能，即使他们的浏览器确实支持它。出于这个原因，我宁愿先-webkit-定义，这样在这样做的情况下，浏览器自己的本机前缀可以优先。

关于旧 IE 使用 a filteror-ms-filter样式而不是标准的样式，这又无关紧要，因为如果 IE 使用过滤器，它不应该使用标准 CSS。

即使 IE 确实识别filter标准 CSS 和标准 CSS，顺序仍然无关紧要，因为它们被视为单独的样式。以特定顺序放置 CSS 的目的是让浏览器选择一个而不是另一个，但filter不会覆盖background，也不会被它覆盖，即使它们正在做同样的事情，所以它是无关紧要的。

在某些情况下，它们可能会发生冲突——例如，同时使用-ms-filter和标准进行旋转transform:rotate()将导致 IE9两者都做，从而使事情变得一团糟。IE<=8 只知道-ms-filter，而 IE10 根本不支持-ms-filter，所以只有 IE9 受到影响，但它很讨厌，因为在纯 CSS 中没有办法避免它。必须求助于特定于浏览器的代码或 CSS hack 或 polyfill 脚本。但这一点不适用于渐变，因为 IE9 不支持 CSS 标准。

于 2013-06-05T15:30:36.857 回答