La meilleure façon de vérifier la prise en charge de -moz-border-radius

Question

Je voulais certains de ces coins arrondis élégants pour un projet Web sur lequel je travaille actuellement.

J'ai pensé essayer de le faire en utilisant javascript et non CSS dans le but de réduire au minimum les demandes de fichiers image (oui, je sais qu'il est possible de combiner toutes les formes de coins arrondis requises en une seule image) et je voulais aussi pour pouvoir changer la couleur d'arrière-plan à la volée.

J'utilise déjà jQuery alors j'ai regardé l'excellent plugin coins arrondis et cela a fonctionné à merveille dans tous les navigateurs que j'ai essayés.En tant que développeur, j'ai cependant remarqué l'opportunité de le rendre un peu plus efficace.Le script inclut déjà du code pour détecter si le navigateur actuel prend en charge les coins arrondis du webkit (navigateurs basés sur Safari).Si tel est le cas, il utilise du CSS brut au lieu de créer des couches de divs.

J'ai pensé que ce serait génial si le même type de vérification pouvait être effectué pour voir si le navigateur prend en charge les fonctionnalités spécifiques à Gecko. -moz-border-radius-* propriétés et si c’est le cas, utilisez-les.

La vérification de la prise en charge du webkit ressemble à ceci :

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

Mais cela n’a pas fonctionné pour -moz-border-radius alors j'ai commencé à chercher des alternatives.

Ma solution de repli consiste bien sûr à utiliser la détection du navigateur, mais c'est bien sûr loin d'être une pratique recommandée.

Ma meilleure solution à ce jour est la suivante.

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

Il est basé sur la théorie selon laquelle Gecko "étend" le composite -moz-border-radius aux quatre sous-propriétés.

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

Existe-t-il un gourou javascript/CSS qui propose une meilleure solution ?

(La demande de fonctionnalité pour cette page est à http://plugins.jquery.com/node/3619)

Answer 1

Que dis-tu de ça?

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

Je l'ai testé dans Firefox 3 (vrai) et faux dans :Safari, IE7 et Opéra.

(Modifier:meilleur test non défini)

Answer 2

Je sais que c'est une question plus ancienne, mais elle apparaît en bonne place dans les recherches pour tester la prise en charge du rayon de bordure, j'ai donc pensé jeter cette pépite ici.

Rob Glazebrook a un petit extrait qui étend l'objet de support de jQuery pour effectuer une vérification rapide et intéressante de la prise en charge du rayon de bordure (également moz et web-kit).

jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
    if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
    return (!jQuery.support.borderRadius);
}); });

Attribution

De cette façon, s'il n'est pas pris en charge, vous pouvez utiliser jQuery pour implémenter un curseur bidirectionnel afin que les autres navigateurs aient toujours une expérience visuelle similaire.

Answer 3

Pourquoi ne pas utiliser -moz-border-radius et -webkit-border-radius dans la feuille de style ?C'est un CSS valide et lancer un attribut autrement inutilisé ferait moins de mal que de laisser javascript faire les démarches nécessaires pour déterminer s'il doit l'appliquer ou non.

Ensuite, dans le javascript, vous devrez simplement vérifier si le navigateur est IE (ou Opera ?) - si c'est le cas, il ignorera les balises propriétaires, et votre javascript pourrait faire son travail.

Peut-être que j'ai raté quelque chose ici...

Answer 4

Appliquez CSS sans condition et vérifiez element.style.MozBorderRadius dans le scénario ?

Answer 5

Comme vous utilisez déjà jQuery, vous pouvez utiliser jQuery.navigateur utilitaire pour renifler le navigateur, puis cibler votre CSS / JavaScript en conséquence.

Answer 6

Le problème est que Firefox 2 n'utilise pas d'anticrénelage pour les bordures.Le script devra détecter pour Firefox 3 avant d'utiliser les coins arrondis natifs, car FF3 utilise l'anti-aliasing.

Answer 7

J'ai développé la méthode suivante pour détecter si le navigateur prend en charge ou non les bordures arrondies.Je ne l'ai pas encore testé sur IE (je suis sur une machine Linux), mais il fonctionne correctement dans les navigateurs Webkit et Gecko (c'est-à-direSafari/Chrome et Firefox) ainsi que dans Opera :

function checkBorders() {
  var div = document.createElement('div');
  div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
  for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
    if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
      return true;
    };
  return false;
};

Si vous souhaitez tester Firefox 2 ou 3, vous devez rechercher le moteur de rendu Gecko, et non le navigateur lui-même.Je ne trouve pas la date de sortie précise de Gecko 1.9 (qui est la version qui prend en charge les coins arrondis anti-aliasés), mais le wiki de Mozilla indique qu'il a été publié au premier trimestre 2007, donc nous supposerons mai juste pour être bien sûr.

if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )

Au total, la fonction combinée est la suivante :

function checkBorders() {
  if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 ) {
    return true;
  } else {
    var div = document.createElement('div');
    div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
    for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
      if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
        return true;
      };
    return false;
  };
};