檢測瀏覽器是否支援某個css屬性

以瀏覽器是否支援translate3d 為例說明，當然現代瀏覽器已經支援該屬性。如果瀏覽器實現了帶有字首的某個屬性，比如說支援-webkit-transform，但是不支援直接寫transform，可以通過檢測瀏覽器engine，給屬性加上特殊的字首

let docStyle = document.documentElement.style

let translate3d = false

let engine

if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {

  engine = 'presto'

} else if ('MozAppearance' in docStyle) {

  engine = 'gecko'

} else if ('WebkitAppearance' in docStyle) {

  engine = 'webkit'

} else if (typeof navigator.cpuClass === 'string') {

  engine = 'trident'

}

let cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine]

let vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine]

let helperElem = document.createElement('div')

let perspectiveProperty = vendorPrefix + 'Perspective'

let transformProperty = vendorPrefix + 'Transform'

let transformStyleName = cssPrefix + 'transform'

let transitionProperty = vendorPrefix + 'Transition'

let transitionStyleName = cssPrefix + 'transition'

let transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd'

// 可能帶prefix字首也可能不帶

if (helperElem.style[perspectiveProperty] !== undefined) {

  translate3d = true

}