我应该使用Colorzilla为IE9生成的SVG渐变吗？ [英] Should I use the SVG gradients generated by Colorzilla for IE9?

问题描述

我找到了 http://www.colorzilla.com/gradient-editor/用于生成CSS3渐变。但是，有一件事，如果有人可以为我澄清，这将是巨大的。

I've found http://www.colorzilla.com/gradient-editor/ to be great for generating CSS3 gradients. However, there's one thing about it which would be great if someone could clarify for me.

据我所知，IE9不支持过滤器相同的方式IE6 -8，并且不支持CSS3渐变。 Colorzilla提供了一种非常聪明的方式强制IE9使用多停止渐变，通过在CSS中包括渐变的SVG数据，并且只对使用渐变的任何元素的IE9设置过滤器为none。下面是Colorzilla在勾选IE9支持复选框， background：url（data ... 行是为IE9添加的内容）行时生成的示例。

As I understand it, IE9 doesn't support the filters in the same way IE6-8 did, and doesn't support CSS3 gradients either. Colorzilla gives a very clever way of forcing IE9 to work with multi stop gradients, by including SVG data for the gradient in the CSS, and setting filter to none for IE9 only on any elements using the gradient. Below is an example of what Colorzilla generates if ticking the IE9 Support checkbox, the background: url(data ... line being what's added for IE9.

background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
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(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

我想知道是否最好将此代码包含在IE9中，回退？是否有任何情况下，一种方法可能比另一种更好？此外，这个SVG代码可能会影响使用CSS3属性的其他浏览器的性能，或者他们会忽略这行吗？

I'm wondering whether it's generally preferable to include this code for IE9, or rely on a regular image fallback instead? Is there any situations where one approach may be better than the other? Also, might this SVG code affect the performance of other browsers that use the CSS3 properties, or will they simply ignore this line?

Colorzilla似乎不解释包括这一点的代码，也许没有任何，它是正确的方法来做所有的时间？如果是这样，我很遗憾浪费人们的时间，但事实上它是一个可以选择的选项，使我认为可能有一些原因不使用它。

Colorzilla doesn't seem to explain the implications of including this bit of code, maybe there aren't any and it's the right way to do it all the time? If that's the case I'm sorry for wasting peoples time, but the fact it's a tickable option made me think there may be some reason not to use it.

推荐答案

IE9 SVG渐变效果很好，但IE7认为它是不安全的内容。因此，如果您使用SSL / HTTPS后面的样式来保护您的网站，IE7用户将会收到此网页包含安全和非安全项目。我把这个部分放入一个有条件的CSS文件中，以保持IE7不被吠叫。

The IE9 SVG gradient works well, but IE7 considers it to be unsecured content. So if you secure your site with this styling behind SSL/HTTPS, IE7 users will get the "This page contains both secure and nonsecure items." I pulled this section into a conditionally included CSS file to keep IE7 from barking.

这篇关于我应该使用Colorzilla为IE9生成的SVG渐变吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！