Comment JavaScript détermine-t-il si le navigateur prend en charge les attributs CSS3 ?

Cet article présente principalement comment JavaScript peut déterminer si le navigateur prend en charge les attributs CSS3. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

En fait, je l'utilise. css3 Pour certains attributs, afin de prendre en compte le manque de convivialité des navigateurs bas de gamme envers CSS3, il est souvent nécessaire de savoir si certains navigateurs supportent les attributs CSS3 à utiliser, afin de faire une adaptation vers le bas. Par exemple, pour les animations CSS3 courantes, il est nécessaire de vérifier si le navigateur la prend en charge. Cet article partage plusieurs méthodes ci-dessous, et les amis dans le besoin peuvent s'y référer.

Avant-propos

L'émergence de CSS3 a rendu les performances des navigateurs plus colorées. Celle qui a le plus grand impact est l'animation dans l'écriture quotidienne. animation Lors de l'utilisation de , il est nécessaire de déterminer à l'avance si le navigateur le prend en charge, notamment lors de l'écriture d'une bibliothèque d'animation CSS3. Par exemple, transition de animation-play-state n'est pris en charge que par certains navigateurs.

La méthode suivante peut utiliser un script pour déterminer si le navigateur prend en charge un certain attribut CSS3 :

La première méthode : javascript est plus couramment utilisée avec le code suivant :

var support_css3 = (function() {
 var p = document.createElement('p'),
  vendors = 'Ms O Moz Webkit'.split(' '),
  len = vendors.length;
 
 return function(prop) {
  if ( prop in p.style ) return true;
 
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });
 
  while(len--) {
   if ( vendors[len] + prop in p.style ) {
   return true;
   } 
  }
  return false;
 };
})();

Utilisation : Vérifiez s'il est pris en chargetransform

if(support_css3('transform')){

}else{

}

Deuxième : méthode JavaScript 2 : ie6 n'est pas pris en charge

function isPropertySupported(property)
{
 return property in document.body.style;
}

Utiliser :

N'oubliez pas les attributs ci-dessus et utilisez backgroundColor pour remplacer background-color

if(isPropertySupported('opacity')){

}else{

}

Troisième : CSS.supports

CSS.suports est une règle spéciale parmi les règles CSS3 @support. @support la règle le prend en charge La fonction suivante (cette méthode n'est pas recommandée, après tout, @support est également compatible, certains navigateurs peuvent prendre en charge l'un des attributs CSS3, mais pas @support)

//pass the same string as you pass to the @supports rule
if(CSS.supports("(background-color: red) and (color:white"))
{
 document.body.style.color = "white";
 document.body.style.backgroundColor = "red";
}

Enfin, je partagerai une fonction pour déterminer si le navigateur prend en charge certains attributs HTML5, par exemple si l'attribut d'entrée prend en charge palaceholder.

function elementSupportsAttribute(element, attribute) {
 var test = document.createElement(element);
 if (attribute in test) {
 return true;
 } else {
 return false;
 }
};

Utilisation :

if (elementSupportsAttribute("textarea", "placeholder") {

} else {
 // fallback
}

Ce qui précède représente l'intégralité du contenu de cet article .J'espère que cela sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de JavaScript pour créer des graphiques de cadre simples

À propos de js pour transmettre les paramètres de tableau au contrôleur d'arrière-plan Méthode

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!