CSS渐变定义的顺序重要吗？

Question

我最近阅读了很多关于 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 官方的线性渐变在后，没关系。

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

Answer 1

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

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

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

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

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

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

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

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