Js判读浏览器是否支持 CSS 属性
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标准的演进，某些属性可能会被弃用或更改。因此，在使用此函数时，建议结合其他方法（如查阅浏览器文档或使用在线工具）来验证结果。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
