The best way of checking for -moz-border-radius support

Question

I wanted some of those spiffy rounded corners for a web project that I'm currently working on.

I thought I'd try to accomplish it using javascript and not CSS in an effort to keep the requests for image files to a minimum (yes, I know that it's possible to combine all required rounded corner shapes into one image) and I also wanted to be able to change the background color pretty much on the fly.

I already utilize jQuery so I looked at the excellent rounded corners plugin and it worked like a charm in every browser I tried. Being a developer however I noticed the opportunity to make it a bit more efficient. The script already includes code for detecting if the current browser supports webkit rounded corners (safari based browsers). If so it uses raw CSS instead of creating layers of divs.

I thought that it would be awesome if the same kind of check could be performed to see if the browser supports the Gecko-specific -moz-border-radius-* properties and if so utilize them.

The check for webkit support looks like this:

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

That, however, did not work for -moz-border-radius so I started checking for alternatives.

My fallback solution is of course to use browser detection but that's far from recommended practice ofcourse.

My best solution yet is as follows.

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

It's based on the theory that Gecko "expands" the composite -moz-border-radius to the four "subproperties" -moz-border-radius-{topleft,topright,bottomleft,bottomright}

Is there any javascript/CSS guru out there that have a better solution?

(The feature request for this page is at http://plugins.jquery.com/node/3619)

Answer 1

Why not use -moz-border-radius and -webkit-border-radius in the stylesheet? It's valid CSS and throwing an otherwise unused attribute would hurt less than having javascript do the legwork of figuring out if it should apply it or not.

Then, in the javascript you'd just check if the browser is I.E. (or Opera?) - if it is, it'll ignore the proprietary tags, and your javascript could do it's thing.

Maybe I'm missing something here...

Answer 2

Apply CSS unconditionally and check element.style.MozBorderRadius in the script?

Answer 3

How about this?

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

I tested it in Firefox 3 (true) and false in: Safari, IE7, and Opera.

Answer 4

As you're already using jQuery you could use jQuery.browser utility to do some browser sniffing and then target your CSS / JavaScript accordingly.

Answer 5

The problem with this is that Firefox 2 does not use anti-aliasing for the borders. The script would need to detect for Firefox 3 before is uses native rounded corners as FF3 does use anti-aliasing.

Answer 6

David_Turnbull has updated Rounded Corners to support native rounded corners in FF3 as well as webkit based browsers. Visit http://plugins.jquery.com/project/corners to download version 0.3.

Answer 7

I've developed the following method for detecting whether the browser supports rounded borders or not. I have yet to test it on IE (am on a Linux machine), but it works correctly in Webkit and Gecko browsers (i.e. Safari/Chrome and Firefox) as well as 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;
};

If you wanted to test for Firefox 2 or 3, you should check for the Gecko rendering engine, not the actual browser. I can't find the precise release date for Gecko 1.9 (which is the version that supports anti-aliased rounded corners), but the Mozilla wiki says it was released in the first quarter of 2007, so we'll assume May just to be sure.

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

All in all, the combined function is this:

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

Answer 8

I know this is an older question, but it shows up high in searches for testing border-radius support so I thought I'd throw this nugget in here.

Rob Glazebrook has a little snippet that extends the support object of jQuery to do a nice quick check for border-radius support (also moz and 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

That way, if there isn't support for it you can fall back and use jQuery to implement a 2-way slider so that other browsers still have a similar visual experience.

Answer 9

I've come to this question just now when it is 2 years old.

So for the record I'd add that today the best way (IMO) to check for browser features is to use the Modernizr library