Quick Tip: How to Target IE6 and IE7 with Only Two Characters

agreed with eben all the way around.

however, with regard to “the real world” there is a responsibility of account managers/executives to inform clients that there is no need to have the site look 100% similar across various browsers. if this is stated up front, more flexibility will be established when the design goes into production offering latitude to the developers.

if you disagree, name me one reason why it would matter? consider the permutations of just the first couple of popular OS/Browsers

MS # of OS (7, Vista, XP, etc) x versions (pro, home, etc) x browser types (IE, FF, Chrome, Opera, etc) x versions (1 through infinity) and then potentially multiply that by 2 based on 32bit/64bit of the OS.

— thats just Microsoft and in a real quick and dirty way

Ok there are some valid points, but here are my two cents.

I’ve worked as part of a team of 12 – 18 Java developers on a large component based web application. There are hundreds of classes, tons of views, loads of css files that style these components.

Components are loaded in and out of pages at will, so maintaining ie6, ie7, ie8 style sheets with css files becomes very unwieldy and ultimately slows you down. Everything you need to change for IE is right there in the one spot.

What Jeff talks about here is not new. I remember seeing an excellent webcast from one of the Frontend Leads at Yahoo which talks about OOP based CSS and this css filtering technique. Look it up!

If your web app is small and you want to keep atop of your high horse then sure use conditional css. If it grows and there are many different types of pages with different elements then css filters are easier maintain.

I employ the later technique now. No client is going to care if your css doesn’t validate.

So why don’t you just do this:

.element{background:blue} /*All browsers*/
* html .element{background:green} /*IE 6*/
*+html .element{background:red} /*IE 7*/

Validates and all that jazz :)

Time saver.

Thanks for the tip, Jeff

The 2 big reasons NOT to use this hack are:

1 – It’s not valid.

So? A hack like this will be needed in approximately .05 percent of your entire CSS sheet if you have to help out the IE’s. Lighten up!

2 – Someday you will have to remove it.

From what? From your 9 year old website? By then you will have moved on or replaced the site 3 times over. Lame reason!

True, the css validator does display it as an error, but if you look after the “error” you reallise that is NOT an actuall error. If the validator would not take in consideration the _ and * and woud not generate an error than you people will still say that is an error?

I use this hack myself.

If IE is throwing everything around, using conditional CSS is what I opt for, if its one of two things a little hack didn’t do anyone any harm ;)

I just found this and it saved me a LOT of aggravation. I can’t use conditional comments for browser-specific stylesheets. I’m developing a site in asp.net using an App_Theme, so the default stylesheet is dynamically embedded LAST in the head tag, there’s no (easy) way to insert another stylesheet after the default.

Also, I had serious issues with positioning in IE 6, different issues in IE 7, and no problems whatsoever in IE 8. This hack is EXACTLY what I was looking for. I only need to apply the CSS hacks to a couple of elements. I think this is a very sound fix to an annoying problem.

THANK YOU!

Great post. I’m not big on debate, both sides make a lot of sense, but this will be great for debugging and testing things in the development stage. Thanks!

MySpace pages already display differently across browsers because all comments and the # character are stripped from your code.

If you want to make anything at all neat you need to know what’s really going on in the browser. If we’re concerned about IE6, I don’t want to hear anything at all about MySpace being obsolete and “nobody using it”. What you mean is “I don’t use it, and I’m elitist. The universe revolves around what I can see from my desk.”

The intimidating google ranking of MySpace pretty much forces any emerging artist on to MySpace music because it will always rank higher than their own homepage, and often lower than their own reviews.

If you don’t want to use this tip, don’t, but it certainly is justified in appearing on this site as a “quick tip”. It does exactly what it claims, it targets the two browsers mentioned with two characters and doesn’t effect any other browser.

If you’re concerned about future IE versions reinterpreting * and _, the obvious choice is to just tell IE that it should behave like IE7 now and forever.

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

As far as validation arguments go, the whole reason this hack works is because it fails validation so completely that browsers completely ignore the whole line of code. It’s malicious compliance at it’s finest.

The “point” Jeff makes in these comments is that code is “good” fulfils your goals in the best way possible, your goals shouldn’t bend to fit the current paradigm of “good” code.

Deciding that producing 100% valid code is a goal in itself seems contrived to me. It’s like saying that if I have to hang a painting on the wall, my goal isn’t actually to hang the painting, my goal is to swing a hammer at a nail. My friend offers me an electric screw driver and a screw to make the job easier, with better results and I tell him to bugger off because I’m all about that hammer right now.

If we’re talking about what makes code “good” or “bad” then conditional comments should never validate anyway. Do you all really feel it’s “good” that conditional comments successfully convince the most popular browser in the world to interpret logical conditions in HTML? or to interpret any comments at all for that matter? it’s another bug/fix marketed as a “feature” by Microsoft and picked up on by developers of validation software because of supply/demand market forces (if they don’t validate Microsoft’s code, regardless of how non-standards compliant, or ideologically backward, they lose market share).

Now, Jeff’s example here lets me avoid redundant HTTP requests, that usually take 300-900ms each when you’re in Australia (incidently, envato is a Melbourne based company), hosting in America, thanks to latency. Jeff’s example also lets me cache as much of my stylesheet as possible, and reduce filesize a little by minimizing the characters used.

Thanks Jeff!!

So, avoiding loaded statements that just get people’s backs up, like “pride in my work”, I can show my clients a real performance increase. Most of Australian internet users are stuck on dialup or ADSL1 if they’re anywhere more than a few hundred km’s from a capital city, and we’re apparently introducing a country-wide internet censorship which won’t help things much. While validating code and following “best-practices” usually helps me greatly in reaching the goal of fast pages, if it makes my page slow down to include external stylesheets, It’s no longer academic, I simply can’t afford to do that.

Oh man I’m glad I found this. You just made my day – re-tweeted and posted on my Facebook to get it some more love.

Thanks again for this, I really appreciate it!

Crash

Works a treat as a hack for IE7. VS doesn’t like it but it works, thanks :o)

DRINK MY SEMEN, Y’ALL