3

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?

Angela
  • 3,269
  • 3
  • 22
  • 24
  • possible duplicate of [How to use feature detection to know if browser supports border-radius? (Including IE9)](http://stackoverflow.com/questions/5277288/how-to-use-feature-detection-to-know-if-browser-supports-border-radius-includi) – mu is too short Sep 09 '12 at 04:13
  • 4
    `if(window.document.body.style['borderRadius'] !== undefined){ //border radius accepted.}else{ // no border radius}` – Ohgodwhy Sep 09 '12 at 04:14
  • I checked and I don't think it's a duplicate as I don't want to use Modernizr and that question's solution is modernizr. – Angela Sep 09 '12 at 04:16
  • Can you explain !== ? Is there a way I could change this so there's no else as in the question? – Angela Sep 09 '12 at 04:46
  • `!==` = "strict not equal". You can read more about all operators at [MDC](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators) – some Sep 09 '12 at 05:06
  • I'm curious to know what you do once you know a browser doesn't support border-radius? Haven't you already a fallback in CSS? – FelipeAls Sep 09 '12 at 07:57
  • what's wrong with using Modernizr? – Spudley Sep 09 '12 at 08:04
  • also, for IE `border-radius` support, have you considered using [CSS3Pie](http://www.css3pie.com/)? – Spudley Sep 09 '12 at 08:05

1 Answers1

4

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks. How can I put this into an if statement like the version in my question? – Angela Sep 09 '12 at 04:46
  • @Angela, the statement in the question does nothing, because the inner statement is commented out (with `//`). But the condition can be used this way: `if('borderRadius' in document.body.style) {...}` where `...` is the code you wish to run when `border-radius` is supported. To run some code when it is not supported, you can use `if(!'borderRadius' in document.body.style) {...}`. – Jukka K. Korpela Sep 09 '12 at 04:59
  • @JukkaK.Korpela For the negate you must add parentheses or you don't get what you expected: `if(!('borderRadius' in document.body.style)) {...}.` – some Sep 09 '12 at 05:02