0

I know that my site looks awful in IE7 and IE6. I just have got to admit it.
To find IE using conditional comments, is <!-- IF (IE) --> or something along those lines.

However. What if a user comes to my site with another browser, say Firefox 4 (which they still use at my school by the way), how can I detect that?

What I want to do is check if the browser supports border-radius, and if it doesn't, load the basic styles rather than the advanced styles. So how can I do this in javascript / conditional comments?

Thanks

ben
  • 635
  • 2
  • 7
  • 16
  • TMYK http://stackoverflow.com/questions/2400935/browser-detection-in-javascript – usernolongerregistered Oct 22 '13 at 15:30
  • 2
    "CSS3 compliance" is a much broader question than "does it support border-radius". Recommend refining your question. – T.J. Crowder Oct 22 '13 at 15:32
  • modernizr.js may help you – Fabrizio Calderan loves trees Oct 22 '13 at 15:32
  • For something like `border-radius`, go ahead and apply it. It won't interfere with border rendering. When a browser doesn't understand a style rule, it will ignore it. It's only when you need to apply conflicting rules that you need to look at conditional comments. – Mister Epic Oct 22 '13 at 15:32
  • @ChrisHardie Border-radius was only an example, because I know IE8, IE7 and IE6 dont support it, therefore I can load the basic styles for those browsers – ben Oct 22 '13 at 15:48
  • What is the end goal with this detection? So Browser X doesn't support property Y, what does that mean for your CSS? Targeting a specific browser has historically been done because of buggy implementations, not because they were unsupported. The number of CSS properties that will result in a broken design due to them being unsupported can be counted on one hand. – cimmanon Oct 22 '13 at 16:38
  • if browser doesn't support border radius, load basic styles, else load normal styles @cimmanon – ben Oct 22 '13 at 17:04
  • 1
    @ben You're seriously intending to use border-radius to determine whether or not a particular browser should be served a dumbed down CSS file instead of the real one? That's incredibly lazy. Support for a single property is not indicative of any browser's overall capability. – cimmanon Oct 22 '13 at 17:21
  • @cimmanon the dumbed down css file is relatively the same. it just corrects ie6,7, and 8 and for all I know, they are the only browsers which don't support border radius. – ben Oct 22 '13 at 19:27
  • The gist of what they're all saying is that browser detection isn't the way to go. – Qantas 94 Heavy Dec 01 '13 at 09:27

2 Answers2

2

You might look at using Modernizr, which can test border-radius and about a million other things.

Alternately, here's an isolated test just for border-radius (from this great list by kangax):

var hasBorderRadius = (function (){
  var docEl = document.documentElement, s;
  if (docEl && (s = docEl.style)) {
    return (typeof s.borderRadius == 'string'
      || typeof s.MozBorderRadius == 'string'
      || typeof s.WebkitBorderRadius == 'string'
      || typeof s.KhtmlBorderRadius == 'string');
  }
  return false;
})();

The hasBorderRadius flag will be true if it does, or false if it doesn't.

The same technique can be used for other new CSS3 properties (and also HTML things like placeholder on input elements), see the link above. But if you need more than just one, don't reinvent the wheel, use a tool.

T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
0

Don't worry about the browser. Worry about features. Use Modernizr and test for specific features. It will add classes to the html element that you can use in your CSS to style your site accordingly.

http://modernizr.com/

roblarsen
  • 452
  • 2
  • 7