Pseudo. CSS.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Pseudo. CSS.

Post 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?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Anything else is probably overkill
What do you mean?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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 = ''; }
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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).
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

For the record, IE6 does understand :first-line and :first-letter.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Apple's new design uses pseudo selectors for their navbar. http://apple.com
VbblӘ,s
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

I just run all my HTML through a post-processor that adds classes based on an XPath expression. :?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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
Post Reply