Two ways to judge CSS Browser type prefixes with JavaScript _javascript tips

No matter how annoying we are about the browser type prefix, we have to face it every day, and some things don't work. There are two ways to use these prefixes: in CSS (such as "-moz-") and in JS. There is a clever JavaScript script in a magical X-tag project that can be used to determine what prefix is currently in use-let me show how it works!

For example, CSS prefix, IE is "-ms-", the old version of Opera is "-o-", Firefox is "-moz-", Safari/chrome is "-webkit-." JavaScript can judge them in many ways.

Method 1: Characteristic judgment

Fetch browser CSS prefix
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 ';
} ();

By creating a Div, add the-webkit-、-moz-、-the prefix CSS style of the O-、-ms-, and then get the style and determine by style.xxxtransition what kind of prefix it is.

Method 2:getcomputedstyle get documentelement all styles and then parse

First, the styles is obtained by window.getComputedStyle, and the styles is transferred to a group

var styles = window.getComputedStyle (Document.documentelement, ");
var arr = [].slice.call (styles);
Console.log (arr);

Firefox arr as follows

The Chrome arr is as follows

You can see the name of the CSS prefix that has the implementation of the respective browser.

Concatenate all attributes into a string and then match the regular expression to find the prefix.

Browser CSS prefix
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 is a lot less than Method 1 code. Regardless of method 1 and Method 2, the anonymous function is executed once and the result is returned without the need to call the function every time.

The above content is a small series of two ways to introduce you to use JavaScript to determine the CSS browser type prefix, I hope you like.