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
相关推荐
下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @version 1.0 * @author ydr.me * 2014年4月4...
下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: 第一种:javascript比较常用下面这个代码: var support_css3 = (function() { var div = document.createElement('div'), vendors = 'Ms O Moz ...
当我们想用某个css新特性时,总是会在意它的兼容性情况,或许我们会去搜索它的兼容性,哪些浏览器合适哪些不合适,在这些已知的情况下再选择是不是使用或如何使用,这是一个已知我们即将用于什么浏览器下作出的选择...
和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 ...为了达到更好的兼容,最好加一个浏览器及版本判断。
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和...我发明了一种基于CSS媒体查询和z-index属性的方法,能告诉JavaScript
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和...我发明了一种基于CSS媒体查询和z-index属性的方法,能告诉JavaScript
1、先创建一个 base.js 的文件 2、在文件中执行以下代码 console.log(" .... ... "); [removed](" ... ... "); window.alert("这是在外部脚本文件中的内容"); 3、在 html 文档中,引入 base.js 文件 ...
[removed] window.MtUtils.cssSupports('position')[removed]功能目录cssSupports CSS 能力检测参数prop : String css 属性名称value: [String | undefined] css 属性值返回值 Boolean描述判断浏览器是否支持传入的...
设计懒加载组件,需要支持以下几个功能:支持自定义定义组件有效范围支持 scroll 事件和 CSS3 transform支持自定义预加载距离提供事件绑定支持组件功能开启和关闭设计思路判断 transfrom 模式下的元素位置移动端元素...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 * 可以...
2.3.js 一个单独的JS测试文件 2.4.htm 完成层的换肤功能 2.5.htm 用于调试JS程序的测试代码 第3章(/C03/) 3.1.htm 判断浏览器类型的例子 3.2.htm 演示undefinded如何与null...
3.6.html 向数组头添加一个项。 3.7.html 多维数组的实现方法。 第4章(\c04) 示例描述:介绍JavaScript的面向对象特性。 4.1.html 对象的创建。 4.2.html 作为关联数组的对象与数组对象实现方式...
Browsengine 这是一个小型库,用于检测不同的浏览器引擎、它们的版本以及它们运行在整个网络上的设备。 它的工作原理是处理浏览器引擎提供的信息,并将这些信息放在 <body> 标签的class属性中。前言JavaScript...
|--x.toString():用于把一个 Number 对象转换为一个字符串,并返回结果 19.正则表达式对象:(专门用于查找和验证) reg.test(‘要验证的完整字符串’)匹配返回true,否则返回false 强调:如果正则表达式使用了^和$...
-Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
当浮动层div与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度是一致的,所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢? 这里则是使用javaScript库实现。