Deux façons d'utiliser JavaScript pour déterminer les compétences prefix_javascript du type de navigateur CSS

Peu importe à quel point nous détestons les préfixes de type de navigateur, nous devons tous y faire face quotidiennement, sinon quelque chose ne fonctionnera pas correctement. Il existe deux manières d'utiliser ces préfixes : en CSS (comme "-moz-") et en JS. Il existe un projet X-Tag incroyable avec un script JavaScript intelligent qui peut être utilisé pour déterminer quel préfixe est actuellement utilisé - laissez-moi vous montrer comment cela fonctionne !

Par exemple, le préfixe CSS est "-ms-" pour IE, "-o-" pour l'ancienne version d'Opera, "-moz-" pour Firefox et "-webkit-" pour Safari/Chrome . JavaScript dispose de plusieurs façons de les déterminer.

Méthode 1 : Jugement des caractéristiques

// 取浏览器的 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 '';
}();

Créez un div, ajoutez-y les styles CSS de préfixe -webkit-, -moz-, -o-, -ms-, puis récupérez le style et utilisez style.xxxTransition pour déterminer de quel préfixe il s'agit.

Méthode 2 : getComputedStyle récupère tous les styles de documentElement puis les analyse

Récupérez d'abord les styles via window.getComputedStyle et convertissez les styles en un tableau

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

Firefox arr est le suivant

Chrome arr est le suivant

Vous pouvez voir que les noms de préfixes CSS implémentés par chaque navigateur sont obtenus.

Concaténez tous les attributs dans une chaîne, puis utilisez la correspondance d'expression régulière pour trouver le préfixe

// 取浏览器的 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 + '-';
}();

On voit que la méthode 2 a beaucoup moins de code que la méthode 1. Les méthodes 1 et 2 utilisent des fonctions anonymes pour renvoyer des résultats après une exécution unique. Il n'est pas nécessaire d'appeler la fonction à chaque fois.

Le contenu ci-dessus montre comment l'éditeur présente deux méthodes pour utiliser JavaScript pour déterminer le préfixe du type de navigateur CSS. J'espère que vous l'aimerez.