CSS hacks & browser detection
Share & bookmark this article
You can also tell a friend about this article right now!
More and more web developers are ditching tables and coming round to the idea of using CSS to control the layout of their site. With the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management, why not?
The problem with CSS
Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use.
Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. Fear not though, as you learn more about CSS you'll gradually start to understand the different browser interpretations and realise that there aren't really that many.
How browser detection using CSS hacks works
Advert: Internet marketing training courses
Come on one of our excellent training courses and become a usability, accessibility or CSS guru!
- Writing for the web training
- Web usability training
- Usability testing training
- Web accessibility training
- Information architecture (IA) training
- Intermediate CSS training
- Advanced CSS training
- PPC training
- SEO training
Courses are held every month in London and are taught by usability and accessibility professionals.
The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.
Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it's affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:
#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}
The first command is intended for IE, the second for all other browsers. How does this work? Well, it won't at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.
By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won't even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!
Browser detection for Internet Explorer
To send different CSS rules to IE, we can use the child selector command which IE can't understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.
Using the example of the header margin, our CSS command would be:
#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}
IE can't understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.
Browser detection for Internet Explorer 5
It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it's very necessary. This is due to IE5's misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren't included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.
The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):
#header {padding: 2em; border: 0.5em; width: 10em;}
The solution to this problem? Perform browser detection and send a different CSS rule to IE5:
#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}
IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.
The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can't understand CSS commands with empty comment tags either side of the colons. It doesn't look pretty but it does work!
Browser detection for Internet Explorer on the Mac
Quite simply, IE on the Mac does strange things with CSS. The browser's become somewhat obsolete as Microsoft aren't going to be bringing out an updated version. As such, many web developers code their CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced functionality or design. Provided IE/Mac users can access all areas of the site this is seen as a suitable way of doing things.
To hide a command using the IE/Mac CSS hack is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:
/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */
IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there's a certain area of the site not working properly in IE/Mac. If that section isn't fundamental to being able to use the site, you can simply hide it from IE/Mac like so:
#noiemac {display: none}
/* Hide from IE-Mac \*/
#noiemac {display: block;}
/* End hide */
The first CSS rule hides the entire section assigned the noiemac id (i.e. <div id="noiemac">). The second CSS rule, which IE/Mac can't see, displays this section.
Browser detection for IE 4 and Netscape 4
Version 4 browsers have limited and somewhat erratic support for CSS. Making a CSS layout in these browsers, whose market share has now slipped well below 1%, can be extremely challenging. It's become common practice nowadays to completely hide the CSS file from version 4 and earlier browsers. This can be achieved using the @import directive to call up the CSS document:
<style type="text/css">@import "styles.css";</style>
Version 4 (and earlier) browsers will display a non-styled version of the site as they can't understand this @import directive.
Checking your site in the different browsers
At the time of writing, the major Internet browsers include IE5, IE6, Firefox, Opera and Safari. (Check out TheCounter.com for up-to-date browser statistics.) You can download all these browsers, and a number of more obscure ones, at the Evolt browser archive.
Ideally you should check your site in all these browsers, on both PC and Mac (except IE6 and Safari, which are only available on PC and Mac respectively). If you don't have access to a Mac you can get a screenshot of your site on Safari by running it through Dan Vine's iCapture or you can pay to use Browsercam which offers a more extensive screen capturing service.
Conclusion
On the whole, modern browsers have very good support for CSS - certainly good enough for you to be using CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don't worry too much if you don't know the reason why - if you can fix it up with these CSS hacks then your web pages should look great across all browsers!
This article was written by Trenton Moss, director and founder of the user experience consultancy, Webcredible. They run a range of Internet marketing training courses, including 2 very good courses on SEO training and PPC training.