Page 1 of 1

Pseudo. CSS.

Posted: Sun Jun 17, 2007 11:53 pm
by JellyFish
I remember reading once that pseudo css selectors in IE only work on anchor elements.

Is this true? If so then what version(s) of internet explorer and what pseudo selectors do this?

Posted: Mon Jun 18, 2007 12:16 am
by superdezign
Anything IE6 and below. Pseudo elements aren't that important anyway. Hover is all you need, and all you REALLY need to do is differentiate links from regular text for the user. Anything else is probably overkill.

Posted: Mon Jun 18, 2007 1:07 am
by JellyFish
Anything else is probably overkill
What do you mean?

Posted: Mon Jun 18, 2007 2:10 am
by matthijs
I wouldn't call it overkill. Pseudo-selectors are very useful. Too bad IE doesn't play along.

For a good overview see Roger's article on css 2.1 selectors

Posted: Mon Jun 18, 2007 6:26 am
by superdezign
Anything done in pseudo classes can be done either through regular CSS or JavaScript. Any "flashy" features that you want implemented through pseudo selectors should be done with JavaScript, as only JavaScript enabled users would need to see it anyway. This includes div hovers and focus changes.

As for things like the first letter (nice for articles where you float the first letter and make it really large), you can dynamically surround the first letter with a class that does so. I believe that there was an ability to indent as well (:first-line or something), but it's generally not needed. Paragraph elements are well-separated.

Just don't try to depend on them because they are not dependable. A nice alternative is to try this:

Code: Select all

div#selector:hover,
div#selector.hover {
color: #FFF;
}

Code: Select all

var selector = document.getElementById('selector');
selector.onmouseover = function(){ this.className = 'hover'; }
selector.onmouseout = function(){ this.className = ''; }

Posted: Mon Jun 18, 2007 6:57 am
by matthijs
Sorry superdezign, I totally disagree with you. Pseudo classes can be useful for styling certain elements without having to mess up your HTML by inserting useless spans, classes and divs. The fact that IE6 doesn't support them is Microsoft's fault. You can use pseudo selectors in almost all modern and future browsers.

Just don't use them for something which is essential to all your visitors. But I think we can agree that styling the first letter of a paragraph isn't that essential, isn't it? Someone using IE6 (by choice or not) doesn't miss a thing, while people using FF or another browser get the full thing. Progressive enhancement, is what it's called.

Posted: Mon Jun 18, 2007 7:20 am
by superdezign
Agreed. Use them, but provide a JavaScript alternative for IE users (unless you don't care about them, which is hard to do considering there's so many).

Posted: Mon Jun 18, 2007 10:17 am
by Luke
For the record, IE6 does understand :first-line and :first-letter.

Posted: Mon Jun 18, 2007 1:43 pm
by JellyFish
Apple's new design uses pseudo selectors for their navbar. http://apple.com
VbblӘ,s

Posted: Mon Jun 18, 2007 2:24 pm
by Ambush Commander
I just run all my HTML through a post-processor that adds classes based on an XPath expression. :?

Posted: Mon Jun 18, 2007 3:47 pm
by superdezign
JellyFish wrote:Apple's new design uses pseudo selectors for their navbar. http://apple.com
VbblӘ,s
Their browser support's it. :-p
You don't see Microsoft using them. ^_^ (Well, maybe by now.)

Posted: Mon Jun 18, 2007 3:52 pm
by JellyFish
superdezign wrote:
JellyFish wrote:Apple's new design uses pseudo selectors for their navbar. http://apple.com
VbblӘ,s
Their browser support's it. :-p
You don't see Microsoft using them. ^_^ (Well, maybe by now.)
Apple.com looks fine in IE, from what I can see.

Posted: Mon Jun 18, 2007 4:09 pm
by superdezign
The pseudo elements as well? I wonder which they used. I'd look, but I don't feel like it yet. Us 56k-ers procrastinate when it comes to visiting sites. :-p