技术开发 频道

浏览器全面支持HTML 5 欲挑战RIA三巨头

  另外,用户还可以增加阴影效果。阴影效果一直是图形化设计工具的重要一部分。现在用户通过使用CSS3可以轻松对文本和对象添加阴影效果,以下CSS定义是阴影效果示例代码之一:

.dropShadow {    
font-family: "Segoe UI", Tahoma, Geneva, Verdana;    
font-size: medium;    
color: #CC3300;    
text-shadow: 0.25em 0.25em 2px #999;  
}    

  现在普通的页面已经不能满足用户需求。添加可视化交互元素是必须的。为了解决这个问题,CSS 3包含了对动画的支持。以下HTML和CSS 3样式允许用户在屏幕上增加一个跳动的文本块:

<html>  
<head>  
<title>Bouncing Box example</title>  
<style type="text/css" media="screen">  
@-webkit-keyframes bounce
{      
from {        
left
: 0px;      
}      
to
{        
left
: 400px;      
}    
}    
.animation
{      
-webkit-animation-name
: bounce;      
-webkit-animation-duration
: 2s;      
-webkit-animation-iteration-count
: 4;    
-webkit-animation-direction
: alternate;      
position
: relative;      
left
: 0px;     }  
</style>  
</head>  
<body>  
<p class="animation">  
The text bounces back and forth  
</p>  
</body>
</html>

  动画的控制是通过使用样式表完成的。主要从两方面进行控制,首先是动画的类型;其次是动画的对象。

  目前该示例代码仅能运行在最新版Safari浏览器和谷歌Chrome浏览器中。  

  浏览器对HTML 5的支持情况

  目前用户使用的Web浏览器大体可化为两类:一是现代Web浏览器,其中包括Mozilla的火狐、苹果的Safari、谷歌的Chrome和Opera浏览器;二是微软的IE浏览器。

  火狐建建立在开源Ghecko浏览器引擎之上。同样,Safari和Chrome使用了开源WebKit浏览器引擎。这两类浏览器都使用了第三方开源项目Cairo来展现诸如CANVAS、CSS和HTML 5等可视化元素。这三个浏览器之所以能够快速采用新标准,与它们背后支持开源项目的公司有直接关系,而且这些公司有小部分工程师可以投身于WebKit等项目。令人惊讶的是,像Opera这样的小公司也能够与谷歌和苹果在支持标准方面相媲美。

  另一个阵营的代表是微软。自从上世界90年代以来,微软一直统治着Web世界。尽管其浏览器市场份额不断下滑,但依然有超过65%的网民选择使用IE浏览器。更令人吃惊的是,大约有26%用户依然在使用具有8年历史的IE6。问题是微软最新的浏览器版本IE 8不支持任何HTML 5功能,它不支持CANVAS、VIDEO或CSS 3。不过,微软已经开始改变其对HTML 5的态度,2009年夏天微软加入了对HTML 5标准的讨论,而且在2009年PDC大会上演示了一个支持HTML 5功能早期版IE9。

  除了桌面计算机之外,另外一个支持HTML 5的领域是手机设备。在苹果iPhone和谷歌Android的带领下,智能手机市场已经呈现爆炸式增长。这两类手机的Web浏览器都是使用WebKit的分支项目,因此完全支持HTML 5。

  很明显,HTML 5依然很长的路需要走。它将被越来越多地应用在手机、平板电脑和上网本中。PC市场可能将继续被IE浏览器所垄断,不过下一版本的IE将支持HTML 5。当然,如果你想提前体验HTML 5功能,你可以使用最新版的火狐、Chrome或Safari。

0
相关文章