IE6 / IE7 / FF CSS hacks no longer needed

I was developing a page, and it turned out to be quite a simple one. So i thought: “What the heck, i’m gonna style it with a stylesheet as much as possible”. Oh my, what a trouble i i turned myself into.
Just started, i remembered a book i once read (CSS: The Definitive Guide) and what my overall conclusion then was: don’t get started: you’ll wind up crazy supporting all browsers with all those hacks.

But as time goes by, you forget, and new possibilities arise. So yes, these days there are differences between browsers in interpreting CSS, but providing different styles for the mainstream browsers (which are IE6, IE7 and Firefox right now), is as easy as this:

<head>

<link href=”affinno.css” rel=”stylesheet” type=”text/css” media=”screen” />

 <!–[if IE 6]> <link href=”affinnoie6.css” rel=”stylesheet” type=”text/css” media=”screen” /> <![endif]–> 

 <!–[if IE 7]> <link href=”affinnoie7.css” rel=”stylesheet” type=”text/css” media=”screen” /> <![endif]–>

</head>

(funny to notice that in my case, the ‘normal’ stylesheet is for FireFox)

And the good part is: you only have to supply the styles you want to override in the IE stylesheets.
An example: you have a <H2> tag with a font-size of ‘medium’, which shows up good in FireFox but not so good in IE. Just put the IE variant of the <H2> tag in the IE stylesheet, and you’re done. It picks up every other style from the main stylesheet, and overrides the <H2> style with the special IE one.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s