简单几步,让你的网站兼容IE10(2)
解决CSS 兼容性问题
如果你经常使用CSS3 实现一些炫酷的效果,比如使用transition 实现让一个div 慢慢变宽的动效,你一定会为了兼容各个高级浏览器而这样写你的CSS 代码:
在Internet Explorer 10 上你也可以使用CSS3 实现这个效果了,只需要为#box 添加一行代码:
下面列举出几个典型的需要兼容 Internet Explorer 10 的CSS3 特性:
1. 3D 转换
Internet Explorer 10 和Windows 8 中使用JavaScript 的 Modern UI风格的应用引入了对CSS3 3D 转换的支持。Internet Explorer 9 增加了对CSS3 2D 转换的支持,使用JavaScript的 Modern UI风格的应用也同样支持它们。转换支持包括变换、旋转以及2D 和3D 空间中的元素拉伸,这些转换无需插件。
为了实现CSS 转换,需要使用-ms-transform 属性定义一个或多个转换函数。例如,以下代码段是一个选择器,它将一个2D 偏移函数和一个3D 旋转函数同时应用于一个div 元素。
这将得到以下图像:
关于CSS3 3D 转换、转换函数以及如何实现它们的更多信息,请参阅:“3-D 转换”
(http://go.microsoft.com/fwlink/p/?LinkId=238295)。
关于CSS3 3D 转换的实际操作,请访问IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:3D 转换”
(http://go.microsoft.com/fwlink/p/?LinkId=227893)。
2. 过渡
Internet Explorer 10 和使用JavaScript 的 Modern UI风格的应用支持CSS3 过渡特效。通过过渡特效,可以实现简单的动画效果,在一小段时间内平滑地改变CSS 的属性值。例如,在10秒钟内改变一个对象的大小和颜色。以前需要通过CSS 和JavaScript 的复杂组合操作实现的效果,现在只需几行CSS 代码即可完成。
关于CSS3 过渡的实际操作演示,请参见IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:过渡”
(http://go.microsoft.com/fwlink/p/?LinkId=227781)。以下是一个完整的简单CSS 过渡的示例,关于这个示例的更全面的解释,以及所有过渡属性,请参见“过渡”
(http://go.microsoft.com/fwlink/p/?LinkId=238302)。
在这个示例中,属性-ms-transform 被设置为“opacity 5s linear 1s”。借助于:active伪类,当单击(或触摸)并按住柠檬绿色的div,它将慢慢消失。特别地,它的opacity 属性在1 秒之后,会产生平滑的过渡效果(使用一个线性计时函数),在5 秒之内从完全不透明变为完全透明。请参见这个页面(http://go.microsoft.com/fwlink/p/?LinkId=227845)。
3. 动画
Internet Explorer 10 和使用JavaScript 的 Modern UI风格的应用支持CSS3 动画。利用CSS3动画,可以创建具有炫酷视觉效果的应用程序,实现平滑流畅的动画效果。只需3个基本步骤即可创建动画:指定动画属性,创建关键帧,将动 画应用于一个或多个元素。
动画类似于过渡,都是通过改变元素的位置、大小、颜色和透明度,并通过旋转、位伸、变换等操作来实现动画。像使用过渡效果一样,可以指定计时函数来控 制动画的前进速度。但是,利用CSS3 动画,我们还可以使用关键帧,它指定了动画的各个时间点的属性值。这样,我们不仅可以定义动画起始和结束的行为,而且还可以定义在开始和结束之间的行为。 动画还具有迭代和反转方向的功能,还可以暂停和恢复播放。
关于CSS3 动画的实际操作演示,请参见IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:动画”。
(http://go.microsoft.com/fwlink/p/?LinkId=228082)以下是一个简单的CSS 动画的完整示例。关于这个示例的更全面的解释,以及所有动画属性,请参见“动画”
(http://go.microsoft.com/fwlink/p/?LinkId=238298)。
这段标记代码的示例定义了两个动画属性:background-color 和-ms-transform。在动画的一个循环周期中,div 元素的背景颜色由柠檬色(初始颜色)变为紫色,然后又变为蓝色。div 元素还向右和向下分别移动20 像素和30 像素,然后还原。这个动画使用了ease 计时函数从开始过渡到中间点(关键帧为50%),然后使用ease-in 计时函数从中间点过渡到结束。动画重复了一次。观看这个动画(http://go.microsoft.com/fwlink/p/?LinkId=228195)(要求Internet Explorer 10)。
正如所期望的,CSS3 动画提供了无限的可能性,我们可以利用它来创建丰富、炫酷的动画。并且也可以帮助我们更好的优化网站,减少不必要的代码,更多内容可以参阅IE10兼容性白皮书,获得更多的帮助,下载地址:http://vdisk.weibo.com/s/bKgeq
关于如何在Internet Explorer 10 和使用JavaScript 的Metro 风格应用中创建CSS 动画的概述,以及CSS3 动画的实际使用示例,请参见“动画”(http://go.microsoft.com/fwlink/p/?LinkId=238298)。
关于CSS3 动画的操作演示,请访问IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:动画
(http://go.microsoft.com/fwlink/p/?LinkId=228082)”。
更多兼容Internet Explorer 10 的CSS3 特性的内容请查看Windows Internet Explorer10 Consumer Preview Guide for DevelopersCSS
(http://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx)
如果你经常使用CSS3 实现一些炫酷的效果,比如使用transition 实现让一个div 慢慢变宽的动效,你一定会为了兼容各个高级浏览器而这样写你的CSS 代码:
- #box {
- width: 200 px;
- height: 200 px;
- -moz-transition: al l2s ease 0s;
- -webkit-transition: all 2s ease 0s;
- -o-transition: all 2s ease 0s;
- }
- #box:hover {
- width: 800 px;
- }
在Internet Explorer 10 上你也可以使用CSS3 实现这个效果了,只需要为#box 添加一行代码:
- -ms-transition: all 2s ease 0s;
下面列举出几个典型的需要兼容 Internet Explorer 10 的CSS3 特性:
1. 3D 转换
Internet Explorer 10 和Windows 8 中使用JavaScript 的 Modern UI风格的应用引入了对CSS3 3D 转换的支持。Internet Explorer 9 增加了对CSS3 2D 转换的支持,使用JavaScript的 Modern UI风格的应用也同样支持它们。转换支持包括变换、旋转以及2D 和3D 空间中的元素拉伸,这些转换无需插件。
为了实现CSS 转换,需要使用-ms-transform 属性定义一个或多个转换函数。例如,以下代码段是一个选择器,它将一个2D 偏移函数和一个3D 旋转函数同时应用于一个div 元素。
- div {
- ...
- -ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg);
- }
这将得到以下图像:
关于CSS3 3D 转换、转换函数以及如何实现它们的更多信息,请参阅:“3-D 转换”
(http://go.microsoft.com/fwlink/p/?LinkId=238295)。
关于CSS3 3D 转换的实际操作,请访问IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:3D 转换”
(http://go.microsoft.com/fwlink/p/?LinkId=227893)。
2. 过渡
Internet Explorer 10 和使用JavaScript 的 Modern UI风格的应用支持CSS3 过渡特效。通过过渡特效,可以实现简单的动画效果,在一小段时间内平滑地改变CSS 的属性值。例如,在10秒钟内改变一个对象的大小和颜色。以前需要通过CSS 和JavaScript 的复杂组合操作实现的效果,现在只需几行CSS 代码即可完成。
关于CSS3 过渡的实际操作演示,请参见IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:过渡”
(http://go.microsoft.com/fwlink/p/?LinkId=227781)。以下是一个完整的简单CSS 过渡的示例,关于这个示例的更全面的解释,以及所有过渡属性,请参见“过渡”
(http://go.microsoft.com/fwlink/p/?LinkId=238302)。
- <!DOCTYPE html>
- <htmllang="en-us">
- <head>
- <style type="text/css">
- body {
- padding:10px;
- font:bold 20pt "Segoe UI";
- }
- div {
- width:250px;
- background-color:lime;
- padding:10px;
- opacity:1;
- -ms-transition:opacity 5s linear 1s;
- }
- div:active {
- opacity:0;
- }
- </style>
- </head>
- <body>
- <div>
- Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.
- Etiamsedipsumenim, vitae euismododio.Suspendisseeu.
- </div>
- </body>
- </html>
在这个示例中,属性-ms-transform 被设置为“opacity 5s linear 1s”。借助于:active伪类,当单击(或触摸)并按住柠檬绿色的div,它将慢慢消失。特别地,它的opacity 属性在1 秒之后,会产生平滑的过渡效果(使用一个线性计时函数),在5 秒之内从完全不透明变为完全透明。请参见这个页面(http://go.microsoft.com/fwlink/p/?LinkId=227845)。
- -ms-transform 属性是一个简写属性,这个声明也可以使用以下属性来替代:
- -ms-transition-property:opacity;
- -ms-transition-duration:5s;
- -ms-transition-timing-function:linear;
- -ms-transition-delay:1s;
3. 动画
Internet Explorer 10 和使用JavaScript 的 Modern UI风格的应用支持CSS3 动画。利用CSS3动画,可以创建具有炫酷视觉效果的应用程序,实现平滑流畅的动画效果。只需3个基本步骤即可创建动画:指定动画属性,创建关键帧,将动 画应用于一个或多个元素。
动画类似于过渡,都是通过改变元素的位置、大小、颜色和透明度,并通过旋转、位伸、变换等操作来实现动画。像使用过渡效果一样,可以指定计时函数来控 制动画的前进速度。但是,利用CSS3 动画,我们还可以使用关键帧,它指定了动画的各个时间点的属性值。这样,我们不仅可以定义动画起始和结束的行为,而且还可以定义在开始和结束之间的行为。 动画还具有迭代和反转方向的功能,还可以暂停和恢复播放。
关于CSS3 动画的实际操作演示,请参见IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:动画”。
(http://go.microsoft.com/fwlink/p/?LinkId=228082)以下是一个简单的CSS 动画的完整示例。关于这个示例的更全面的解释,以及所有动画属性,请参见“动画”
(http://go.microsoft.com/fwlink/p/?LinkId=238298)。
- <!DOCTYPE html>
- <htmllang="en-us">
- <head>
- <style type="text/css">
- body {
- padding: 10px;
- font-family: "Segoe UI";
- }
- div { /* 定义动画的 div */
- width: 250px;
- background-color: lime;
- padding: 10px;
- font-weight: bold;
- font-size: 20pt;
- }
- div:active { /* 定义动画参数 */
- -ms-animation-delay: 0s;
- -ms-animation-duration: 5s;
- -ms-animation-iteration-count: 2;
- 12
- -ms-animation-name: demo;
- }
- @-ms-keyframes demo { /* 定义动画的关键帧*/
- from {
- -ms-animation-timing-function: ease;
- }
- 50% { /* 使用ease 计时函数*/
- background-color: purple; /* 来移动和更改div 的颜色*/
- -ms-animation-timing-function: ease-in;
- -ms-transform: translate(20px,30px);
- }
- to {
- background-color: blue; /* 使用ease 计时函数将div 更改为蓝色*/
- }
- }
- </style>
- </head>
- <body>
- <h1>CSS3 Animations Example</h1>
- <p>Click and hold to start the animation. Internet Explorer 10 or later
- required.</p>
- <div>
- Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.
- Etiamsedipsumenim, vitae euismododio.Suspendisseeu.
- </div>
- </body>
- </html>
这段标记代码的示例定义了两个动画属性:background-color 和-ms-transform。在动画的一个循环周期中,div 元素的背景颜色由柠檬色(初始颜色)变为紫色,然后又变为蓝色。div 元素还向右和向下分别移动20 像素和30 像素,然后还原。这个动画使用了ease 计时函数从开始过渡到中间点(关键帧为50%),然后使用ease-in 计时函数从中间点过渡到结束。动画重复了一次。观看这个动画(http://go.microsoft.com/fwlink/p/?LinkId=228195)(要求Internet Explorer 10)。
正如所期望的,CSS3 动画提供了无限的可能性,我们可以利用它来创建丰富、炫酷的动画。并且也可以帮助我们更好的优化网站,减少不必要的代码,更多内容可以参阅IE10兼容性白皮书,获得更多的帮助,下载地址:http://vdisk.weibo.com/s/bKgeq
关于如何在Internet Explorer 10 和使用JavaScript 的Metro 风格应用中创建CSS 动画的概述,以及CSS3 动画的实际使用示例,请参见“动画”(http://go.microsoft.com/fwlink/p/?LinkId=238298)。
关于CSS3 动画的操作演示,请访问IE Test Drive
(http://go.microsoft.com/fwlink/p/?LinkID=196941)站点上的“动手实验:动画
(http://go.microsoft.com/fwlink/p/?LinkId=228082)”。
更多兼容Internet Explorer 10 的CSS3 特性的内容请查看Windows Internet Explorer10 Consumer Preview Guide for DevelopersCSS
(http://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx)
【简单几步,让你的网站兼容IE10(2)】相关文章
8. 10个 jQuery 插件用于在你的网站中实现数据可视化
9. 破解Siri协议,让你在Android设备或iPad上真正使用Siri
本文来源:https://www.51html5.com/a2937.html
﹝简单几步,让你的网站兼容IE10(2)﹞相关内容
- 美国智能机市场状况分析(2011年第三季度)
- FormatJS – 让你的 Web 应用程序国际化
- 使用CSS3特效让你的页面菜单变得更加有趣
- HTML5一周资讯回顾(11.28—12.02)
- 上周资讯精选(02.06—02.12)
- Zrender——轻量级Canvas类库,让绘图大不同!
- Win10预览版10041:IE11触控、HTML5新功能开启
- Chrome实验网站:各种新奇事物让你爱不释手
- 10个步骤让你成为高效的Web开发者
- Nibbler – 免费的网站测试和各项指标评分工具