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: 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 resources anyone can think of! |
|
|
|
|
Create
PDF eBooks Instantly!
Still No PDF Download
Option For Your Customers Because Your Brain Just Shrivels
Up When You Try To Buy/Use Adobe Acrobat software?
Now, You Can Point And Click Your
Way To Instant, Hassle-Free PDF Publishing ... Using One
of The 33 Free To Nearly Free Tools!
Order Now and Receive Master
Resell Rights, Keep 100% of The Profits!
(This Offer May End At Any Time)
|
|
|
|
Easy
PDF Publisher's Toolkit
Create
PDF Files From Any Printable Document in a Few Simple
Clicks!
"Finally
There's an EASY Way To
Publish Stunning PDF Files,
Without Wasting a Lot of Time and Money"
|
|
|
|
|
 |
Translate
Page!
    |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Newsletter |
|
Sign-Up for The Business
Junction Newsletter and Get "FREE" Newsletter Sign-Up Software, Specials Updates, Product
Updates and MUCH MORE!  |
|
|
|
|
|
|
|
|
