在现代浏览器中,使用Unprefixed的CSS3渐变

分享于 

7分钟阅读

Web开发

  繁體

像HTML5和CSS3这样的网络标准不断变化。 最重要的变化之一是 W3C的CSS渐变建议,它允许开发人员在不使用供应商前缀的情况下,对 IE 10等现代浏览器进行编码。 在本文中,我将介绍旧的和新的语法和行为之间的一些差异,并提供了一些变化。 希望它能节省你一些时间,因为你支持很多浏览器。

注意:IE10 stills支持老的CSS渐变语法从 17 2011年02月 behind的W3C工作草案Draft供应商前缀 -ms-,因此你当前的代码不会中断。

键更改

如果你选择将你的CSS从供应商的前缀dojo梯度转移到无序的xquery渐变,则需要注意一些关键语法变化。 许多渐变生成器提供了 跨浏览器 标记,包括带unprefixed的渐变标记。 在许多情况下,unprefixed标记不再有效,根据的CSS图像值,W3C候选推荐插件,它覆盖了。 以下是你应该注意的更改。

线性和重复线性渐变

工作草稿候选推荐
direction 关键字顶部。底部。左和右关键字通过起始点描述直线的渐变 direction。介词"到"在关键字顶部。底部。左边和右侧关键字描述了通过它的终点的梯度 direction。
例子
-ms-linear-gradient(top,
 orange, black);
linear-gradient(to bottom,
 orange, black);
角计算角点关键字指定从角点到对角点绘制的渐变线。角关键字前面是"到",并指定从指定的象限开始的渐变线,并在相对象限中结束。 渐变线的中心点与在其余两个角点之间绘制的直线相交。
例子
-ms-linear-gradient(top left,
 fuchsia, yellow);
linear-gradient(to bottom
 right, fuchsia, yellow);
角度 direction0deg 是指向右侧的渐变线。 逆时针 direction的角度增大。0deg 是指向顶部的渐变线。 顺时针 direction的角度增加。 使用公式可以将旧角度转换为新角度
new = abs(old−450) mod
 360
例子
-ms-linear-gradient(200deg,
 lime, magenta);,
linear-gradient(250deg, lime,
 magenta);

径向渐变和重复径向渐变

工作草稿候选推荐
位置关键字或者长度描述渐变中心的位置。位置关键字或者长度前面是用来描述渐变中心位置的介词"at"。 如果存在渐变形状和大小,则现在指定该位置。
例子
-ms-radial-gradient(center,
 aqua, black);
radial-gradient(at center,
 aqua, black);
磅关键字渐变大小由以下六个关键字之一定义: farthest-cornerfarthest-sideclosest-cornerclosest-sidecontaincover渐变大小由以下四个关键字之一定义: farthest-cornerfarthest-sideclosest-cornerclosest-sidecontaincover 不再有效,分别对应于最接近的边和最远的角。
例子
-ms-radial-gradient(circle
 cover, lime, black);
radial-gradient(circle
 farthest-corner, lime, black);
大小和形状语法指定的径向渐变必须同时具有指定的水平和垂直半径长度。可以仅指定圆的半径长度来指定径向渐变。
例子
-ms-radial-gradient(center,
 50px 50px, red, black);
radial-gradient(circle 50px at
 center, red, black);

Background

CSS3渐变在 CSS图像值中定义,并替换了内容模块级别 3 W3C候选建议。 在 2009中,首先将渐变添加到规范中。 它们基于 webkit 引入的渐变,但是对语法的改进。 那时,webkit 有 -webkit-gradient()的实现。 CSS工作组迭代了这个特性,并改变了它的语法。 径向渐变和线性渐变将用单独的属性值 linear-gradient()radial-gradient() 指定。 在 Fast Fast的chrome Fast Firefox Working IE10 Platform平台预览 1,Platform平台预览和 opera Fast支持 2011年02月 工作草案的CSS梯度版本。

当工作草稿被密切检查时,提出了几个改变,并且经过了大量讨论以反映这些变化。 在 table 上面 中列出的主要变化,通过解决清晰和一致性问题改进旧规范。 例如在旧角度坐标系中,正角度以逆时针方式增大。 这与CSS转换和SVG转换相反,因为正角度旋转是以顺时针方式发生的。 随着规范的改变,描述CSS渐变的角度现在在其他CSS角度一致,并以顺时针方式增加。

在改变渐变语法的过程中,兼容性是一个可以识别的关注,尽管规范在工作阶段。 并非所有情况都是兼容的,但许多现有内容仍将继续工作。 默认值保持不变,因此它们的渲染将保持不变。 对于渐变行 direction,需要的"到"介词既增加了清晰度,又改变了有效语法。 使用旧语法的现有内容使用旧的语法无效,因这里将退回供应商的前缀版本。

更新Unprefixed的渐变

现在,jdo渐变是稳定的,我们鼓励你更新渐变标记,以正确的候选推荐的梯度语法。 Developers开发人员指南包含了unprefixed的语法的完整更新文档( )。 你还可以删除-ms-前缀渐变的实例,因为IE10支持unprefixed的版本。 如果使用角关键字或者角度来描述梯度 direction,则可以能需要验证渐变是否仍然呈现。

厂商在和其他现代浏览器中仍能使用渐变渐变,为unprefixed的渐变提供正确的支持,未来证明你的内容并帮助你节省时间。


bro  模式  浏览  Using  browsers  CSS3  
相关文章