css - 渐变IE8 +所需的最低CSS

Question

通常，当我进行渐变时，我会使用colorzilla gradient edtior。

默认情况下，它将为您生成CSS。这是一个例子：

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

尽管这肯定是彻底的，但我很好奇是否有必要。通过反复试验和消除过程，我将其简化为以下CSS：

background: #1e5799; /* Old browsers */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

这种简化的CSS似乎仍然可以在Chrome，Firefox，IE8，IE9和IE10中运行。但是，很难说出来，因为使用Internet Explorer兼容性视图并不总是能很好地工作（当我使用IE9时，我的代码块可以工作，但是在升级到IE10并使用IE9兼容性视图后，它却无法正常工作）。我还下载了IETester，并使用此工具获得了更大的成功。

我只是好奇是否有人能看到我是否错过了一些重要的CSS，这些CSS在给定的情况下或其他重要的浏览器中可能会损坏，或者我是否可以进一步缩小它的范围。

尽管重要性并不重要，但它的大小差异却很大。

两个块之间的差异为618 bytes，在使用10个渐变的工作表中，差异超过6 KB。如您所见，这可以快速累加（在缓存和当今的Internet速度之间可以保证，这不是最重要的因素），我仍然认为值得研究。

Answer 1

是的，渐变语法很烂。好吧，去...


首先filter：您需要提防IE9，尤其是当您将渐变与其他CSS功能结合在一起时。

以前的IE filter样式基于ActiveX控件，并且臭虫臭名昭著，并且当它们与其他浏览器功能结合使用时，这种情况会更糟。 IE9为filter以前使用过的大多数内容引入了标准CSS语法。渐变是唯一没有做到这一点的功能（当然是唯一重要的功能）。

但是，与IE8相比，ActiveX控件中用于渐变的错误在IE9中似乎更加明显，这主要是因为它需要与以前的更多内置浏览器功能进行交互。例如，filter渐变与border-radius不能很好地配合使用。它完全杀死了圆角。使用filter样式还需要注意许多其他错误。

因此，许多渐变工具将为您提供IE9的另一种语法，其中包括创建作为数据URL嵌入到CSS background中的SVG渐变。它虽然不漂亮，但对于IE9而言，它的效果比filter好，因为它避免了所有filter错误。不幸的是，对于这种技术，如果您还需要支持IE8，那么仍然需要filter语法；但是您不希望IE9中的代码与SVG样式冲突，这意味着CSS hack或有条件的注释或其他类似的东西。是的，这确实有点混乱。

这就是为什么我诚实的首选解决方案就是根本不支持IE8或更早版本中的渐变的原因。太多的问题，太多的特定于浏览器的代码以及越来越少的用户使它值得努力。

当我必须在旧IE中支持渐变时，可以使用CSS3Pie，这是一个polyfill脚本，它增加了对标准CSS渐变语法的支持。这意味着我可以在所有IE版本中使用渐变，而完全不必担心使用filter。 （它使用VML在幕后进行渐变，但是您无需担心实现细节；只需担心最终结果）。
-ms-前缀：对。除非您计划支持IE10的预发布版本（这毫无意义，因为使用它们的任何人现在都已经升级到了真正的IE10），否则这是没有必要的。
两种-webkit-语法：这是因为Webkit在完成语法之前引入了该功能。这就是生活的前沿。尽管现在语法已经标准化，但是我们仍然需要提供旧语法，因为在使用旧语法的版本上仍然有大量的Safari和其他Webkit用户。这将随着时间的流逝而改变，但尚未准备好将其删除。
-o-前缀：用于Opera浏览器。他们只是在最新版本中才删除了前缀。任何未使用最新版本的用户都将需要它。这是您的电话，它可能影响多少用户，以及是否可以删除它。我想说这可能还可以，因为Opera用户倾向于保持其浏览器为最新。
-moz-前缀：您现在可以放心地删除它。从v16开始，Firefox就不再需要前缀了。现在使用该版本的用户很少。 （甚至长期支持版本也为FF17）。
纯色后备广告：请务必保持此状态。确保您的网站看起来不错（不一定看起来令人惊叹；可以）。这是针对使用旧浏览器的用户的保险政策。是的，其中可能包括使用旧Firefox版本且需要您不支持的前缀的用户。


是的，简短的答案是您可以删除很多内容。并不是您想要的那么多，但是肯定有一些。

我将按照以下方式编写您的代码：

background: #1e5799; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
-pie-background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE6-9 with css3Pie */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
behavior: url(/PIE.htc); /* activate css3Pie in IE6-9 */

我删除了-o-和-moz-前缀，并用CSS3Pie代码替换了filter（您显然需要将PIE.htc添加到您的站点，但是只有IE可以下载它）。

希望能有所帮助。

我还建议查看CanIUse site以获取完整的浏览器支持图表。