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下載頁面的那個綠色的按鈕的風格。