[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');

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 举例说明CSS特性检测的方式有哪些？相关推荐

[css] 举例说明css的基本语句构成是什么呢？
[css] 举例说明css的基本语句构成是什么呢? 一个选择器(例如:BODY,P等)和写在花括号里的声明,这些声明通常是由几组用分号分隔的属性和值组成. body{ color:red; } 个人简 ...
[css] 举例说明css有哪些简写的属性和属性值？
[css] 举例说明css有哪些简写的属性和属性值? border: solid 1px red;border-style: solid; border-width: 1px; border-colo ...
[css] 举例说明实现圆角的方式有哪些？
[css] 举例说明实现圆角的方式有哪些? 不使用 border-radius 的情况下只能用切图代替.此时非常有局限性,因为必须要定高定宽了.最常用的 border-radius 来实现. 个人简介 ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
[css] 举例说明微信端兼容问题有哪些？
[css] 举例说明微信端兼容问题有哪些? 说一个微信小程序的iPhoneX适配吧, 因为iPhoneX底部没有虚拟按键,底部的横线会出现遮挡这时候就要处理下: 大概思路就是获取到客户端设备,然后判断 ...
css hack方法,CSS Hack的基本原理和实现方式
本文向大家简单介绍一下CSS Hack的基本原理和实现方式,有人说CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题,CSS hac ...
css-07--1. HTML5 的新特性2. CSS 3 的新特性
文章目录 1. HTML5 的新特性 1.1 HTML5 新增的语义化标签 1.2 HTML5 新增的多媒体标签 1. 视频 2. 音频 3. 多媒体标签总结 1.3 HTML5 新增的 input ...
简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...

[css] 举例说明CSS特性检测的方式有哪些？

[css] 举例说明CSS特性检测的方式有哪些？

个人简介

主目录

[css] 举例说明CSS特性检测的方式有哪些？相关推荐

最新文章

热门文章