First let me emphasise that I’m not a big fan of making up different styling rules for the various browsers. But in some (most) cases it’s an absolute necessity.
Before I continue I’d like to mention Dean Edwards IE7 JavaScript library which makes Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. That saves you the hassle of making tons of IE specific style sheets and embedding them using these conditional comments (bottom of page).
So with IE out of the way there’s still a few Opera and Safari “bugs” that may need attention. Instead of relying on JavaScript, which will be ignored by some browsers or users that have disabled Java, you may try this PHP approach that I successfully implemented on one of my sites today.
The simple approach
Detect the Safari browser and insert your css like this:
<?php if (strstr($_SERVER['HTTP_USER_AGENT'], 'Safari')) : ?>
<style type="text/css">
<!--
div#safari{your-css-rules-here}
-->
</style>
<?php endif; ?>
Detect the Opera browser and insert your css like this:
<?php if (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera')) : ?>
<style type="text/css">
<!--
div#opera{your-css-rules-here}
-->
</style>
<?php endif; ?>
Couldn’t be any easier than that could it 🙂 You may off course link to an external style sheet as well if you like. The above is just meant to illustrate the method. If you got an even easier way please feel free to share!
About Author
