CSS Browser Detection - The complete guide
Different browsers, different CSS interpretations! There will
be a time when you'll need to hide some CSS rules from a
particular browser, or even all the CSS file! In this articles
I'll try to compile all possible types of Browser detection
technics and provide examples. So let's start with the easier
one!
Browser detection for Netscape
Netscape 4 is probably the dumbest browser when it comes to CSS
support, extremely limited and many times erroneous! As the
browser's market share of Netscape is below 0.5% it became
natural to hide the CSS file from it! The method used for this
is the import directive that will make the browser to display a
version of the site completely without CSS.
Here's the directive you have to call: (style
type="text/css")@import url(wise-designscom.css);(/style)
Browser Detection for IE Mac computers
This browser "died" when Microsoft announced there would be no
more updated versions of it. Now this browser fell in desuse and
there are a wide range of CSS technics that IE/Mac doesn't
interpret well! Therefore many webmasters started to code their
CSS sites so that they would work correctly on this browsers.
Contrary to Netscape users, these weren't neglected.
The hide technic:
/* Hide from IE-Mac */ #header {padding-bottom:3em} #footer
{padding-top:1.5em} /* End hide */
IE/Mac won't see these commands but will display the content
even without those rules! Now... if you have a specific area of
your site that isn't vital to your visitors you can just hide it
completely from this browser without having the trouble to even
try and make it look better within the possible! Here's how:
#noiemac {display: none}
/* Hide from IE-Mac */ #noiemac {display: block} /* End hide */
The first rule hides it all from IE/Mac (e.g content to hide here!
)
The second CSS ruledisplays the section cause Ie/Mac can't see
it!
Browser Detection for Internet Explorer
For this one we'll have to use the "child selector". This rule
consists of two elements, the parent and his child! Let it be
html>body, body being the child of html the parent! As IE don't
understand it, it will come a time when this knowledge will come
to be handy!
The typical example of the header margin:
#header {margin-bottom:4em} html>body #header {margin-bottom:1em}
IE will use the 1st rule cause it's blind to the 2nd and all
other browsers will use the 2nd one!
Browser Detection for Internet Explorer 5
At first this one was strange to me! How the hell we have to set
different rules for different VERSIONS of the same browser?
Well, the truth is that IE5 doesn't get right the box model!
When we specify the width of an element in CSS, that doesn't
include the values of padding and borders. IE5 include these
values in the width, which leads to widths become smaller in it!
Let's see the following example:
#header {padding: 2em; border: 1em; width: 12em}
For all browsers this width would be 12em! For IEe the width
would be 6em!! God! How is that possible? Simple: 12em (Width) -
4 (padding left + padding right) - 2 (border left + border
right)!
Is there any solution for this problem? Sure! A clever guy,
named Tantek