Question

I have been using the following code:

if (
    ($.browser.msie && parseFloat($.browser.version) < 7) ||        // IE 6 and lower
    ($.browser.mozilla && parseFloat($.browser.version) < 1.9) ||   // Firefox 2 and lower
    ($.browser.opera && parseFloat($.browser.version) < 9) ||       // Opera 8 and lower
    ($.browser.webkit && parseInt($.browser.version) < 400)             // Older Chrome and Safari
) {
    // document.location.href = 'old-browsers.html?redirect=' + escape(document.location.href);
}

But this seems to not work for Chrome. Now I would like to replace it with some code using feature detection. I was looking at modernizr but this seems just to add a class to my html and it also creates quite a lot of javascript even for just this one check.

Is there an easy way that I could check if my browser supports the CSS HTML5 border-radius property?

Answer 1

Simply test for the presence of borderRadius property (using the JavaScript naming conventions for CSS properties) in the style properties of an element, using e.g. the condition

'borderRadius' in document.body.style

This is a simplified version of the code in @Ohgodwhy’s answer.

Note that this performs the exact check requested, for the property border-radius. @thecodeparadox’s answer, and other answers to similar questions elsewhere, test for vendor-prefixed names too, which may or may not be what you want (depending on whether your code uses them as well).

This only tests that the browser recognizes the property. The implementation may still be broken or incomplete.