Safari 4浏览器的一些新特性

在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 ：

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