CSS Browser Detection - The complete guide by Afonso Ferreira Gomes
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 <div id="noiemac">content to
hide here!</div>)
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 elik
(you'll hear of him a lot if you read many tutorials of CSS! This is kind of
the most important discovery since the wheel on CSS community!) invented the
box model hack
He said that to make browser detection work , and send a different CSS rule to
IE5 you would use the following:
#header {padding: 3em; border: 1em; width: 18em; voice-family: ""}"";
voice-family:inherit; width: 12em}
IE5 will use the first width value of 18em! 6em of which will be taken up by
the padding-left + padding-right + border-left + border-right. This would
ultimately give the element a width of 12em in IE5.
The 18em value will then be overridden by the second width value of 12em by all
browsers except IE5, which, for some reason, can't understand the CSS command
that comes immediately after all those squiggles. It doesn't look pretty, but
it does work!
I hope this articled helped you understand the different situations related to
browser detection in the CSS world! At first it was confusing to me but with
2/3 hours of reading anyone would be able to understand this ... and understand
well! For more quality articles and tutorials please visit my site at
http://www.wise-designs.com ! I'll be expecting you there!!
About the Author
About the author Afonso Ferreira Gomes is the webdesigner for Wise Designs
Webmasters at http://www.wise-designs.com
. The site's objective is to help any webdesigner in his work by providing
templates, tutorials, articles, scripts, graphics and all the Subscriptions anyone
can think of!
|
