测试浏览器是否支持某个CSS属性
花了几个小时写了个API,为了兼容多种用法和测试花了不少时间,求鞭打、嘲笑和建议。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body> </body>
<script>
//Cound use four types of propertyName,like:
//'animation','-webkit-animation','webkit-animation','webkitAnimation'
function isSupportCSS(propertyName) {
var div = document.createElement('div'),
getComputedStyle = window.getComputedStyle || (document.defaultView && document.defaultView.getComputedStyle),
result,
body = document.body || document.getElementsByTagName('body')[0],
currentStyle,
//to replace propertyName from dash style to camel case
rcamelCase = /-([\da-z])/gi,
//to see the function expression toCamelCase。we need the first character of propertyName is Uppercase,like 'MozAnimation',when the browser is FF.
//so we need to keep the first dash when the browser is FF.
rprefix = /^-(?!moz)/i,
toCamelCase = function (string) {
return string.replace(rprefix,'').replace(rcamelCase,function (all,letter) { return letter.toUpperCase();});
},
prefixArray = ['webkit-','moz-','ms-'],
i = prefixArray.length,
rhasPrefix = /^-?(webkit|moz|ms)/i,
//Could you show me a better way to test whether some property need to add the prefix?
sCSS3 = 'animation|appearance|backface|background|border|box|clip|column|filter|font|highlight|hyphenate|'+
'line|locale|locale|margin|mask|perspective|print|rtl|text|transform|transition|user|writing|app|flex|'+
'grid|hyphens|content|adjust|flow|wrap|scroll|user|touch|binding|font|image|outline|orient|stack|tab|window|marquee|svg',
rCSS3 = new RegExp(sCSS3,'i');
//now we just support string
if(typeof propertyName !== 'string') {
return false;
}
//to handle the situation when propertyName like 'moz-animation'
if (propertyName.indexOf('moz') === 0) {
propertyName = '-'+propertyName;
} propertyName = toCamelCase(propertyName); if (getComputedStyle) {
result = getComputedStyle(div)[propertyName === 'float'? 'cssFloat' :propertyName];
if (result || result === '') return true;
//if need add prefix
if (rCSS3.test(propertyName)) {
while (i > 0) {
result = getComputedStyle(div)[rhasPrefix.test(propertyName)? propertyName : toCamelCase(prefixArray[i-1]+propertyName)];
if (result || result === '') return true;
i--;
}
}
//old IE
} else if (body.currentStyle || body.runtimeStyle) { div.style['display'] = 'none';
//only when the element have appended to the DOM tree it can have the currentStyle property
body.appendChild(div);
currentStyle = div.currentStyle || div.runtimeStyle;
result = currentStyle[propertyName === 'float'? 'styleFloat' :propertyName]; if (result || result === '') {
body.removeChild(div);
return true;
}
if (rCSS3.test(propertyName)) {
result = currentStyle[rhasPrefix.test(propertyName)? propertyName : toCamelCase('ms-'+propertyName)];
if (result || result === '') {
body.removeChild(div);
return true;
}
}
body.removeChild(div);
}
return false;
}
alert('animation:'+isSupportCSS('animation'));
alert('webkit-animation:'+isSupportCSS('webkit-animation'));
alert('-webkit-animation:'+isSupportCSS('-webkit-animation'));
alert('webkitAnimation:'+isSupportCSS('webkitAnimation'));
alert('moz-animation:'+isSupportCSS('moz-animation'));
alert('-moz-animation:'+isSupportCSS('-moz-animation'));
alert('mozAnimation:'+isSupportCSS('mozAnimation'));
alert('ms-animation:'+isSupportCSS('ms-animation'));
alert('-ms-animation:'+isSupportCSS('-ms-animation'));
alert('msAnimation:'+isSupportCSS('msAnimation'));
</script>
</html>
测试浏览器是否支持某个CSS属性的更多相关文章
- 判断浏览器是否支持某个css属性
方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...
- 检测浏览器是否支持某个css属性
以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...
- 判断浏览器是否支持指定CSS属性和指定值
/** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...
- 十个实用但IE不支持的CSS属性
对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...
- 判断浏览器是否支持某个css3属性的javascript方法
判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...
- CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
- animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
- Transition 所支持的css属性
transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...
- 测试浏览器是否支持JavaScript脚本
如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证.HTML注释符号是以 <-- 开始以 --> 结束的.如果在此注释符号内编写 JavaS ...
随机推荐
- 激活IntelliJ IDEA到2100年
1.下载破解文件(破解版本2018.2,其他版本未尝试) http://idea.lanyus.com/jar/JetbrainsIdesCrack-4.2-release-sha1-3323d5d0 ...
- Python包下载超时问题解决
pip下载模块慢解决办法 由于pip安装默认的访问地址为 http://pypi.python.org/simple/经常会有网络不稳定和速度慢的现象,出现timeout报错,因此可以改为访问国内的地 ...
- SCRUM 12.09 软件工程第二周计划
第二轮迭代的第二周开始了,上一周我们进行了对代码优化的探索与自我审查. 本周,我们有以下两点目标要实现: 1.对客户端进行优化. 2.网络爬虫爬取美团外卖. 客户端优化主要开发人员:高雅智.牛强.彭林 ...
- 个人作业3——个人总结AlPha阶段
一.Alpha版本的总结 1.感受 Alpha版本已经结束了,回顾整个过程,我最大的遗憾就是项目完成得不是很理想,同时觉得自己做得不够多.不够好. 2.我做了哪些工作 数据库的连接,部分团队博客:部分 ...
- 个人作业Week2-代码复审
代码复审Check List 概要部分 代码能符合需求和规格说明么? 符合.针对-c和-s可以将正确的结果输出到相应的sudoku.txt,并在规定的时间内求解. 代码设计是否有周全的考虑? 有的.我 ...
- [转帖]Kubernetes及容器编排的总体介绍【译】
Kubernetes及容器编排的总体介绍[译] 翻译自The New Stack<Kubernetes 生态环境>作者:JANAKIRAM MSV和 KRISHNAN SUBRAMANIA ...
- WP-PostViews使用
1.在后台安装次插件 2.获取多少天之内的访问排名最高的记录 2.1 添加相应方法代码到wp-postviews.php文件中,据体代码可以网上找(本人自己可以在自己本机的例子查看到),这里只是记录大 ...
- Number Clicker CodeForces - 995E(双向bfs)
双向bfs 注意数很大 用map来存 然后各种难受....
- Nginx多进程高并发、低时延、高可靠机制缓存代理中的应用
1. 开发背景 现有开源缓存代理中间件有twemproxy.codis等,其中twemproxy为单进程单线程模型,只支持memcache单机版和redis单机版,都不支持集群版功能. 由于twemp ...
- 【转】C/C++位域结构深入解析
C/C++位域结构深入解析 内存是以字节为单位进行编址的,编程语言的基本类型中,最小类型的长度一般也就是1个字节.然而,在解决某些问题时,必须要有二进制层面的表达手段(见本博客的自己动手实现DNS协议 ...