[css] 举例说明CSS特性检测的方式有哪些?
原生的 @supports 的性能肯定是最好的,而且无需引入外部 javascript ,首推这个,但是无奈兼容问题,目前来看不是最好的选择。Modernizr 功能强大,兼容性好,但是需要引入外部 javascript,多一个 http 请求,如果只是进行几个特性检测,有点杀鸡用牛刀的感觉。
针对需要的特性检测,使用 javascript 实现一个简单的函数,再把上面用到的方法封装一下:/**用于简单的 CSS 特性检测@param [String] property 需要检测的 CSS 属性名@param [String] value 样式的具体属性值@return [Boolean] 是否通过检查
*/
(function(property, value) {
// 用于测试的元素,隐藏在页面上
var ele = document.createElement('div');// 只有一个参数的情况
if(arguments.length === 1) {
if(property in ele.style) {
return true;
}
// 两个参数的情况
}else if(arguments.length === 2){
ele.style[property] = value;if(ele.style[property]) {return true;}
}
ele = null;
return false;
})("font-size",'10px');
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题