Cross Browser Detection Using CSS Hacks Explained

Quicker download time, easier site management as well as improved accessibility make CSS more attractive for web developers. However, there are still some problems that keep the developers from using CSS to control the layouts of the site. Let’s try to solve some of them.

Mad with CSS?

Today there are no problems concerning a lack of browser support for CSS because ‘version 5’ browsers began to offer a full implementation of CSS. The problem is in interpreting CSS commands in different ways that is a usual thing for browsers. With such tricks appeared, many web developers prefer to switch back to pixel-perfect table layouts. But wait! Just learn more about CSS and different browser interpretations stop to be a mystery for you. What is more, there are not so many of them and using various hacks makes you life easier.

How CSS Hacks Turn ‘Mad With’ Into ‘Mad About’

CSS hacks work by sending one CSS rule to the browser or several browsers for your choice and the second CSS rule that overrides the first command to the other browsers. In case you have two CSS rules within the same selectors, the second CSS rule will almost always take priority.

For example, you need the space between a page’s header area and content to 25px in Internet Explorer. It may be great for Internet Explorer, but for Opera, Safari and Firefox this gap is not appropriate and you want to make a 10px gap instead. Here are two CSS rules that help you to perform the best in all browsers:

#header {margin-bottom:25px}
#header {margin-bottom:10px}

In this case the first command is for IE while the second is for all other browsers. However, there is no good news by now, because all browsers can understand both CSS rules. In other words, they all use the second rule, because it comes after the first.

And now a CSS hack should be inserted to hide the second CSS rule from IE. In such a way, IE won’t know that the rule exists and just will use the first CSS rule. Seems to be quite simple? Let’s find out the details.

Browser Detection for Internet Explorer

If you need to send different CSS rules to IE, you can use the child selector command that IE can’t understand. This command consists of two elements one of which is the child of another. Thus, html>body refers to the child body with parent html.

Here is the example of the header margin that illustrates our CSS command:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

Because of the html>body CSS command, IE can’t understand the second CSS rule and ignore it using the first rule. All other browsers will use the second rule.

Browser Detection for Internet Explorer 5

IE5 requires different CSS rules because of its misinterpretation of the box model. For example, padding and borders are not included when we specify the width of some element in CSS. IE5 incorporates them both into the width value and, as a result, elements widths are smaller in this browser.

Here is the CSS rule that results in a width of 10em for all browsers except IE5 where the width will be 5em. IE5 just incorporate two sets of padding and border, on both the left and right, when calculating the width with the following rule:

#header {padding: 2em; border: 0.5em; width: 10em}

You can solve this problem using box model hack invented by famous Tantek Çelik. For browser detection and sending different CSS rule to IE5 you should use the following:

#header {padding: 2em; border: 0.5em; width: 15em;
voice-family: “\”}\””; voice-family:inherit; width: 10em}

Don’t ask how it works. Just use it. Need details? IE5 will use the first width value of 15em. As we have mentioned above, 5em of it will be taken up by two sets of padding and border (for the left and for the right). That will cause the width of 10em in IE5.

The 15em value will be overridden by the second value of 10em by all other browsers except IE5, because it can’t understand the CSS command that comes immediately after all those squiggles.

However, nothing is perfect and the box model hack is not an exception to this rule. For example, it can ‘kill’ the next CSS rule in IE5. But there are a lot of other box model hacks that can help you.

Browser Detection for Internet Explorer on the Mac

IE on the Mac is also quite capricious with CSS. Thus, many developers code sites in such a way that they work in IE/Mac. Of course, it may not offer the same level of design or functionality that is offered with other platform or browser, but still it is a good solution.

To hide a command with IE/Mac hack is quite simple. Just wrap a set of stars and dashes around CSS rules:

/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

These commands will be ignored by IE/Mac. Such CSS hack is rather useful if some area of the site doesn’t work properly in IE/Mac. If it is something unimportant you can hide it from IE/Mac just like this:

#noiemac {display: none}

/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id. The second CSS rule displays this section (can’t b seen by IE/Mac)

Browser Detection for Netscape 4

Netscape 4 has limited support for CSS. Thus, making a CSS layout for this browser can be quite a difficult task. Today most web developers prefer to hide the CSS file from this browser. You can do this with the @import directive to call up the CSS document:

@import url(cssfile.css);

Thus, Netscape 4 can’t understand this @import directive and will display a non-styled version of the site.

Make Sure to Check Your Site in the Different Browsers

This is a must. Just download the major browsers such as Firefox, IE5, IE6, Opera and Safari and check your site on PC and Mac. There are quite a lot of sites offering you their services in case you don’t have access to a Mac, so search for them.

The other main rule in case certain page elements appear differently in different browsers is stop worrying… and start making some trial-and-error changes playing with CSS rules. Anyway, you can fix it up with CSS hacks that always ready to help you make your site look great.