Il modo migliore per verificare il supporto -moz-border-radius

Question

Volevo alcuni di quegli eleganti angoli arrotondati per un progetto web su cui sto attualmente lavorando.

Ho pensato di provare a realizzarlo utilizzando Javascript e non CSS nel tentativo di mantenere al minimo le richieste di file di immagine (sì, lo so che è possibile combinare tutte le forme con angoli arrotondati richieste in un'unica immagine) e volevo anche per poter cambiare il colore dello sfondo praticamente al volo.

Utilizzo già jQuery quindi ho guardato l'eccellente plug-in con angoli arrotondati e ha funzionato a meraviglia in ogni browser che ho provato.Essendo uno sviluppatore, tuttavia, ho notato l'opportunità di renderlo un po' più efficiente.Lo script include già il codice per rilevare se il browser corrente supporta gli angoli arrotondati del webkit (browser basati su Safari).In tal caso utilizza CSS grezzi invece di creare livelli di div.

Ho pensato che sarebbe stato fantastico se lo stesso tipo di controllo potesse essere eseguito per vedere se il browser supporta le funzionalità specifiche di Gecko -moz-border-radius-* proprietà e, in caso affermativo, utilizzarle.

Il controllo del supporto webkit è simile al seguente:

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

Questo, tuttavia, non ha funzionato -moz-border-radius così ho iniziato a cercare alternative.

La mia soluzione di riserva è ovviamente quella di utilizzare il rilevamento del browser, ma ovviamente è ben lungi dall'essere una pratica consigliata.

La mia migliore soluzione finora è la seguente.

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) {}

Si basa sulla teoria che Gecko "espande" il composito -moz-border-radius alle quattro sottoproprietà

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

C'è qualche guru di Javascript/CSS là fuori che ha una soluzione migliore?

(La richiesta di funzionalità per questa pagina è all'indirizzo http://plugins.jquery.com/node/3619)

Answer 1

Cosa ne pensi di questo?

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

L'ho testato in Firefox 3 (vero) e falso in:Safari, IE7 e Opera.

(Modificare:test migliore non definito)

Answer 2

So che questa è una domanda più vecchia, ma appare in alto nelle ricerche per testare il supporto del raggio di confine, quindi ho pensato di inserire questa pepita qui.

Rob Glazebrook ha un piccolo frammento che estende l'oggetto support di jQuery per fare un bel controllo rapido per il supporto border-radius (anche moz e 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);
}); });

Attribuzione

In questo modo, se non è disponibile il supporto, puoi ricorrere a jQuery per implementare uno slider a 2 vie in modo che altri browser abbiano comunque un'esperienza visiva simile.

Answer 3

Perché non usarlo -moz-border-radius E -webkit-border-radius nel foglio di stile?È un CSS valido e lanciare un attributo altrimenti inutilizzato farebbe meno male che avere Javascript che fa il lavoro per capire se deve applicarlo o meno.

Quindi, nel javascript dovresti semplicemente controllare se il browser è IE (o Opera?): se lo è, ignorerà i tag proprietari e il tuo javascript potrebbe fare la cosa giusta.

Forse mi sfugge qualcosa qui...

Answer 4

Applica CSS incondizionatamente e controlla element.style.MozBorderRadius nella sceneggiatura?

Answer 5

Dato che stai già utilizzando jQuery, potresti utilizzare jQuery.browser utility per eseguire lo sniffing del browser e quindi indirizzare il tuo CSS/JavaScript di conseguenza.

Answer 6

Il problema è che Firefox 2 non utilizza l'anti-aliasing per i bordi.Lo script dovrebbe rilevare per Firefox 3 prima di utilizzare gli angoli arrotondati nativi poiché FF3 utilizza l'anti-aliasing.

Answer 7

Ho sviluppato il seguente metodo per rilevare se il browser supporta o meno i bordi arrotondati.Devo ancora testarlo su IE (sono su una macchina Linux), ma funziona correttamente nei browser Webkit e Gecko (ad es.Safari/Chrome e Firefox) così come in 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;
};

Se desideri provare Firefox 2 o 3, dovresti verificare il motore di rendering Gecko, non il browser vero e proprio.Non riesco a trovare la data di rilascio precisa per Gecko 1.9 (che è la versione che supporta gli angoli arrotondati con anti-aliasing), ma il wiki di Mozilla dice che è stato rilasciato nel primo trimestre del 2007, quindi supponiamo che maggio sia solo Sicuro.

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

Tutto sommato, la funzione combinata è questa:

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;
  };
};