自动添加css前缀方法分享

自动添加css前缀方法

有关如何给css样式自动添加前缀。

1：step 1

用浏览器原生方法创建一个element获取style，要根据这个创建的element来获取浏览器的前缀

let elementStyle = document.createElement('div').style

2：step 2

一直浏览器的前缀分为五种：

前缀	浏览器
webkit	safari,chrome浏览器
moz	firefox浏览器
o	Opera浏览器
ms	ie浏览器
无前缀	standard默认的

所以写一个方法来判断这个element的前缀是什么？

let screenPrefix = (() => {
  const prefix = {
    webkit: 'webkitTransform', // safari,chrome等
    Moz: 'MozTransform', // firefox
    O: 'OTransform', // Opera
    ms: 'msTransform', // ie
    standard: 'transform' // 默认
  }

  for (let key in prefix) {
    if (elementStyle[prefix[key]] !== undefined) {
      return key
    }
  }
  
  return false

3：step 3

向外导出一个方法，可以接受想要添加前缀的css样式

export function addPrefix(style) {
  if (screenPrefix) { // 添加前缀返回的方法是false可能是出error了
    return false
  }
  if (screenPrefix === 'transform') { // 说明不用添加前缀，默认即可
    return style
  }
  // 驼峰命名
  return screenPrefix + style.charAt(0).toUpperCase() + style.substr(1)
}

4：step 4

如果需要添加前缀的话就在需要调用的文件中，直接调用addPrefix()方法即可。

import { addPrefix } from 'common/js/dom'
const transform = addPrefix('transform')

以上为分享的所有内容。
                                                                                   from-------Tyreal