document.documentElement.style判断浏览器是否支持Css3属性
1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性
包括带前缀的和不带前缀的
例如:animation,webkitAnimation,msAnimation等
2.判断浏览器是否支持制定的css属性
function support(cssName) { var htmlStyle = document.documentElement.style; if (cssName in htmlStyle) return true; return false; } alert(support('animate')); //false alert(support('animation')); //true
3.判断当前浏览器是否支持支持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; } alert(supportCss3('animation'));//true
4.在Google浏览器中还可以使用window.CSS.supports判断css的属性和值
/* * 在Google浏览器中可以使用 window.CSS.supports判断浏览器是否支持制定css属性和值 */ console.info(window.CSS); console.info(window.CSS.supports('animation'));//false console.info(window.CSS.supports('animate')); //false console.info(window.CSS.supports('animation','liear'));//true console.info(window.CSS.supports('border', '1px solid red'));//true
关于浏览器支持的Css属性列表,google如下:其他浏览器不在列举了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步