渐变 IE8+ 所需的最低 CSS答案

【问题标题】：Minimum CSS required for gradients IE8+渐变 IE8+ 所需的最低 CSS
【发布时间】：2013-06-19 21:34:59
【问题描述】：

通常当我制作渐变时，我使用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。正如您所看到的，这可以快速加起来（在缓存和今天的互联网速度之间，这不是最重要的因素），我仍然认为它值得一看。

【问题讨论】：

“在使用 10 个渐变的表格中，差异超过 6 KB”——我敢打赌，经过 gzip 压缩后它会小得多。仅以您的示例代码为例，我得到 881 字节 vs. 268 没有 gzipping，341 字节 vs. 215 使用 gzipping。（在 Mac OS X 上，我在命令行上使用cat big.css | wc -c 测量常规尺寸，使用cat big.css | gzip -c | wc -c 测量压缩后的尺寸。）
gzip 在压缩包含大量重复的文本方面做得很好。在 gzip 压缩后，在文件中多次包含相同的字符串几乎是免费的，大小方面。因此，拥有多种渐变语法确实不会造成太大伤害。（如果你的 CSS 没有被 gzip 压缩，确保它 is 会比其他任何事情都更容易地减少文件大小。）
IETester 不相关。使用 browsershot 等在线工具进行测试。最好的办法是让 IE 在虚拟机上独立进行测试。
是否有一种高效的工具可以在构建时自动压缩 CSS 或类似的东西？我使用大量的 spritesheets 和大量的项目，每次手动执行都会很糟糕。
@Johannes：取决于您的构建过程。 Gzipping 本身并不复杂：正如您从我的评论中注意到的那样，我只是在 Mac OS X 命令行上使用了gzip 来执行此操作。请注意，Web 服务器需要提供带有 Content-Encoding:gzip 标头的文件，以便浏览器知道它已被 gzip 压缩。您可以配置例如Apache 在提供文件时自动压缩文件。参见例如stackoverflow.com/questions/12367858/…

标签： css cross-browser

【解决方案1】：

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

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

旧的 IE filter 样式基于 ActiveX 控件，并且臭名昭著，当它们与其他浏览器功能结合使用时，情况会变得更糟。 IE9 为 filter 以前使用的大部分内容引入了标准 CSS 语法；渐变是唯一没有成功的特性（当然是唯一重要的特性）。

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

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

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

当我必须在旧 IE 中支持渐变时，我使用CSS3Pie，这是一个添加对标准 CSS 渐变语法的支持的 polyfill 脚本。这意味着我可以在所有 IE 版本中使用我的渐变，而完全不用担心使用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- 和 -moz- 前缀，并用 CSS3Pie 代码替换了 filter（您显然需要将 PIE.htc 添加到您的站点，但只有 IE 会下载它）。

希望对您有所帮助。

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

【讨论】：

Re: Opera: 我认为仅在最新版本中删除前缀是不正确的。 Opera 表示在 Presto v2.10 之前需要它，该版本在 Opera v.11.6（一年多前）中引入。该浏览器具有自动更新功能，因此我不会担心旧版 Opera——除非您的目标市场使用 Opera Mini（在某些地方非常流行）或 Nintendo 浏览器。我不知道他们使用的是哪个版本的 Presto，但有迹象表明 Presto v.2.8 for Mini。
@Nix - 我没有 Opera 的旧副本可供测试，但我正在使用 CanIUse 的数据（请参阅上面的链接）。如果 Opera 自己另有说法，那么显然 CanIUse 是不正确的；有人需要做一些测试来确认它，然后在 CanIUse github 上发布更正。好消息是，如果你是对的，那么删除 -o- 前缀比我建议的更容易。好消息。
老实说，我没有看到关于 caniuse 的信息。我所看到的是，它在 12.1 中得到完全支持。我相信它的工作方式是有人简单地确认它在 12.1 中工作，但没有对早期版本进行特定测试。我想也许我可以找到旧版本的 Opera，并在需要时创建一个 Github 问题。
@Nix：点击their compatibility table左上角的“显示所有版本”。
@Spudley：我明白你对 IE 8 的意思，但如果你支持它，我会认为你会想要使用“将 IE 类添加到 <html> 元素使用无论如何，条件 cmets” 技巧，因此您可以使用 IE8 类来避免将 filter 应用于 IE 9。我会选择 filter 而不是单独的 .htc 文件，似乎活动部件更少。

【解决方案2】：

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

http://caniuse.com/#search=gradients

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

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

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

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

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

【讨论】：

非常有见地。很高兴提醒您浏览器不会在移动设备上自动更新，尽管我现在不需要担心这一点，因为我的应用程序不适用于移动设备并且与它不兼容。当我需要制作适合移动设备的版本时，请记住这一点。我之所以提到我做的浏览器是因为那些是客户使用的浏览器，但我仍然应该考虑 Safari。
@Johannes：是的，显然最坏的情况是不支持渐变的浏览器的用户会得到平坦的背景颜色，这并不是世界末日。可能有一些浏览器会在移动设备上自动更新，Apple 喜欢吹嘘使用最新版本的 iOS 用户比例很高。
“如果你能找到仍在使用 Opera 的人，你可以问问他们对渐变的看法。” Opera使用标准；它不需要 -o 前缀。
@Nix：哪个版本？ caniuse.com 说在 12.1 之前它需要 -o- 前缀。
@PaulD.Waite 我在查看Opera product specs，它指出a) 直到 Presto 2.10，Opera 中的渐变使用 -o- 供应商前缀。 和b) Opera Desktop 11.60 在 Presto 2.10 渲染引擎上运行。。但是，我发现很多其他消息来源说它确实直到 Opera 12.1 才被删除。要么我读错了规格，规格本身不正确，要么其他人引用了不正确的来源。