Verschiedene Methoden für JavaScript, um festzustellen, ob der Browser CSS3-Attribute unterstützt

Vorwort

Das Aufkommen von CSS3 hat die Leistung von Browsern bunter gemacht. Der größte Einfluss auf die Leistung ist die Animation. Beim täglichen Schreiben von Animationen muss im Voraus festgestellt werden, ob dies der Fall ist Der Browser unterstützt es, insbesondere als ich eine CSS3-Animationsbibliothek schrieb. Beispielsweise wird der Übergangsanimations-Play-State nur von einigen Browsern unterstützt.

Die folgende Methode kann mithilfe eines Skripts ermitteln, ob der Browser ein bestimmtes CSS3-Attribut unterstützt:

Die erste Methode: Javascript verwendet üblicherweise den folgenden Code:

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

Verwendung: Überprüfen Sie, ob Transformation unterstützt wird

if(support_css3('transform')){
 
}else{
 
}

Zweitens: JavaScript-Methode 2: ie6 wird nicht unterstützt

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

Verwendung:

Beachten Sie die oben genannten Attribute und verwenden Sie „backgroundColor“, um die Hintergrundfarbe zu ersetzen

if(isPropertySupported('opacity')){
 
}else{
 
}

Drittens: CSS.supports

CSS.supports ist eine besondere Regel unter den CSS3-@support-Regeln. Jede, die @support-Regeln unterstützt, unterstützt Folgendes Funktion (Diese Methode wird nicht empfohlen. Schließlich ist @support auch kompatibel. Einige Browser unterstützen möglicherweise eines der CSS3-Attribute, jedoch nicht @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";
}

Lassen Sie uns abschließend eine Funktion teilen, um zu bestimmen, ob der Browser bestimmte HTML5-Attribute unterstützt, z. B. ob das Eingabeattribut Palaceholder unterstützt.

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

Verwendung :

if (elementSupportsAttribute("textarea", "placeholder") {
 
} else {
 // fallback
}