JS判断浏览器是否支持某一个CSS3属性
1、引子
css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transition的animation-play-state,就只有部分浏览器支持。
2、检测方法
下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性:
- /**
- * 判断浏览器是否支持某一个CSS3属性
- * @param {String} 属性名称
- * @return {Boolean} true/false
- * @version 1.0
- * @author ydr.me
- * 2014年4月4日14:47:19
- */
- function supportCss3(style) {
- var prefix = ['webkit', 'Moz', 'ms', 'o'],
- i,
- humpString = [],
- htmlStyle = document.documentElement.style,
- _toHumb = function (string) {
- return string.replace(/-(\w)/g, function ($0, $1) {
- return $1.toUpperCase();
- });
- };
- for (i in prefix)
- humpString.push(_toHumb(prefix[i] + '-' + style));
- humpString.push(_toHumb(style));
- for (i in humpString)
- if (humpString[i] in htmlStyle) return true;
- return false;
- }
3、使用方法
- alert(supportCss3('animation-play-state'));
4、参考资料
http://note.rpsh.net/posts/2011/05/20/css
http://ecd.tencent.com/css3/guide.html
JS判断浏览器是否支持某一个CSS3属性的更多相关文章
- JS判断浏览器是否支持某一个CSS3属性的方法
var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "&quo ...
- 判断浏览器是否支持某一个CSS3属性
判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...
- 判断浏览器是否支持html5和css3属性
本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...
- js判断浏览器是否支持flash的方法
传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...
- js判断浏览器是否支持webGL
起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果. 在各种浏览器上运行都没问题,在IE上也做了兼容代码. 但是今天接电话,老板说你这网页在xp上不显示啊.IE上好使.goog ...
- JS判断浏览器是否支持触屏事件
var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...
- 判断浏览器是否支持某个css3属性的javascript方法
判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...
- document.documentElement.style判断浏览器是否支持Css3属性
1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...
- JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
随机推荐
- SqlServer优化博客网址
CareySon Sql Server MVP : http://www.cnblogs.com/CareySon/
- JavaWeb_Day10_学习笔记1_response(3、4、5、6、7、8、9)发送状态码、响应、重定向、定时刷新、禁用浏览器缓存、响应字节数据、快捷重定向方法、完成防盗链
今天学习重点: 1.response和request响应和应答分别学习: 请求响应流程图 response 1 response概述 response是Servlet.service方法 ...
- C++ Dialog Box Command IDs
#define IDOK 1 #define IDCANCEL 2 #define IDABORT 3 #define IDRETRY 4 #define IDIGNORE 5 #define IDY ...
- 100个iOS开发面试题汇总-王刚韧的技术博客
100个iOS开发面试题汇总 关于iOS开发面试,不管对于招聘和应聘来说,面试都是很重要的一个环节,特别对于开发者来说,面试中的技术问题环节不仅是企业对应聘者技能和积累的考察,也是一个开发者自我检验的 ...
- react native ios 开发,基础配置笔记。
一.获取硬件信息,使用react-native-device-info插件,配置说明: 1.首先需要安装组件:npm install react-native-device-info --save 2 ...
- Telerik柱状图(1)
此随笔主要是介绍一下Telerik的柱状图控件中的一种.效果图为: 此图展示了五个人每个季度的绩效成绩,用图形方式展示数据可以让用户更直观的去看数据,分析数据,不多说了,在这个分享一下我录得视频讲解, ...
- 09.13随笔2014年9月13日22:32:38,奶爸的英语教室,groovy
我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语到 奶爸的英语教室 ...
- OpenCV(5)-图像掩码操作(卷积)-锐化
锐化概念 图像平滑过程是去除噪声的过程.图像的主要能量在低频部分,而噪声主要集中在高频部分.图像的边缘信息主要也在高频部分,在平滑处理后,将会丢不部分边缘信息.因此需要使用锐化技术来增强边缘. 平滑处 ...
- Headfirst设计模式的C++实现——简单工厂模式(Simple Factory)之二
为了引出后续的工厂方法,把在简单工厂模式的基础上增加了新功能——加盟店 简而言之就是把原来的单一简单工厂(能生产cheese和greek两种pizza)细分成了纽约地区的和芝加哥地区的(每种地区都能生 ...
- IOS分类(Category)
分类(Category):拓展原有类的方法,而不影响原有类的子类,分类中不能创建成员变量. 分类的使用: 1.创建分类: 如图点击(File)选择(New)->(File).. 或者使用快捷键c ...