[Vuejs]-How Vue knows which prefix should prepend when different browser?

by

0👍

I suppose I found the answer.
The code is under vue/src/platforms/web/runtime/modules/style.js line 32

const vendorNames = ['Webkit', 'Moz', 'ms']

let emptyStyle
const normalize = cached(function (prop) {
  emptyStyle = emptyStyle || document.createElement('div').style
  prop = camelize(prop)
  if (prop !== 'filter' && (prop in emptyStyle)) {
    return prop
  }
  const capName = prop.charAt(0).toUpperCase() + prop.slice(1)
  for (let i = 0; i < vendorNames.length; i++) {
    const name = vendorNames[i] + capName
    if (name in emptyStyle) {
      return name
    }
  }
})

The emptyStyle here is CSSStyleDeclaration from browser.
Vue will check every attribute with prefix in CSSStyleDeclaration or not.
If yes then will append it and cache it.
However, it looks like the filter attribute is an exception here.

Most of CSS we will write in CSS file then it will be compiled by PostCSS and Autoprefixer. Consider the runtime, the code above I guess is the easiest and smallest way to achieve, yet still have some surprises.

Leave a comment