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。< / p>

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

在某些情况下，这些可能发生冲突 - 例如，使用-ms-filter和标准transform:rotate()进行轮换将导致IE9执行两者，从而造成混乱东西的。 IE＆lt; = 8只知道-ms-filter而IE10根本不支持-ms-filter，所以它只受影响的IE9，但它是一个讨厌的因为没有办法避免它纯粹CSS。必须使用特定于浏览器的代码或CSS hacks或polyfill脚本。但这一点并不适用于渐变，因为IE9不支持CSS标准。

CSS梯度定义的顺序是否重要？

1 个答案: