使用 HTML5 cross-browser property 處理方式

HTML5 雖然已經正式發布了,但是主流的瀏覽器並沒有辦法第一時間實現所有功能

而在草案期間,各家瀏覽器都有針對各功能實作部分的功能,由於尚未成為 standard 所以會增加 prefix(或稱為 vendor)

常見的 prefix 有 Webkit、Moz、O、Ms 四種,根據不同的屬性可能有不同的大小寫

在 JavaScript 的部分,通常是 vendorProperty(駝峰式命名)

如果是 CSS 的部分,則通常會是 -vendor-property 的方式命名

因為各家瀏覽器支援程度不一,所以需要判斷目前瀏覽器到底支援哪種語法…

以下是 JavaScript 針對 vendor 常見的處理方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var vendors = ['Webkit', 'Moz', 'O']
$barTransformProperty = 'transform'
if (!($barTransformProperty in $barElement.style)) {
for (var i = 0; i < 3; i++) {
if (vendors[i] + 'Transform' in $barElement.style) {
$barTransformProperty = vendors[i] + 'Transform'
}
}
}
var transitionProperty = 'transition'
if (!(transitionProperty in $barElement.style)) {
for (var i = 0; i < 3; i++) {
if (vendors[i] + 'Transition' in $barElement.style) {
transitionProperty = '-' + vendors[i].toLowerCase() + '-' + transitionProperty
}
}
}

程式碼來源:instantclick

一開始定義 vendors 的 prefix,之後 $barTransformProperty 先定義最標準的屬性(沒有任何 prefix 的屬性)

如果不支援的話在開始對每一個 vendor 的 prefix 做判斷,如果該屬性是可以使用的,就把屬性完整名稱記錄起來

未來在使用的時候就可以直接使用儲存起來的名稱,而不用每次要設定時都要再判斷一次

當然我覺得 3 應該要用 vendors.length 並且用變數存起來會比較好,如下面的程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
// style 1
var vendors = ['Webkit', 'Moz', 'O'];
for(var max = vendors.length, i = 0; i < max; i++) {
// ...
}
// style 2
var vendors = ['Webkit', 'Moz', 'O'],
max = vendors.length,
i = 0;
for(; i < max; i++) {
// ...
}

這邊可能作者是先寫一個 MVP 就沒有處理這部分吧,我猜。