Two ways JavaScript determines CSS prefixes for each browser

No matter how fast the browser updates, it claims to support the standard. Different manufacturers, there are still many differences between them. We need to differentiate between these differences and do different processing for different browsers.

such as CSS prefix, IE is "-ms-", the old version of Opera is "-o-", Firefox is "-moz-", Safari/chrome is "-webkit-". JavaScript has many ways of judging them.

Mode 1: Characteristic judgment

Take the browser's 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-webkit-、-moz-、-o-、-the prefix CSS style of the ms-, and then get the style, by style.xxxtransition to determine what kind of prefix.

Way 2:getcomputedstyle get documentelement all styles re-parse

Get styles from window.getComputedStyle first, and turn styles into groups

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 the CSS prefix names that are implemented with their own browser.

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

Take the browser's CSS prefix var prefix = function () {var styles = window.getComputedStyle (Document.documentelement, "); var core = (ARR Ay.prototype.slice. Call    (styles).    Join (")     . Match (/-(MOZ|WEBKIT|MS)-/) | | (Styles. Olink = = = ' && [', ' O ']) [1];return '-' + core + '-';} ();

We see the way 2 is a lot less than the way 1 code amount. Both mode 1 and Mode 2, all using anonymous functions to return the results once, do not need to call the function every time.

JavaScript two ways to determine CSS prefixes for each browser