TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

MOSe

June 25, 2003

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.

I’ve been considering enhancing my work somehow for browsers that can support it, and I’m not the only one. Steve Champeon, Mike Pick, and CodeBitch have all discussed the idea.

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. #content>.introduction
  • Direct or Adjacent Sibling, eg. #footer + .bottomLink
  • Attribute Matching, eg. img[border]
  • Attribute Value, eg. acronym[title="Document Object Model"]
  • Attribute Substrings, eg. acronym[title="Object"]

And a few CSS3:

  • Substring Prefix, eg. a[href^="http://www.mezzoblue"]
  • Substring Suffix, eg. a[href$="mezzoblue.com"]
  • Substring Match, eg. a[href*="zoblue"]

There are bound to be more that are MOSe–friendly. :root, :first-child, :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.)


Reader Comments

June 25, 01h

This new design is really cool! How about a print-stylesheet?

Ethan says:
June 25, 01h

This sounds like a prime idea; and using that Newtedge tip to hide CSS from IE might be the perfect way to do it. Maybe we could see the revival of some IE-targeted “ahem” text blurbs, so popular during the once-great browser upgrade campaign?

June 25, 01h

Pretty much what I was getting at Ethan - though I wasn’t around when this happened the first time, and I would imagine that the ‘scale’ of the situation is much different now… I just have this feeling that something is doable.

Dave, I should have said this earlier but it slipped. That’s an awesome new design you’ve got up on the site. Very well done!!

Dave S. says:
June 25, 01h

Thanks Anne! I hoped someone would come through with something nice and tidy like that.

Ethan - tempting, but not a good idea.

Ethan says:
June 25, 01h


Letís think more long-term on this. Destructive reasoning against IE isnít going to solve any of our problems, itíll only work against us. Instead, letís address why a user might want Opera, or Mozilla. Sell a new browser to them by luring, donít shame them into upgrading.


Dave – couldn’t agree more. I don’t think we need to (or can, or should) start griping about IE to our users; rather, educating them on the advantages of other browsers seems to be the best way out of this. Maybe instead of hijacking users’ pages with garish “upgrade now” messages in 400% red type, we could simply style an unobstrusive paragraph visible only to IE users? Something along the lines of “have you considered…”?

Dunno…haven’t figured out the best way around this whole issue yet.

June 25, 02h

I’m in agreement with the marketing move - In some places people like to be internet savvy: in Canada, imagine a Globe and Mail article, outlining the benefits of using Moz -> firebird or Opera.

What I see here is that the opportunity exists for something to happen - I don’t think that people are as complacent as we think.

Dave S. says:
June 25, 02h

Ethan, masadelante, your hearts are in the right place. It’s tempting to think that a pro-MOS campaign is the right thing to do, especially when considered against an anti-IE campaign. And it seems there are a lot of developers who would agree with you.

Except what developers think in this case doesn’t matter much. I’ve been through this already - a post on Web Graphics sparked it, my response and then my pitch sparked enthusiastic support, which caught the attention of Zeldman who gave very considered and valid reasons against such a campaign, which made sense, although it was frustrating to acknowledge. Bryan Bell picked up on it recently, and there are plenty of other designers out there who feel the same way, but as Jeffrey said - no sense in tilting at windmills. Apple has millions to throw at their unsuccessful Switch campaign, and we don’t have nearly that budget.

The major browser vendors will settle this one, not the developers. The best thing you can do is support their efforts. Buy a copy of Opera and put your money where your mouth is. Pitch in a hand over at Mozilla. Get your friends and family to buy from Apple so they can run Safari. Help them, don’t help the web development community. That’s the way to make a difference.

June 25, 03h

One of the easiest ways is to just do *>.whatever { }, when selecting anything other than the HTML element.

Ethan says:
June 25, 03h


The major browser vendors will settle this one, not the developers.


Dave – makes a lot of sense to me. At the end of your day, I think you’re right…which is probably why this whole issue has been so frustrating of late. For all its drawbacks, the BUC at least afforded us the chance to act — but as you say, being stuck with IE6 is worlds better than NS4.

And thanks for showing how you’ve come to your current thinking, too; I’d seen Zeldman’s post, but had missed out on your previous articles until today. Seeing the whole thread was really helpful.

June 25, 04h

Hmm… what Ethan said. ;-]

June 25, 04h

>how we can move forward.

Lets make some noise!
IE6 the new NN4!

>enhancing my work somehow for browsers that can support it,

Zeldman mentioned in an article ‘somewhere’ (there has been so many lately) that getting designers to change the way they designed was one of the successes of the Wasp camapaign.

Is this torch worth bearing? (do we have to sit and code for 98% marketshare IE6 for another >3 years?)

June 25, 07h

Dave,

mnemonic is a GREAT approach.
I’d call this sort of a thing WYGIWYD (What You Get Is What You Deserve!)

Regards

Mark says:
June 25, 07h

I have long said that IE 5 was the Netscape 4 of a new generation. That was before IE 6 stagnated, of course. This is great stuff!

Question: is there any way of hiding entire stylesheets from IE 6? That might make it easier to manage. Have a “basic” for NN4, “modern” for IE, and “advanced” for Mozilla/Safari/Opera/OmniWeb/whatever.

June 25, 07h

Mark, it isn’t very nice, but…

<![if !IE 6]><style …></style><![endif]>

15
Claire says:
June 25, 07h

Hi Dave that latest garden entry is superb!

I had taken your no (or not too much) CSS2 too literally, and had thought that there wasn’t too much scope to get away from the “blocky” look..

Mark re>> hiding stylesheets
I don’t know about hiding them, but using an IE conditional statement to call an IE stylesheet might be one way to “keep it seperate” although the cascade would still have to be observed. So calling it before importing the “advanced one” might be one way if main elements are similar.. alternatively calling it after the @import could lend a way to make a totally different page for it..

Claire

Lea says:
June 25, 08h

Wow. That design is rather amazing. You even animated your images! KA-razy!

Arikawa says:
June 25, 08h

Dave, I like it too, but…

Wasn’t one of the requirements for admission that the CSS validates?

mnemonic is generating several errors. i don’t know if there is a different version of the CSS validator that would allow some of the new CSS rules you are using to pass. regardless, to link to a different validator would require changing the HTML anyway, which is not allowed.

while i agree that pushing the envelope is a great way to move things forward, i don’t think that the simple tenets of the CSS garden project should be ignored to do so.

Dave S. says:
June 25, 09h

Great tips, Tom. That should pretty much answer Mark’s question - either use the xhtml hack to selectively load the .css, or @import an additional .css that uses the *>element selector on everything. Obviously you could drop it if you were using one of the other methods of selection.

Something like so:

*>body {style}
ul+li {style}
*>#element {style}
*>#anotherElement {style}
a[href^=”http://”] {style}

and so forth.

Arikawa - the W3C validator doesn’t yet check for CSS3. It’s a double-edged sword.

Seamus says:
June 25, 11h

>Wasn’t one of the requirements for admission that the CSS validates?

You need to tell the validator to use CSS 3. I forget all the details on how but for my site I use http://jigsaw.w3.org/css-validator/check/referer?profile=css3 . So I think you just need to add ‘profile=css3’ to the url.

The idea of enhancing the page for Mozilla/Opera/Safari has been something I started doing in small ways about nine months ago. One of the first things I did was used :hover on the breadcrumbs; normally the text would be washed out but when you mouse-over the text would become much bolder in color. I think it is a nice effect because it lets the main text stand out more on the page.

20
stylo~ says:
June 25, 11h

>>which caught the attention of Zeldman who gave very considered and valid reasons against such a campaign

Personally, I couldn’t see anything other than a bad argument in Zeldman’s comments: “you won’t eliminate IE, therefore do nothing.” That’s a good argument?

It’s very easy using advanced css to add a suggested browser link (along with all your other suggested links and whatever else you suggest on your site) for lesser browsers, not just IE, and a thank you for good browsers. Code on webgraphics thread or better one below. No effort required. Won’t change the world, but nice to help a bit.

******************
.browserthanks{
display:none;
}
span[class=browserask]{
display:none; /*ie gags if added to above entry*/
}
span[class=browserthanks]{
display:inline;
}

thank you messageteaser blurb?
***********

I like the idea of advanced selectors adding to a page, and use them myself. I don’t wish to be a stick in the mud, but what am I missing on the zen entry? I see the two columns on the right vs. one column, and some image replacement which I imagine can be done for lesser browsers anyway. Actually looks a bit nicer to me in IE ;-)

21
stylo~ says:
June 25, 11h

Let’s try that again:

******************
.browserthanks{
display:none;
}
span[class=browserask]{
display:none; /*ie gags if added to above entry*/
}
span[class=browserthanks]{
display:inline;
}

[span class=”browserthanks” title=”message explaining a bit so webmasters see and copy”]thank you good browser message [/span][span class=”browserask”]Teaser [a href=”fav browser link” title=”whatever”]blurb?[/a][/span]
******************

June 25, 12h

There is a more gental aproach to hide css from MSIE6.0. Ironically it uses the same hiding method which was used for NN4.x: Hide CSS from IE up to version 6.0. Newt Edge has a lot more intresting CSS tricks.

Bertilo says:
June 26, 01h

stylo~:


browserthanks{
display:none;
}
[…]
span[class=browserask]{
display:none; /*ie gags if added to above entry*/
}
span[class=browserthanks]{
display:inline;
}
[span class=”browserthanks” title=”message
explaining a bit so webmasters see and copy”]thank
you good browser message [/span][span
class=”browserask”]Teaser [a href=”fav browser link”
title=”whatever”]blurb?[/a][/span]


The problem is that all of the text will be displayed in browsers that ignore CSS (Lynx, Opera with styles turned off…).

Not a good idea, if you ask me…

24
William says:
June 26, 02h

Easter Eggs are the Key

Do extra special things with the features that IE doesn’t support (design, extra pics, neat layouts) but keep your site plain but functional in IE. If this becomes a design trend, it will reward the people who download and use browsers more compliant than IE. If there is an incentive for grandma & junior to want to get more functional browsers then either Microsoft will have to keep up or other standards compliant browsers will gain usage.

June 26, 03h

I definitely agree that putting those little enhancements for “advanced” browsers is the key. Things won’t look bad in IE, but they’ll look better in Moz/Safari/Opera. Another tactic I’ve installed in some of my newer sites is a little ASP.NET user control that checks to see if the browser is IE/NN4/Opera6 and displays a small “text ad” encouraging windows users to check out the great features of Opera 7 and MozFirebird, and Safari for mac users. I like the ASP.NET control because it dosen’t render text that would show up on CSS-ignoring browsers, and I can customize the ad for mac or pc. I’ll share it if people would like.

26
stylo~ says:
June 26, 07h

>>The problem is that all of the text will be displayed in browsers that ignore CSS (Lynx, Opera with styles turned off…).

Yeah, but I guess the practical response is: who cares? 0.03% of visitors will see the two messages side-by-side. No big deal. It’s not navigation or anything critical.

>>Do extra special things with the features that IE doesn’t support (design, extra pics, neat layouts) but keep your site plain but functional in IE.

I think this is mis-stated somewhat. The idea is not, in my opinion, to go out of the way to add things that IE won’t see. It is more so to code as you can, taking advantage of css2, then make it work as well as possible in IE by adding in IE hacks via extra styles in conditional comments, js add-on for min-max, etc. , which can all be easily updated/removed later. No more god-awful hacks in your style sheet! Write it all nice and clean, then do some IE clean-up in separate files.

Mike says:
June 27, 09h

Dave, I just wanted to weigh in and say ‘nice work’ for making a go against teh browser hegemony. :D

It’s funny, I’ve been talking a lot, as you mentioned, but I’ve mostly been refining my dumbing-down-for-IE habits so I can write CSS the first time and make it work without hacking after the fact, since I write for Gecko/standards first generally - such is the lot of the Mac user.

I even like the name, although it isn’t quite accurate - a substitution needs to be made for Mozilla because Gecko is engine that is actually powering the browsers. GOSe?

Either way, good work. Step two is documenting and beating the drum.

June 27, 10h

IE6 doesn’t have as much unicode support in class names as it should, for example:

p { color: red }
.\b { color: green }

<p class=”^K”>This text should be green

29
Alfonso Martinez says:
July 01, 10h

In order to avoid showing both texts to browsers with CSS disabled, we just can use generated content like this:


.thankyou:before {
content:”Thank you for using this nice browser”;
}
span[class=”upgrade”] {
display:none;
}

[span class=”upgrade”]Have you tried Mozilla?[/span]
[span class=”thankyou”][/span]

DutchCelt says:
July 02, 04h

I’ve been using this MOSe trick for a few months now on my own site. It works like a dream. Now I’m looking at adding multiple selectors in a single class attribute. This is an option to make pages more semantic and to use the selectors more as objects rather that being context specific.

Example:
.big {font-size:30px;}
.red {color:red;}
[p class=”big red”]test text[/p]

Seamus says:
July 07, 08h

I have been working on an a menu that is hidden by default but when you hover over the label you get a menu bar with graphical icons that grow and overlap the other icons when you hover over them. You need use a current Gecko browser.

http://moronicbajebus.com/playground/cssplay/top-menu/

stef says:
August 25, 01h

RE: Easter Eggs are the Key

William has something here.

I’ll have to think of it. For instance I did a FIR image replacement for my h1, and even found out how to mend PNG alpha transparency in IE.

Yet what about having a normal h1 in IE and styling it properly only in MOS-like browsers…

I’ll have to think of it (note to self: repeat four times a day for a few days, and then really make something out of the idea)

October 28, 09h

Should CSS3 selectors be used at all? Is the spec finalised?

I’m a bit concerned about us getting into a Netscape 4 scenario, where the old spec is implemented but the actual spec is not.

Dave S. says:
October 28, 09h

It’s perfectly safe to use CSS3 selectors in browsers that support them properly - the Selectors module became an official recommendation in April 2003.

October 28, 09h

Cool.

Where would I find out what of CSS3 is now a recommendation? I looked a while ago on the W3 site and came up empty.

Dave S. says:
October 28, 09h

http://www.w3.org/Style/CSS/current-work - scroll down to ‘Roadmap’.

October 28, 10h

So what’s the difference between a candidate recommendation, a proposed recommendation and a W3C recommendation?

I’m confused.

Ben Nolan says:
December 19, 06h

Css3 :hover support for ie6:

http://blue.ripcord.co.nz/~ben/css3/

;)