1、CSS某個特性是否被支持
原理:在任意元素element.style對象上檢查該屬性是否存在。
代碼:
function testProperty(property){
var root=document.documentElement;
if(property in root.style){
root.classList.add(property.toLowerCase());
return true;
}
root.classList.add('no-'+property.toLowerCase());
return false;
}
2、CSS特性的某個屬性值是否被支持
原理:在解析CSS代碼時,瀏覽器總是丟掉自己無法識別的部分,故可以在任意元素上動態運用樣式,然后檢查該樣式是否生效。
代碼:
function testValue(id,property,value){
var temp=document.createElement('p'),
root=document.documentElement;
temp.style[property]=value;
if(temp.style[property]){
root.classList.add(id);
return true;
}
root.classList.add('no-'+id);
return false;
}
3、currentColor與inherit
- currentColor是CSS 中有史以來的第一個變量,很多CSS顏色屬性的初始值就是currentColor,這就是為什么當沒有給border、outline、text-shadow、box-shadow設置顏色時,這些屬性會自動取文本的顏色作為自身的顏色
- inherit可以用在任何css屬性中,它總是綁定到父元素的計算值(偽元素會取其宿主元素)。比如想讓表單元素(input select button)以及a元素字體顏色與頁面其他部分相同,只需:input,button,select,a{color:inherit}即可。除了適用于字體顏色,還可適用于背景色。