0

The main culprit behind this question is of course IE6, (almost) everybody agrees that a website should support IE6 since it is used by more than 15% of the visitors (for Yahoo it is still an A-Graded browser).

IE6 doesn't support CSS 2.1, so can we use CSS 2.1 selectors in our stylesheets? Let me give an example:

<body>
    <div class="header">
    </div>
    <div class="content">
        <h1>Title</h1>
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </div>
    <div class="footer">
    </div>
</body>

My css could look like this:

body > div {width: 760px;} /* header content and footer = 760px wide */
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin */

But IE6 won't understand this, so anyway to be browser compatible I should write it like this:

.header, .content, .footer  { width:760px; }

And probably I have to give the first paragraph some class name and define it like that in my css. I could make a IE6 stylesheet specific that defines those rules, but that seems so double up (and still doesn't help in the case of the first paragraph needing a class name)...

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Gideon
  • 18,251
  • 5
  • 45
  • 64
  • Not everyone agrees that a website should support IE6. For example, I don't. – Bjorn Apr 28 '09 at 06:59
  • Everyone who's not a developer agrees that you should support IE6.... Save the developers! – womp Apr 28 '09 at 06:59
  • Web developers may despise IE6 (and IE in general, for that matter). But no matter how much we may hate IE6, there's still the fact that a large percentage of people still use it… – hbw Apr 28 '09 at 07:02
  • I agree with htw, we all hate IE6, but can't exclude those "poor" people from using our products. – Gideon Apr 28 '09 at 07:06
  • IE 6 will never go away until people stop using Windows XP! If we all stopped supporting it users would be forced to upgrade. – teh_noob Apr 28 '09 at 07:09
  • I agree with @htw. It's not about developer's personal dislikes. It's about the number of people who still use IE 6. – Cerebrus Apr 28 '09 at 07:09
  • So now try to answer the question, should we create code that is supported by the new browsers, and create "ugly" redundant code that is supported by ALL browser (since it is supported by all browsers the ugly code becomes redundant). Or should we just go for the ugly code... – Gideon Apr 28 '09 at 07:15
  • I don't get it. Is IE6 faster/less resource intensive? Why would poor people prefer IE6? Hasn't IE7 come with Windows XP since SP3? And even if your computer came with IE6, it's free to upgrade. – Calvin Apr 28 '09 at 07:18
  • Laziness. Lots of IT departments in particular display this laziness. – Chuck Apr 28 '09 at 07:37
  • Laziness? Have you ever *tried* to get anything through corporate change control? There's no practical excuse for anyone not suffering a locked down desktop config though, IE7 has been a priority XP update pretty much since it was released. Now, if MS would only do the same with IE8, I might have some prospect of stopping screaming in the foreseeable. – Pete Jordan Apr 28 '09 at 07:50

7 Answers7

2

If you're serious about supporting IE6 100% then you should avoid using CSS that wont work with it. One of the reasons for using those fancy selectors is to make your life easier, but it's not going to make your life easier if you have to rewrite them anyway for IE6. Finally, fancy selectors like that are slow in Firefox, so maybe just avoid them all together.

Bjorn
  • 69,215
  • 39
  • 136
  • 164
  • Thanks for pointing to that document... The CSS world could be so much cleaner if we could use all its goodness. – Gideon Apr 28 '09 at 07:17
1

If you approach your site design from a progressive enhancement perspective then you should be fine, as more modern browsers will just get a better experience than those using ie6. If you are just looking to cut corners or save time developing, then you have to make a choice if ie6 users are important for your site or not.

Ronny Vindenes
  • 2,361
  • 1
  • 18
  • 15
  • This. It's what we do, though in practice I have far more problems with javascript and the deficiencies in the IE<8 DOM than in CSS incompatibilities. – Pete Jordan Apr 28 '09 at 07:56
1

I think the concept of "supporting" IE6 is the wrong idea, if we say no to that are we just not going to allow IE6 users access to our site and content? Of course not. So the question really is, how much time do you want to spend making the experience of your site the same for IE6 as other browsers.

My own standpoint is that I "support" IE6, in that a user of IE6 will be able to access all a site's content and all it's features, but they might not get the same visual or interaction experience as a Firefox 3 user.

So to answer your question, yes we can use CSS 2.1 and 3.0 selectors to achieve certain affects, as long as the content is still there for IE6 and with an acceptable visual appearance. What's acceptable will depend on the project (and likely the client!).

Your example was a good showcase of this:

p { margin-top: 10px; }
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin

Here IE6 will still get the paragraph content, and there will still be all important white-space between them, they just won't get the reduced spacing on the first one. That's a fair compromise IMO for the reduced clutter in your HTML.

Another good example would be rounded corners. You can use -moz-border-radius and -webkit-border-radius to get rounded corners in Firefox and Safari, enhancing the visual experience of your site, but IE users still get the content albeit with plain old square corners (and then there are plenty of JavaScript solutions out there to achieve this for people with JavaScript enabled).

This would all come under the heading Progressive Enhancement

roryf
  • 29,592
  • 16
  • 81
  • 103
  • I realise rounded corners have nothing to do with CSS selectors, but I think it's a good example of the concept – roryf Apr 28 '09 at 12:30
0
  • Javascript like JQuery.
  • CSS Hack. But I don't suggest it. Because it isn't W3C standard.
  • CSS Classname. By using CSS Classname replaces CSS Selector.
user229044
  • 232,980
  • 40
  • 330
  • 338
0

Your browser audience will dictate what you support as you've already stated, even a 'techy' website like w3schools still reports the IE6 market share at 17% for march.

That said, if you're going to support it, obviously you need alternatives.

I read another intersting thread about targetting just IE8 yesterday on stackoverflow, and I suspect supporting each browser will be easier if you can target them. I'm in a .net environment and use the approach that someone posted about half way down that thread so that my CSS selectors can very readily become:

body > div {width: 760px;}
.IE6 div.header, .IE6 div.content, .IE6 div.footer { width: 760px; }

Obviously you would find your own way of targetting browsers, but the CSS will equate to something similar.

Community
  • 1
  • 1
Terry_Brown
  • 1,408
  • 10
  • 24
  • and in answer to your follow up question, I'd think the client and target market dictates really. That ugly redundant code you mention is something web devs have lamented over for years (IE6 should have been taken out long ago and shot), but in delivery of client sites, if the market share of IE6 dictates that it's necessary, then we must do it unfortunately. – Terry_Brown Apr 28 '09 at 07:17
0

It's not to the developer but to the site owner to decide whether to ignore IE6. You should give the site owner the stats for that specific site and then the decision should be made.

If you, or the owner, decide to NOT sacrifice the IE6 folks then it makes no sense whatsoever to use those fancy selectors. There is big downside and no upside as of yet.

allesklar
  • 9,506
  • 6
  • 36
  • 53
0

For every IE6 user on mine site I got big red alert saying, their browser is ancient, and they should download a real browser, like Firefox ;] That's the solution. If webmasters won't say it to users, who will?

Thinker
  • 14,234
  • 9
  • 40
  • 55