Adicione automaticamente o método de prefixo css para compartilhar

Adicionar método de prefixo css automaticamente

Como adicionar prefixos automaticamente aos estilos CSS.

1 ： etapa 1

Use o método nativo do navegador para criar um elemento para obter o estilo e obter o prefixo do navegador de acordo com o elemento criado

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

2 ： etapa 2

Existem cinco tipos de prefixos de navegador:

Prefixo	Navegador
webkit	safari, navegador Chrome
moz	navegador firefox
o	Navegador Opera
em	ou seja, navegador
Sem prefixo	padrão padrão

Então escreva um método para determinar o prefixo deste elemento?

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 ： etapa 3

Exporte um método para aceitar o estilo css ao qual deseja adicionar um prefixo

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: etapa 4

Se você precisar adicionar um prefixo, basta chamar o método addPrefix () no arquivo que precisa ser chamado.

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

Acima está todo o conteúdo compartilhado.
                                                                                   de ------- Tyreal