css3的標准已經發布了並添加了許多新特性,這對web前端的開發人員來說也很興奮。通過css3我們可以使頁面更加流程,美觀,代碼實現也不會很冗長。但由於並不是所有的浏覽器都支持css3的特性,在開發的過程中也會遇到很多問題。如果使用時加以判斷,如果浏覽器不支持這個屬性我們也可做及時處理。
大概思路:根據浏覽器對非法屬性值的處理多判斷,如果不支持此屬性就會將其值忽略。我們創建一個節點,首先判斷是否有你想判讀的屬性,再判斷是否有其值。
比較明顯的例子就是text-overflow這個屬性,text-overflow:clip是大部分浏覽器都支持的,而text-overflow:ellipsis則在firefox和10.6版本以下opera上工作不了
判斷代碼如下:
var element = document.createElement('div');
if('text-overflow' in element.style){
element.style['text-overflow'] = 'ellipsis';
return element.style['text-overflow'] === 'ellipsis';
}else{
return false;
}