css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transition的animation-play-state,就只有部分浏览器支持。
浏览器是否支持某一个CSS3属性可以通过编写JavaScript代码来判断。以下是一个示例函数,用于检测浏览器是否支持特定的CSS3属性:
function supportCss(style) {
let prefix = ['webkit', 'Moz', 'ms', 'o']
let hump = []
let htmlStyle = document.documentElement.style
let toHumb = function(string) {
return string.replace(/-(\w)/g, ($0, $1)=>{
return $1.toUpperCase()
})
}
for (let i in prefix)
hump.push(toHumb(prefix[i] + '-' + style))
hump.push(toHumb(style))
for (let i in hump)
if (hump[i] in htmlStyle) return true
return false
}
使用此函数时,只需将要检测的CSS3属性作为参数传递给函数即可,例如:
supportCss('animation-play-state') //true
此函数会遍历各种浏览器前缀(如-webkit-、-moz-等)和无前缀的属性名,检查它们是否存在于document.documentElement.style对象中。如果存在,则说明浏览器支持该CSS3属性,函数返回true;否则,返回false。
请注意,这种方法并不是完全可靠的,因为有些浏览器可能支持某个CSS3属性但无法正确识别其名称。此外,随着浏览器更新和CSS标准的演进,某些属性可能会被弃用或更改。因此,在使用此函数时,建议结合其他方法(如查阅浏览器文档或使用在线工具)来验证结果。
5 天前