Der beste Weg von überprüfung für -moz-border-radius-Unterstützung

Question

Ich wollte einige dieser schicke abgerundete Ecken für ein web-Projekt, das ich gerade auf Arbeit bin.

Ich dachte, ich würde versuchen, es zu erreichen mit javascript und CSS nicht in einem Mühe zu halten die Anträge für image-Dateien auf ein minimum (ja, ich weiß, dass es möglich ist, kombinieren Sie alle erforderlichen abgerundete Ecke Formen in einem Bild) und ich wollte das auch können ändern die hintergrund Farbe ziemlich viel auf das Fliegen.

Ich habe bereits nutzen, jQuery, also schaute ich auf die ausgezeichnete abgerundete Ecken-plugin und es funktionierte wie ein Charme, der in jedem browser, die ich ausprobiert habe.Ein Entwickler allerdings bemerkte ich die Gelegenheit, machen Sie es ein bisschen effizienter.Das Skript enthält bereits code für die Erkennung, ob der aktuelle browser unterstützt webkit abgerundeten Ecken (safari-basierten Browsern).Wenn es verwendet rohe CSS anstelle von Ebenen erstellen von divs.

Ich dachte, dass es toll wäre, wenn die gleiche Art von Prüfung kann durchgeführt werden, um zu sehen, ob der browser unterstützt die Gecko-spezifische -moz-border-radius-* Eigenschaften und wenn ja, nutzen Sie Sie.

Die Prüfung für die webkit-Unterstützung sieht wie folgt aus:

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

Dass allerdings nicht funktioniert -moz-border-radius so begann ich die Prüfung für alternativen.

Meine fallback-Lösung ist natürlich die Verwendung browser-Erkennung, aber das ist weit von der empfohlenen Vorgehensweise, ofcourse.

Meine bisher beste Lösung ist wie folgt.

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

Es basiert auf der Theorie, dass die Gecko - "erweitert" die composite -moz-border-radius der vier sub-Eigenschaften

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

Gibt es eine javascript - /CSS-guru aus, dass es eine bessere Lösung?

(Die feature-Anfrage für diese Seite ist http://plugins.jquery.com/node/3619)

Answer 1

Wie über diese?

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

Getestet habe ich es in Firefox 3 (wahr) und false in:Safari, IE7 und Opera.

(Bearbeiten:besser undefined test)

Answer 2

Ich weiß, das ist eine ältere Frage, aber es zeigt sich hoch in die Suche für die Prüfung border-radius-Unterstützung, so dass ich dachte, ich würde werfen dies Goldklumpen in hier.

Rob Glazebrook hat ein kleines snippet, erstreckt sich der support-Objekt von jQuery zu tun, ein nettes quick-check für border-radius-Unterstützung (auch moz und 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

So, wenn es nicht Unterstützung für Sie die Sie zurückgreifen können und verwenden Sie jQuery zu implementieren, ein 2-Wege-Schieberegler so, dass andere Browser immer noch eine ähnliche visuelle Erfahrung.

Answer 3

Warum nicht -moz-border-radius und -webkit-border-radius im stylesheet?Ist es ein gültiges CSS, und werfen eine ansonsten ungenutzte Attribut würde weniger weh als mit javascript tun, die Beinarbeit, herauszufinden, ob er gelten soll oder nicht.

Klicken Sie dann in der javascript-Sie würde nur zu überprüfen, ob der browser ist IE (oder in der Oper?) - wenn es ist, es zu ignorieren, die proprietäre tags und javascript-könnte es nicht sein Ding.

Vielleicht bin ich etwas fehlt hier...

Answer 4

Anwenden von CSS-bedingungslos und überprüfen element.style.MozBorderRadius im Skript?

Answer 5

Als Sie bereits mit jQuery, die Sie nutzen könnten jQuery.browser - Dienstprogramm zu tun, einige browser-sniffing und dann richten Sie Ihre CSS - / JavaScript-entsprechend.

Answer 6

Das problem mit diesem ist, dass Firefox 2 funktioniert kein anti-aliasing für die Grenzen.Das Skript müsste erkennen, für Firefox 3, bevor Sie verwendet native abgerundeten Ecken FF3 hat die Verwendung von anti-aliasing.

Answer 7

Ich habe entwickelt, die folgende Methode für die Erkennung, ob der browser unterstützt abgerundete Grenzen ist oder nicht.Ich muss noch testen, es auf IE (bin auf einem Linux-Rechner), aber es funktioniert einwandfrei in Webkit und Gecko-Browsern (z.B.Safari/Chrome und Firefox) als auch 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;
};

Wenn Sie wollte-test für Firefox 2 oder 3, sollten Sie überprüfen, für die Gecko-rendering-engine, nicht die tatsächliche browser.Ich kann nicht finden, die genauen release-Termin für Gecko 1.9 (das ist die version, die unterstützt anti-Aliasing mit abgerundeten Ecken), aber die Mozilla-wiki sagt, dass es veröffentlicht wurde, im ersten Quartal 2007, so dass wir davon ausgehen Können, nur um sicher zu sein.

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

Alle in alle, die kombinierte Funktion ist diese:

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