CODEWITHSUNDEEP
cross-browserbrowser-detection
patrick
patrick

Reputation: 9752

how to avoid browser sniffing by doing "feature" detection instead...?

So, let's say that I have an element that is inline-block. So this won't work with ie6 or FF2...

Say I compensate for it with css hacks and using -moz-inline-stack...

Now, let's say the inline-block element is also position: relative, so it is a container and has a child element with position absolute, top:0, right: 0.

In older browsers, the child element is in the top right of the screen, instead of in the top right of the inline-block container element...

Now, I can fix this by wrapping a div around my child element and make it 'position relative'... But I would like to avoid having unnecessary markup if possible.

Initially I wanted to do:

if (browser == ie6 || browser == ff2) {
  wrap child element with div for older browser..
} 
else {
  assume everything is fine
}

but I am thinking something like this would be better to do:

if (child element is at the top right of the screen) {
  wrap child element with div for older browser..
} 
else {
  assume everything is fine
}

So I am just curious, how people here would recommend this sort of thing.

Thanks!

Upvotes: 0

Views: 354

Answers (1)

bzlm
bzlm

Reputation: 9727

In general, Modernizr does browser feature detection best. Modernizr

adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.

While it may not be applicable to your particular scenario, Modernizr does CSS feature detection as well. For example,

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that!

Upvotes: 2

Related Questions