Lee Munroe » ie6

A better way to deal with Internet Explorer conditional styles

Lee — Mon, 30 May 2011 09:01:03 +0000

For a few years now I’ve been using one or two conditional stylesheets to help with cross browser support, or in other words ‘to help fix Internet Explorer’. But recently I’ve been trying out Paul Irish’s technique.

HTML5 Boilerplate

If you haven’t already go over to HTML5 Boilerplate and take a look at the notes. In particular look through the code for each file.

HTML5 Boilerplate is a bare bones framework for any web project, with all the best practice resets, styles, htaccess settings etc. in place.

I’ve been using bits and pieces of the HTML5 boilerplate for a while now and one of the things I like in particular is how it deals with conditional styles for Internet Explorer.

IE conditional stylesheets

Most of the sites I work on usually include something like this:

This was to fix anything that looked out of place in IE6, usually fixes for pngs, floats, widths, positioning etc.

In some cases the site might have 2 or 3 of these conditional stylesheets for IE7 and IE8 fixes also.

Adding conditional classes to the html tag

Recently I’ve started using something like this instead:

This adds classes to the HTML tag in the different versions of IE, enabling you to target them with different CSS rules.

If the user isn’t using Internet Explorer then it only recognises the html lang=”en-GB” tag.

So you can do stuff like this in your core stylesheet:

fieldset legend{background-color:#f6f6f6;}
.ie6 fieldset{position:relative;}
.ie6 fieldset legend{position: absolute;top: -.5em;left: .2em;}

This works better for a couple of reasons:

Less HTTP requests (calling 1 stylesheet rather than 2 or 3)
It keeps your CSS rule in one place

What do you think, nice technique?

Internet Explorer Users Don’t Care About Rounded Corners

Lee — Mon, 19 Oct 2009 14:30:39 +0000

Internet Explorer users don’t care about rounded corners. Bold statement? Perhaps. But recently I’ve taken this approach to a few designs as I’m tired of having to use some sort of rounded corner hack to support IE. It’s a lot easier to just use the CSS 3 declaration.

If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.

Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:

CSS 3 rounded corners

div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS 3 text shadow

div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}

CSS 3 box shadow

img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}

But how do you deal with clients?

This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.

If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.

Conclusion

The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.

What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.

Do you support IE6?

Lee — Mon, 29 Jun 2009 00:29:46 +0000

Us designers love a good rant about IE6. And why not? Everything looks perfect in Firefox, Safari, even IE7 and 8. Then you open up IE6 and everything is a mess. In an ideal world no one would use IE6 anymore (and all browsers would render websites the same way).

But at the same time I do get sick of IE6 rants and campaigns. This isn’t a rant, it’s more of a ‘be aware that it still exists and some reasons why it still exists‘ post. A recent blog post of mine researching popular design blog analytics showed that there are still 3% of users using IE6. And that’s in the field of design. There is more than likely a lot more than that in terms of the World Wide Web.

Why people are still using IE6

They use a company computer and have no control over upgrades
They’ve popped into an Internet cafe and have to use what’s available
It works for them so why change
They don’t realise there are other browsers available
They like it

So rather than campaigning to get people to upgrade their browser, shouldn’t we just deal with it and support it?

But what does ‘support’ mean?

I think Andy Clarke hits the nail on the head in his killer contract:

We will also test to ensure that pages will display visually in a ‘similar’, albeit not necessarily an identical way, in Microsoft Internet Explorer 6 for Windows as this browser is now past it’s sell-by date.

I think this is the best way to support IE6: it doesn’t have to be pixel perfect but the content should be accessible and it should look similar.

What I’ll usually do before launching a site is check to make sure all the links are visible and clickable and all the content is accessible in IE6. I’ll even spend 30 minutes to make sure it looks ‘half decent’ with regards to IE6 not supporting PNG transparency, which involves replacing the PNG backgrounds with GIFs via an IE6 specific stylesheet.

Supporting IE6

To specifically target IE6 users with special instructions or styles, use the following code.

Anything placed between the special tags will only be recognised by IE6.

Interesting IE6 campaigns

Bring down IE6

Dear IE6

IE6 Update

Save IE6

Universal IE6 css

Help with common IE6 problems

Do you support IE6?

Hopefully over the next year or two we will be seeing less and less of IE6, especially if Microsoft encourage users to upgrade to IE8.

Do you ‘support’ IE6? Do you check to make sure your sites work? Do you spend much time fixing it or making it pixel perfect?

Lee Munroe » ie6

A better way to deal with Internet Explorer conditional styles

HTML5 Boilerplate

IE conditional stylesheets

Adding conditional classes to the html tag

Further reading

Internet Explorer Users Don’t Care About Rounded Corners

CSS 3 rounded corners

CSS 3 text shadow

CSS 3 box shadow

But how do you deal with clients?

Conclusion

Do you support IE6?

Why people are still using IE6

But what does ‘support’ mean?

Supporting IE6

Interesting IE6 campaigns

Bring down IE6

Dear IE6

IE6 Update

Save IE6

Universal IE6 css

Help with common IE6 problems

Do you support IE6?