Safari 4浏览器的一些新特性

作者:网络 来源:佚名 更新时间:2009-06-14 12:38:30 点击:

在wwdc 2009上,apple发布了正式版的safari 4浏览器,正式版的safari 4放弃了仿chrome的tab方式,还原至3.0版本的界面。据称,wwdc上,serlet 严重的bs了一下微软的ie8浏览器,并称safari的javascript引擎是目前世界上最快的,根据他提供的测试数据,chrome 2的速度是ie8的5.3倍,而safari4的速度则是ie8的7.8倍

这些数据大多是官方的噱头,我们就先不管啦,看看safari4会对我们前端开发有哪些影响吧:

html 5

支持audio和video标签。

css

safari4对css的支持有较多改进,具体如下:

zoom

safari 4开始支持zoom属性。这一点儿的用法和效果和ie浏览器一直。不同的是,如果是缩放,safari会缩小到浏览器支持的最小字体,而ie会直接缩小到设置的大小。比如:

.zoomtest{font-size:12px; zoom:0.1}

safari只会缩小至9px字体大小,而ie会缩小至1.2px(肉眼已经看不清了)。

-webkit-animation

有一系列子属性组成:

  • -webkit-animation-name 为动画指定一个名称
  • -webkit-animation-duration 动画持续时间
  • -webkit-animation-timing-function 动画帧切换方式,也就是动画效果,大概有ease、linear、ease-in、ease-out、ease-in-out这几种。
  • -webkit-animation-delay 定义动画开始时间
  • -webkit-animation-iteration-count 动画重复次数
  • -webkit-animation-direction 动画方向,有两个属性:normal,正向播放; alternate,交替方向,第偶数次正向播放,第奇数次反向播放。

-webkit-mask

css遮罩/蒙板效果

  • -webkit-mask-attachment 两个值:fixed和scroll;
  • -webkit-mask-clip 元素边框的剪切效果 ;
  • -webkit-mask-position 用法类似background-position属性。
  • -webkit-mask-origin 规定-webkit-mask-position属性的锚记。有border、content、和padding三个属性。
  • -webkit-mask-image 元素的蒙板图片,值为图片路径;
  • -webkit-mask-repeat 重复性设定,
  • -webkit-mask-composite 混合样式。默认为border,也就是背景延伸到border区域。还可以设置为padding。

其它改进

safari4同时增加或增强了其它一些css属性支持,比如,background-position开始支持动画效果,这里就不再赘述。

可以看出,safari新增的这些css属性,并非w3c标准中的内容,不过这些webkit的私有属性,的确可以让我们开发出更好的网络应用。

wai-aria 角色

想必对wai-aria了解的人不是很多。wai-aria即w3c web accessibility initiative accessible rich internet applications,中文翻译为“无障碍富互联网应用程序”。同时w3c制定了wai-aria角色标准。google前不久宣布将大力支持wai-aria,而且其google reader的屏幕阅读功能即是通过wai-aria实现的。目前,firefox已经开始支持wai-aria,ie8部分支持。safari 4也开始支持wai-aria角色。查看safari 4对wai-aria的支持情况>>

值得注意的是,wai-aria貌似仅支持div和span标签,为了配合wai-aria,safari同时添加了html的一些支持属性,比如aria-checked/aria-level/aria-valuemax/aria-valuemin等。

下载safari :下载safari

ps:这个下载的按钮,是来自于safari下载的官方页面,细心的童鞋会发现,这个按钮的风格显然不是apple的风格了,更像firefox下载页面的那个绿色的按钮的风格。