Now first of all I have to say that when you are not doing anything really crazy when it comes to XHTML and CSS, you should be able to avoid or work around common browser specific glitches. Things like Internet Explorer's double margin, for instance, can often be avoided by giving the parent block a padding. Switching between absolute positioned blocks, relative positioned blocks and combinations of the two also lets you work around common issues.
At some point, however, you just don't have the ability to write (standards adhering) XHTML and CSS and have all browsers display it properly. In my experience the most troublesome browsers are Internet Explorer and Safari. The first because it does a lot of things differently, the last because it has few, but really weird quirks.
Talking to Internet Explorer
For Internet Explorer I use conditional comments to serve stylesheets that correct my CSS rules for one or all versions of Internet Explorer:
-
<!--[if IE]>
-
<link rel="stylesheet" href="msie.css" type="text/css" media="screen" />
-
<![endif]-->
The concept is simple and effective. Specially formatted HTML comments make browsers other than Internet Explorer ignore the containing code. Internet Explorer evaluates them to decide whether or not to ignore their content. This particular conditional comment will add an extra stylesheet for all versions of Internet Explorer. It is also possible to target certain versions or ranges of versions. Everything you need to know you can read at MSDN.
Talking to Safari
For Safari, I use the following javascript to write an extra stylesheet link to the document:
-
<script type="text/javascript">
-
<!--
-
var detect = navigator.userAgent.toLowerCase();
-
if (detect.indexOf('safari') + 1) {
-
document.write('<link rel="stylesheet" href="safari.css" type="text/css" media="screen" />');
-
}
-
-->
-
</script>
Very little research went into this one, but it works. I rarely use it. If I do it is to correct something funny, like correcting a height for one pixel that magically appears in Safari and things like that.
Keeping track of your exceptions
At some point the things you apply fixes for will no longer be broken. Safari will be updated and Internet Explorer 7 will soon hit the public through Windows Update. Always make sure you easily track what exceptions you have per project so you know which projects to check when a new browser version is released. Even better, apply conditional comments to just the current version of IE and older and extend the Safari detection to include a version check.
Not just for CSS
Both examples above can be used to insert XHTML anywhere in the page. We frequently use the Safari detection to display messages to users. For instance to let them know their Safari browser will not support the richt text editor of our CMS and point them to Firefox for the Mac. Similarly we use the noscript tag to alert users when certain Javascript is really essential for something to function.
Leave a reaction
Keep it decent and to the point.