CSS渐变定义的顺序是否重要？

最近我一直在阅读很多关于CSS3渐变的内容，我很好奇供应商前缀定义的顺序是否重要。例如，我看到很多下面的：CSS渐变定义的顺序是否重要？

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-过滤器前缀，等等，等等

所以我想我的问题是：

是否定义的顺序有关系吗？
我应该使用-ms-过滤器前缀吗？

据我所知，只要正常的背景声明是第一个，W3C官方的线性梯度是最后一个，没关系。

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

来源

2013-06-05 HartleySan

前缀*的顺序可以*取决于属性/值。某些版本的Opera（Presto）将webkit的前缀属性替换为它们自己的前缀属性或标准属性，具体取决于Opera支持的属性。我读过Firefox手机也一样（无法找到源代码），但不是桌面版本。 – cimmanon

在处理前缀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 < = 8只知道-ms-filter，IE10根本不支持-ms-filter，所以只有IE9受到影响，但这是一个讨厌的问题，因为在纯CSS中没有办法避免它。一个人不得不求助于浏览器特定的代码或者CSS hack或者polyfill脚本。但是这一点不适用于渐变，因为IE9不支持CSS标准。

来源

2013-06-05 15:30:36 Spudley

在渐变的情况下，支持webkit前缀变得非常必要，因为许多作者也无法提供背景色。如果文本颜色设置为白色并且父元素为白色，则存在可用性问题。 – cimmanon

@cimmanon：是的。 CSS前缀...感叹。整个概念可以概括为“通往地狱之路的良好意愿”。 – Spudley

很好的答案，Spudley。非常感谢。另外，感谢您的补充评论，cimmanon。我猜测结论是，对于渐变，-webkit前缀应该首先出现，-webkit-gradient-before -webkit-linear-gradient（因为-webkit-gradient比较老），然后将最长的其他前缀组织起来最短。最后，过滤器和-ms-过滤器可以添加到与背景图片相关的任何地方，因为它们不会相互覆盖。谢谢。 – HartleySan

CSS渐变定义的顺序是否重要？

回答

相关问题