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}即可。除了适用于字体颜色,还可适用于背景色。