Two ways to use JavaScript to determine CSS browser type prefix_javascript skills

No matter how much we hate browser type prefixes, we all have to face it every day, otherwise something won’t work properly. There are two ways to use these prefixes: in CSS (such as "-moz-") and in JS. There is an amazing X-Tag project with a clever JavaScript script that can be used to determine what prefix is ​​currently used - let me show you how it works!

For example, the CSS prefix is ​​"-ms-" for IE, "-o-" for the old version of Opera, "-moz-" for Firefox, and "-webkit-" for Safari/Chrome. JavaScript has several ways to determine them.

Method 1: Feature Judgment

// 取浏览器的 CSS 前缀
var prefix = function() {
  var div = document.createElement('div');
  var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';
  div.style.cssText = cssText;
  var style = div.style;
  if (style.webkitTransition) {
    return '-webkit-';
  }
  if (style.MozTransition) {
    return '-moz-';
  }
  if (style.oTransition) {
    return '-o-';
  }
  if (style.msTransition) {
    return '-ms-';
  }
  return '';
}();

Create a div, add -webkit-, -moz-, -o-, -ms- prefix css styles to it, then get the style, and use style.xxxTransition to determine which prefix it is.

Method 2: getComputedStyle gets all styles of documentElement and then parses them

First get the styles through window.getComputedStyle and convert styles into an array

var styles = window.getComputedStyle(document.documentElement, '');
var arr = [].slice.call(styles);
console.log(arr);

Firefox arr is as follows

Chrome arr is as follows

You can see that the CSS prefix names implemented by each browser are obtained.

Concatenate all attributes into a string, and then use regular expression matching to find the prefix

// 取浏览器的 CSS 前缀
var prefix = function() {
  var styles = window.getComputedStyle(document.documentElement, '');
  var core = (
    Array.prototype.slice
    .call(styles)
    .join('')
    .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
  )[1];
  return '-' + core + '-';
}();

We see that method 2 has much less code than method 1. Both Method 1 and Method 2 use anonymous functions to return results after one-time execution. There is no need to call the function every time.

The above content is how the editor introduces two methods to use JavaScript to determine the CSS browser type prefix. I hope you like it.