StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POThe best way of checking for -moz-border-radius support
text
Body
copied!<p>I wanted some of those spiffy rounded corners for a web project that I'm currently working on.</p> <p>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.</p> <p>I already utilize jQuery so I looked at the excellent <a href="http://plugins.jquery.com/project/corners" rel="nofollow noreferrer">rounded corners plugin</a> 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.</p> <p>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 <code>-moz-border-radius-*</code> properties and if so utilize them.</p> <p>The check for webkit support looks like this:</p> <pre><code>var webkitAvailable = false; try { webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined); } catch(err) {} </code></pre> <p>That, however, did not work for <code>-moz-border-radius</code> so I started checking for alternatives.</p> <p>My fallback solution is of course to use browser detection but that's far from recommended practice ofcourse.</p> <p>My best solution yet is as follows.</p> <pre><code>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) {} </code></pre> <p>It's based on the theory that Gecko "expands" the composite -moz-border-radius to the four sub-properties</p> <ul> <li><code>-moz-border-radius-topleft</code></li> <li><code>-moz-border-radius-topright</code></li> <li><code>-moz-border-radius-bottomleft</code></li> <li><code>-moz-border-radius-bottomright</code></li> </ul> <p>Is there any javascript/CSS guru out there that have a better solution?</p> <p>(The feature request for this page is at <a href="http://plugins.jquery.com/node/3619" rel="nofollow noreferrer">http://plugins.jquery.com/node/3619</a>)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload