IE10中的无前缀CSS3渐变

Windows 8 Release Preview 中的 IE10 支持无前缀形式 CSS 渐变的 W3C 备选建议。IE10 还支持 2011 年 2 月 17 日发布的 W3C 工作草案中位于供应商前缀 -ms- 之后的较旧 CSS 渐变语法。本博文将介绍新旧语法和行为之间的差异,并对所发生的变更进行深入研究。

关键变更

如果您选择从带供应商前缀的 CSS3 渐变转为使用无前缀的 CSS3 渐变,则需要注意一些关键的语法变更。许多渐变生成器都提供了跨浏览器的标记,包括无前缀渐变的标记。在很多情况下,根据涵盖渐变的 CSS 映像值 W3C 备选建议,无前缀标记将不再有效。下面是您应注意到的变更。

线性渐变与重复线性渐变

工作草案 备选建议 方向关键字 top、bottom、left 和 right 关键字通过渐变线的起点来描述渐变线的方向。 介词“to”位于关键字 top、bottom、left 和 right 关键字之前,这此关键字通过渐变线的终点来描述渐变线的方向。 示例 -ms-linear-gradient(top, orange, black); linear-gradient(to bottom, orange, black);   角部计算 角部关键字指定两个对角之间的渐变线。 角部关键字位于“to”之后,并指定从特定象限开始且以对面象限为终点的渐变线。渐变线中点与另一对角线交叉。 示例 -ms-linear-gradient(top left, fuchsia, yellow); linear-gradient(to bottom right, fuchsia, yellow);   角度方向 0deg 是指向右侧的渐变线。角度值以逆时针方向增加。 0deg 是指向顶部的渐变线。角度值以顺时针方向增加。旧的角度可使用公式 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-corner、farthest-side、closest-corner、closest-side、contain 和 cover。 渐变尺寸通过以下四个关键字之一来定义:farthest-corner、farthest-side、closest-corner 和 closest-side。contain 和 cover 不再有效,它们分别对应于最近端和最远角。 示例 -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);

背景知识

CSS3 渐变在 CSS 映像值和替换内容模块级 3 的 W3C 备选建议中进行了定义。渐变内容将首先添加到 2009 年的渐变规范中。这些内容将基于 WebKit 中引入的渐变,但在语法方面进行了改进。当时,WebKit 实施了 -webkit-gradient()。CSS 工作组对功能进行了反复研究并改变了语法。径向渐变和线性渐变将使用独立的属性值 linear-gradient() 和 radial-gradient() 来指定。时光飞逝,几年之后所有的主要浏览器,例如 Chrome、Firefox、IE10 平台预览版 1 和 Opera,均引入了对 2011 年 2 月 17 日发布的 W3C 工作草案中所描述的 CSS 渐变版本的支持。

当仔细审查工作草案时,工作组还提出了许多更改建议,经过一番讨论之后,最终将这些更改实现到了规范中。上表中所描述的重要变更通过解决明确性和一致性问题使旧规范得到了改进。例如,在旧的角坐标系中,正角将以逆时针方向增加。与此相反,CSS 转换和 SVG 转换的正角将以顺时针方向增加。由于规范变更,描述 CSS 渐变的角度可以与其他所有 CSS 角度保持一致,同时正角将以顺时针方向增加。

在更改渐变语法的过程中,尽管规范正处于工作草案阶段,但兼容性依然引起了广泛的关注。并非所有的案例都可以互相兼容,但大量的现有内容均可继续运行。默认值将保持不变,从而它们的呈现不会发生任何改变。就渐变方向而言,要求的介词“to”不仅可以增强明确性,而且还可以更改有效语法。使用旧语法的无前缀渐变的现有内容将变得无效,因此需要使用带供应商前缀的版本。

更新您的无前缀渐变

目前 CSS3 渐变运行稳定,我们鼓励您更新您的渐变标记,以更正备选建议的无前缀渐变语法。Internet Explorer 10 开发人员指南中包含无前缀语法的全面更新文档。由于 IE10 支持无前缀的版本,您也可以删除带 -ms- 前缀的渐变实例。如果您正在使用角部关键字或角度来描述渐变方向,则您可能需要确认渐变依然可以按要求呈现。

在带供应商前缀的渐变依然可在 IE10 和其他浏览器中运行的同时,添加正确的无前缀渐变支持将使您的内容不会变得过时。

—Internet Explorer 项目经理 Jennifer Yu

时间: 2024-09-21 00:29:39

IE10中的无前缀CSS3渐变的相关文章

CSS3教程(1):CSS3 Gradient(CSS3渐变)

文章简介:CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿.从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3:

将IE10中默认的搜索引擎改为百度

微软在 Windows 8 最新版操作系统里面默认安装了最新版的 IE10 浏览器,其实 IE10 桌面版的外观与操作方式跟之前 IE9 都差不多,主要是一些内部的改进.同样将搜索框跟网址栏整合在一起,我们可以随时在网址栏上输入网址或输入关键字来搜索. 整体来说这样的设计相当方便,不过 IE10 内建的搜索引擎却是大家比较少用的 Bing,如果你不希望每次搜索时都得另外花时间开百度才能找东西,可以依照下面的方法在 IE10 的网址栏中加入百度搜索引擎,其实设定方法跟之前版本也都差不多,按一按就能

IE10中的Flexbox布局属性使用具体详解

文章简介:IE10中的Flexible Box("Flexbox")布局. 经过这一系列对Flexbox的介绍,我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解.话又说回来,虽然Flexbox功能强大(特别是弹性布局),但还是很多同学不敢使用,也不想尝试性使用.我想主要原因出于他的语法版本众多,浏览器对其兼容性等. 在<"老"的Flexbox和"新"的Flexbox>一文中,让我们了解了如何识别

javascript围观IE10中window对象的结构

我在<<javascript遍历DOM结构和对象结构>>一文中提供了一个遍历对象结构的函数,利用这个函数,展现IE10中window对象的结构(还真是不少啊-调试代码也在呢-)如下: 调试信息: [Object] window |--[function] addEventListener = function addEventListener() { [native code] } |--[function] alert = function alert() { [native c

IE10中“粘贴并转到”功能使用

在IE10中,微软对这项功能做了优化,让我们使用起来更加方便. 当我们复制一个网站以后,在其他浏览器中只要在地址栏中点右键,可以选择"粘贴并转到".IE9中则需要打开一个页面以后,然后再网页空白处单击右键,然后再选择"转到复制的地址".但是在新建选项卡常用页面中却没有这个功能,导致使用起来有一定的不便,毕竟我们大部分时候复制一个网址,都是想在新建选项卡中打开这个网页,而不是在某个已打开的网页中转到复制的地址. 在IE10中,我们就可以直接在新建选项卡常用网页中单击右

如何取消IE10中的Flash Player版本更新

  在Windows 8系统中为了保证浏览器的安全性和用户体验,微软在IE10中内置了最新的Adobe Flash Player插件. 打开Modern版IE10,可能觉得与桌面版IE10相比,除了界面更具Modern风格以外没多大区别,但实际还是有很多不同的.实际上Modern版IE10可以说是"安全模式",该环境下浏览网页,它不允许运行任何的IE组件,但是为了确保这个环境下可以更好的带来用户体验,微软最后特例批准了Flash player嵌入,这也就解答了为什么E10浏览器自带了F

如何删除保存在IE10中的账号密码信息

  当我们在上网时,如果经常会浏览某个网站,为了方便下次浏览,大部分人可能会选择记住密码.倘若你的电脑不只自己一人在用,建议你提前删除保留在 IE10 上的账号密码,以免网络账号被他人使用. 1.单击IE10右上角的"工具",选择"Internet 选项". 2.在"常规"选项卡下,点击"删除". 3.勾选"密码"后,点击"删除"即可. 删除成功后,将会立即清空之前自动保存在IE10上的

ie10-highcharts在IE10中的兼容性问题!

问题描述 highcharts在IE10中的兼容性问题! 在开发highcarts的柱形图过程中,由于X轴的值过多,本人想做成旋转45°显示,设置了rotation:-45:在IE89Fire fox 中都可以正常显示,但是在IE10中页面效果完全不正常,求高手解答???

jstack:将Process Explorer中看到的进程ID做16进制转换,到ThreadDump中加上0x 前缀即能找到对应线程(转)

原文链接:http://www.iteye.com/topic/1133941 症状: 使用Eclipse win 64位版本,indigo及kepler都重现了,使用tomcat 6.0.39,jdk1.6.u45及1.7u45均尝试了,也重现. 重现步骤很简单,使用debug模式启动时较容易出来,debug启动tomcat,(我的是webapp)然后在页面上随便点点即发现eclipse僵死,且任何从浏览器发出的请求都卡住不能被接收执行. 1.然后从任务管理器直接杀掉eclipse对应的jav