ansaurus

Question

Can we use CSS 2.1 selectors in practice?

Answer 1

+1 A:

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.

apphacker 2009-04-28 07:02:45

Thanks for pointing to that document... The CSS world could be so much cleaner if we could use all its goodness.

Gidon 2009-04-28 07:17:14

Answer 2

A:

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.

Soul_Master 2009-04-28 07:12:51

Answer 3

A:

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.

Terry_Brown 2009-04-28 07:15:04

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 2009-04-28 07:17:44

Answer 4

+1 A:

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 2009-04-28 07:26: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 2009-04-28 07:56:11

Answer 5

A:

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 2009-04-28 08:17:26

Answer 6

A:

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 2009-04-28 08:22:27

Answer 7

+1 A:

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 2009-04-28 12:22:02

I realise rounded corners have nothing to do with CSS selectors, but I think it's a good example of the concept

roryf 2009-04-28 12:30:11

ansaurus

tags:

views:

answers:

Can we use CSS 2.1 selectors in practice?

related questions