3

通常当我制作渐变时，我使用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，或者我是否可以进一步缩小它。

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

两个块之间的差异是618 bytes，在使用 10 个渐变的工作表中，差异超过6 KB. 正如您所看到的，这可以快速加起来（在缓存和今天的互联网速度之间授予它不是最重要的因素），我仍然认为它值得一看。

4

2 回答 2

2

是的，梯度语法是一团糟。好的，这就去......

  • 首先filter：IE9 是您需要注意的，尤其是当您将渐变与其他 CSS 功能相结合时。

    旧的 IEfilter样式基于 ActiveX 控件，并且臭名昭著，当它们与其他浏览器功能结合使用时，情况往往会更糟。filterIE9 为大多数以前使用的东西引入了标准 CSS 语法；渐变是唯一没有做到的功能（当然是唯一重要的功能）。

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

    出于这个原因，许多渐变工具将为您提供 IE9 的完整替代语法，其中包括创建一个 SVG 渐变作为 data-url 嵌入到 CSSbackground中。它不是很漂亮，但它确实比filterIE9 工作得更好，因为它避免了所有的filter错误。不幸的是，对于这种技术，如果您还需要支持 IE8，那么filter仍然需要语法；但是您不希望它在 IE9 中与 SVG 样式发生冲突，这意味着 CSS hacks 或条件注释或其他此类讨厌的东西。是的，这一切都变得有点混乱。

    这就是为什么我诚实的首选解决方案根本不支持 IE8 或更早版本中的渐变。太多的问题、太多的特定于浏览器的代码，以及不断减少的用户数量，以至于值得付出努力。

    当我必须在旧 IE 中支持渐变时，我使用CSS3Pie，它是一个 polyfill 脚本，增加了对标准 CSS 渐变语法的支持。这意味着我可以在所有 IE 版本中使用我的渐变，而完全不用担心使用 a filter。（它使用 VML 来做幕后的渐变，但您不必担心实现细节；只需担心最终结果）。

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

  • 两种-webkit-语法：这是因为 Webkit 在语法最终确定之前引入了该功能。这就是处于最前沿的生活。尽管语法现在已经标准化，但我们仍然需要提供旧语法，因为仍有大量 Safari 和其他 webkit 用户在使用旧语法的版本上。这会随着时间的推移而改变，但它还没有准备好被丢弃。

  • 前缀：这-o-是用于 Opera 浏览器的。只有在最新版本中，他们才不再需要前缀。任何不在最新版本上的用户都需要它。您可以决定这可能会影响多少用户，因此您是否可以放弃它。我会说这可能没问题，因为 Opera 用户倾向于让他们的浏览器保持最新。

  • 前缀：您现在-moz-可以放心地删除它。Firefox 从 v16 开始就不需要前缀了。比现在更早的版本用户很少。（即使是长期支持版本也是 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-and-moz-前缀并filter用 CSS3Pie 代码替换了（你显然需要将 PIE.htc 添加到你的站点，但只有 IE 会下载它）。

希望有帮助。

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

于 2013-06-20T13:44:23.070 回答
1

在 Mac OS X 和 iOS 上，您仍然（截至今天）需要-webkit-Safari 的前缀。

对于旧版本的 Firefox 和 Chrome，您还需要带有-moz-- 和 -前缀的版本。-webkit-

“啊哈，”你说，“但是那些浏览器现在会自动更新！”</p>

“为什么是的，”我带着耐心的微笑回答，“但在旧的 Android 手机上却没有。”</p>

-ms-linear-gradient虽然从来没有被支持（IE 9 不支持 CSS 渐变，只是filter和 SVG 背景，而 IE 10 支持linear-gradient），所以你可以放弃它。（如果您能找到仍在使用 Opera 的人，您可以询问他们对渐变的看法。）

然而，正如我所评论的：一旦你的 CSS 被压缩，额外的渐变声明不会占用太多额外的空间。显然，您可以根据您想要支持的浏览器来平衡大小差异，但我建议您根据gzip 压缩后的大小以及（如果可能）根据您的受众（和目标受众）实际使用的浏览器来判断.

于 2013-06-19T22:02:32.637 回答