We’re stuck with Internet Explorer for the next 3 years bare minimum, most likely 6. Let’s start thinking about how we can move forward.
We now have a method and an example. View my latest Zen Garden entry, mnemonic for the example; carry on reading for my method, which I dub Mozilla/Opera/Safari Enhancement, or MOSe for short.
MOSe relies on IE6’s inability to pick up child and adjacent selectors, or > and + as they’re known by. As well, some basic CSS3 selectors are becoming more and more usable in everything but IE (see CodeBitch’s CSS3 support chart) so we can use these to our advantage as well.
The key to the method is somewhat similar to how NN4 page design developed as CSS became more prevalent — after creating a basic, functioning page in IE, you add extra functionality with these selectors. While IE can’t render them, at least it doesn’t make a half-hearted attempt to and come short. And that’s way better than what we had to put up with to make things work in NN4.
I’ll leave application of MOSe as an exercise to the reader. Pick apart mnemonic and see a few ways it can be done. You can start at the spec, but for the sake of your Googling, here is a non–exhaustive list of CSS2 selectors you’ll want to pay special attention to, thanks to their support in MOS and non–support in IE:
- Child Selector, eg.
- Direct or Adjacent Sibling, eg.
#footer + .bottomLink
- Attribute Matching, eg.
- Attribute Value, eg.
acronym[title="Document Object Model"]
- Attribute Substrings, eg.
And a few CSS3:
- Substring Prefix, eg.
- Substring Suffix, eg.
- Substring Match, eg.
There are bound to be more that are MOSe–friendly.
:focus, and possibly
:not look promising, although the latter is buggy in IE5.
The point is to provide IE a way out by using CSS it has no hope of understanding. This is the only way we can keep moving forward in the next few years. Let’s embrace it.
(okay, I realize I say right on the Garden that it’s not about “the latest bleeding–edge tricks,” but you can see how this is an exception. As well, I realize that some things might be funky on Mac browsers — I hear it renders alright, but I can’t guarantee there’s no weirdness going on.)