梯度IE8 +所需的最低CSS [英] Minimum CSS required for gradients IE8+

问题描述

通常当我制作渐变效果时，我使用 colorzilla gradient edtior 。

默认情况下会为您生成CSS。下面是一个例子：

  background：＃1e5799; / *旧浏览器* / 
 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），色停（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; / *旧浏览器* / 
 background：linear-gradient（到底部，＃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可能会打破在给定的情况下或其他重要的浏览器，或者如果我可以减少更多。

虽然在重要性上并不重要，但它在大小上有很大的不同。

是 618字节，并且在使用10个渐变的工作表中，区别是 6 KB 。你可以看到，这可以加快（在缓存和今天的互联网速度之间它并不是最重要的因素），我仍然认为值得一看。

解决方案

是的，渐变语法是一团糟。好的，这里.... ....

• 首先过滤：IE9

  
  
  

  旧的IE 过滤器样式是基于ActiveX控件，并且是臭名昭着的，当它们结合其他浏览器功能时，这往往更糟。 IE9为大多数 filter 过的东西引入了标准的CSS语法;渐变是关于唯一没有做到的功能（当然是唯一重要的功能）。

  
  
  

  然而，对于渐变的ActiveX控件中的那些错误似乎更加明显在IE9比他们在IE8，很大程度上是因为它需要与更多的内置浏览器功能的干扰比以前的事实。例如，过滤器渐​​变不能用 border-radius 很好地播放。它完全杀死了圆角。还有一些其他bug你也需要注意过滤器样式。

  
  
  

  因为这个原因，很多渐变工具将为您提供一个完整的替代语法的IE9，涉及创建一个SVG渐变嵌入作为数据URL到CSS background 。它不漂亮，但它的工作效果优于过滤器为IE9，因为它避免了所有的过滤器错误。不幸的是，对于这种技术，如果你还需要支持IE8，那么仍然需要 filter 语法;但你不希望它在IE9中与SVG风格冲突，这意味着CSS黑客或条件评论或其他这样的.iness。是的，这一切都有点乱。

  
  
  

  这是为什么我诚实的首选解决方案是不支持IE8或更早的梯度。

  
  
  

  当我必须在旧IE中支持渐变，我使用 CSS3Pie ，这是一个polyfill脚本，添加了对标准CSS渐变的支持句法。这意味着我可以在所有IE版本中使用我的渐变，而不必担心使用过滤器。 （它使用VML在后台执行渐变，但是你不需要担心实现细节;只是最终结果）。




• -ms - 前缀：你说得对。这是没有必要的，除非你计划支持IE10的预发布版本（这当然是毫无意义的，因为任何使用它们的人都会升级到现在的IE10）。




• 两个 -webkit - 语法：这是因为Webkit在语法完成之前引入了这个特性。这就是生命在流血的边缘。尽管语法现在已标准化，但仍需要提供旧语法，因为在使用旧语法的版本上仍有大量的Safari和其他webkit用户。




• -o - 前缀：这是为Opera浏览器。只有在最新版本中，他们才需要使用前缀。任何不在最新版本上的用户都需要它。这是你的呼叫，有多少用户这可能会影响，因此，你是否可以删除。




• -moz- 前缀：您现在可以安全删除此。 Firefox自v16以来不需要前缀。在现在的版本上有非常少的用户很少。 （即使长期支持版本是FF17）。




• 纯色后备：保持这一点。确保你的网站看起来不错（它不必看起来惊人;只是好）。这是您针对旧浏览器上的用户的保险单。

p>是的，简单的答案是，你可以放弃很多它;

我写的代码如下：

  background：＃1e5799; / *旧浏览器* / 
背景：-webkit-gradient（线性，左上，左下，停止颜色（0％，＃1e5799），颜色停止（50％，＃2989d8） （51％，＃207cca），色停（100％，＃7db9e8））; / * Chrome，Safari4 + * / 
 background：-webkit-linear-gradient（top，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％）; / * Chrome10 +，Safari5.1 + * / 
 -pie-background：linear-gradient（底部，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％ / *带有css3Pie的IE6-9 * / 
背景：线性梯度（到底部，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％ / * W3C * / 
 behavior：url（/PIE.htc）; / *激活IE6-9中的css3Pie * / 
  

我删除了 -o - 和 -moz - 前缀，并用CSS3Pie代码替换过滤器显然需要将PIE.htc添加到您的网站，但只有IE会下载它）。

希望有帮助。

我还建议您查看 CanIUse网站的完整浏览器支持图表。

Usually when I make a gradient I use the colorzilla gradient edtior.

By default it generates the CSS for you. Here is an example:

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 */

While this is most certainly thorough, I'm curious if it is necessary. Through trial-and-error and process of elimination I have reduced it to the following 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 */

This reduced CSS still seems to function in Chrome, Firefox, IE8, IE9, and IE10, . However it's tough to say because using the Internet Explorer compatibility view doesn't always work very well (When I had IE9 my block worked, but after I upgraded to IE10 and used IE9 compatibility view it did not). I have also downloaded IETester and have had more success using this tool.

I was just curious if anyone could see if I was missing some vital CSS that might break in a given case or other important browser, or if maybe I could slim this down even more.

While not critical in importance, it makes quite the difference in size.

The difference between the two blocks is 618 bytes and in a sheet that uses 10 gradients, the difference is over 6 KB. As you can see this can add up fast (granted between caching and today's internet speeds it's not the most important factor) and I still think it's worth looking at.

解决方案

Yeah, gradient syntax is a mess. Okay, here goes....

• Firstly filter: IE9 is one you need to watch out for, especially if you're combining gradients with other CSS features.

  The old IE filter styles are based on ActiveX controls and are notoriously buggy, and this tends to be worse when they're combined with other browser features. IE9 introduced standard CSS syntax for most of the stuff that filter had previously been used for; gradients were about the only feature that didn't make it (certainly the only significant one).

  However those bugs in the ActiveX control for gradients seem to be even more obvious in IE9 than they were in IE8, largely due to the fact that it needs to interract with more built-in browser features than before. For example, filter gradients do not play nicely with border-radius. It completely kills the rounded corners. There are a number of other bugs you need to beware of too with filter styles.

  For this reason, many gradient tools will provide you with a whole alternative syntax for IE9, which involves creating an SVG gradient embedded as a data-url into the CSS background. It's not pretty but it does work better than filter for IE9, as it avoid all the filter bugs. Unfortunately for this technique, if you also need to support IE8, then the filter syntax is still needed; but you don't want it in IE9 to clash with the SVG style, which means CSS hacks or conditional comments or other such nastiness. Yep, it does all get a bit messy.

  Which is why my honest preferred solution is simply not to support gradients in IE8 or earlier. Too many issues, too much browser-specific code, and an ever-decreasing number of users to make it worth the effort.

  When I must support gradients in old IE, I use CSS3Pie, which is a polyfill script that adds support for the standard CSS gradient syntax. This means I can have my gradients in all IE versions without worrying about using a filter at all. (it uses VML to do the gradient behind the scenes, but you don't need to worry about the implementation details; just the end result).

• The -ms- prefix: You're right. This is unnecessary, unless you plan to support the pre-release versions of IE10 (which of course is pointless as anyone using them would have upgraded to the real IE10 by now).

• The two -webkit- syntaxes: This is because Webkit introduced the feature before the syntax had been finalised. Such is life on the bleeding edge. Although the syntax is now standardised, we still need to supply the old syntax because there are still a significant number of Safari and other webkit users on versions that use the old syntax. This will change over time, but it's not ready to be dropped yet.

• The -o- prefix: This is for the Opera browser. It is only in the latest release that they dropped the need for the prefix. Any users not on the latest release will need it. It's your call as to how many users this might affect and therefore whether you can drop it or not. I'd say it's probably okay, as Opera users tend to keep their browser up-to-date.

• The -moz- prefix: You can safely drop this now. Firefox hasn't needed the prefix since v16. There are very very few users on version earlier than that now. (even the Long Term Support version is FF17).

• The plain-colour fallback: Keep this of course. Make sure your site looks okay with it (it doesn't have to look amazing; just okay). This is your insurance policy for users on old browsers. And yes, that may include people who have eg an old Firefox version that requires a prefix that you're not supporting.

So yes, the short answer is that you can drop a lot of it; not quite as much as you wanted to, but certainly some of it.

I'd write your code as follows:

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 */

I've removed the -o- and -moz- prefixes and replaced the filter with CSS3Pie code (you'd obviously need to add PIE.htc to your site, but only IE will download it).

Hope that helps.

I also suggest looking at the CanIUse site for a full browser support chart.

这篇关于梯度IE8 +所需的最低CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！