HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 简单几步,让你的网站兼容IE10(2)

简单几步,让你的网站兼容IE10(2)

解决CSS 兼容性问题

  如果你经常使用CSS3 实现一些炫酷的效果,比如使用transition 实现让一个div 慢慢变宽的动效,你一定会为了兼容各个高级浏览器而这样写你的CSS 代码:

  1.   #box {

  2.   width: 200 px;

  3.   height: 200 px;

  4.   -moz-transition: al l2s ease 0s;

  5.   -webkit-transition: all 2s ease 0s;

  6.   -o-transition: all 2s ease 0s;

  7.   }

  8.   #box:hover {

  9.   width: 800 px;

  10.   }
复制代码

  在Internet Explorer 10 上你也可以使用CSS3 实现这个效果了,只需要为#box 添加一行代码:
  1. -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 元素。

  1. div {
  2. ...
  3. -ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg);
  4. }
复制代码

  这将得到以下图像:

QQ截图20121030092005.png

  关于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)。

  1. <!DOCTYPE html>
  2. <htmllang="en-us">
  3. <head>
  4. <style type="text/css">
  5. body {
  6. padding:10px;
  7. font:bold 20pt "Segoe UI";
  8. }
  9. div {
  10. width:250px;
  11. background-color:lime;
  12. padding:10px;
  13. opacity:1;
  14. -ms-transition:opacity 5s linear 1s;
  15. }
  16. div:active {
  17. opacity:0;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>
  23. Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.
  24. Etiamsedipsumenim, vitae euismododio.Suspendisseeu.
  25. </div>
  26. </body>
  27. </html>
复制代码
  在这个示例中,属性-ms-transform 被设置为“opacity 5s linear 1s”。借助于:active伪类,当单击(或触摸)并按住柠檬绿色的div,它将慢慢消失。特别地,它的opacity 属性在1 秒之后,会产生平滑的过渡效果(使用一个线性计时函数),在5 秒之内从完全不透明变为完全透明。请参见这个页面(http://go.microsoft.com/fwlink/p/?LinkId=227845)。

  1.   -ms-transform 属性是一个简写属性,这个声明也可以使用以下属性来替代:

  2.   -ms-transition-property:opacity;

  3.   -ms-transition-duration:5s;

  4.   -ms-transition-timing-function:linear;

  5.   -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)。

  1. <!DOCTYPE html>
  2. <htmllang="en-us">
  3. <head>
  4. <style type="text/css">
  5. body {
  6. padding: 10px;
  7. font-family: "Segoe UI";
  8. }
  9. div { /* 定义动画的 div */
  10. width: 250px;
  11. background-color: lime;
  12. padding: 10px;
  13. font-weight: bold;
  14. font-size: 20pt;
  15. }
  16. div:active { /* 定义动画参数 */
  17. -ms-animation-delay: 0s;
  18. -ms-animation-duration: 5s;
  19. -ms-animation-iteration-count: 2;
  20. 12
  21. -ms-animation-name: demo;
  22. }
  23. @-ms-keyframes demo { /* 定义动画的关键帧*/
  24. from {
  25. -ms-animation-timing-function: ease;
  26. }
  27. 50% { /* 使用ease 计时函数*/
  28. background-color: purple; /* 来移动和更改div 的颜色*/
  29. -ms-animation-timing-function: ease-in;
  30. -ms-transform: translate(20px,30px);
  31. }
  32. to {
  33. background-color: blue; /* 使用ease 计时函数将div 更改为蓝色*/
  34. }
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <h1>CSS3 Animations Example</h1>
  40. <p>Click and hold to start the animation. Internet Explorer 10 or later
  41. required.</p>
  42. <div>
  43. Duis ac leo sit ametlectustristiquepulvinarnecrutrum dolor.
  44. Etiamsedipsumenim, vitae euismododio.Suspendisseeu.
  45. </div>
  46. </body>
  47. </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)】相关文章

1. 简单几步,让你的网站兼容IE10(2)

2. 简单几步,让你的网站兼容IE10(1)

3. 简单几步,让你的网站兼容IE10(3)

4. IE10让你的网站拥有更多曝光

5. 《实用技巧》—让你的网站变成响应式的3个简单步骤

6. css3简单几步画一个乾坤图

7. 是时候让你的网站用上HTML5了

8. 10个 jQuery 插件用于在你的网站中实现数据可视化

9. 破解Siri协议,让你在Android设备或iPad上真正使用Siri

10. Voix.js:使用声音来控制和操纵你的网站

本文来源:https://www.51html5.com/a2937.html

点击展开全部

﹝简单几步,让你的网站兼容IE10(2)﹞相关内容

「简单几步,让你的网站兼容IE10(2)」相关专题

其它栏目

也许您还喜欢