This looks fantastic and something that I’d love to play around with sometime. That said, I can’t imagine using it seriously any time soon. I don’t think the benefits outweigh the headaches that it’ll undoubtedly somehow cause.
Copy & paste the code below to embed this comment.
Eddie Sutton
In your section about the horizontal navigation you mention, “It just doesn’t work in IE 6.” Isn’t that a deal breaker? When client sites have 30% or more of their audience using IE 6, is it reasonable to create something that doesn’t work for those folks? Then you toss-in the Safari issues – more of a deal breaker?
Copy & paste the code below to embed this comment.
Steven Simmons
@Eddie: I don’t think you read the article. The whole point was to make advanced selectors work in IE6, and other browsers. IE6 was a deal breaker (for CSS selectors), now its not. And “The fastest overall browser in the tests was Safari 3.x”, so I’m not sure what Safari issues you are talking about.
Copy & paste the code below to embed this comment.
Peter Bird
In the section of the code in the optimization section, lastChildHashTable1 and lastChildHashTable2 both apply the first-child class. Shouldn’t first-child only be applied for lastChildHashTable0, or am I missing something here?
Alex: Wonderful job on this library. I like the fact that it stands alone without support from any underlying framework. I’m not a framework hater by any means, in fact I have a few favorite frameworks of my own, but it’s nice to see a script that can stand on its own for those projects where a complete framework is overkill.
I also like how thorough the library is. Those nth-child selectors will come in very handy. Up to this point, I’ve been using PHP on the back-end to add a special alt class to odd elements.
Once again, well done on this library and keep up the good work. Oh, and try to ignore the nay-sayers…they’re just jealous. ;)
This comes at a good time for me. Trying to improve the CSS for the Wordpress backend and very annoyed that they don’t provide enough CSS hoooks in their tables.
With nth-child support I can get around that problem without having to edit the core templates, and I didn’t want to use a full library such as jQuery to create the same effect due to speed issues. Wordpress’ backend can be pretty slow already.
Great article, and all the comments in the .js file are very helpful too!
However, something kept bothering me. I’m not a webdeveloper, but I wonder if JavaScript is the language to do this. In my view JavaScript is designed to do behavioural tasks in a browser. XSLT is the language that’s really good at finding the position of an element in the DOM and at creating mark-up.
So I did an experiment and wrote a small client-side XSLT (60 lines) that renders the same result (I think) as this JavaScript library in full mode.
It doesn’t run flawless yet in Internet Explorer but I believe this is the way it should be done (in a perfect world :)
I’ve written about my solution: http://banji.nl/experiments
I’d be interested to get some feedback and hear about other experiences with client-side XSLT.
A couple of people asked in the comments why Internet Explorer (and Safari) support first-child but not last-child. This is probably because first-child was part of the CSS2.1 recommendation and last is CSS3.
Copy & paste the code below to embed this comment.
Niels Matthijs
While I appreciate libraries like this, I will only use them in contained environments (where you know people will have javascript. If not, I prefer to find solid css fixed.
As for the css discussed in this article, I do have a few things to say:
using descendant selectors is great, it can be pretty dangerous since the > combinator is not supported in IE6 either. This means that an ul li statement will hit on all li elements. This is annoying when nesting lists.
you are right that the pipe symbol does not belong in the html source, but if you’re using a pipe anyway it’s better to
have it inserted through css (generated content). Again, this is not supported by IE (yet) but it’s really the way to go, as this generated content can be styled to your liking. Much easier than fixing background images over and over again. If you’re really hardcore, you can have it inserted through the css content and use conditional comments for IE. Though that is overkill alright :)
here’s a weird fact:
IE6 & IE7 implement the CSS3 selector “text-overflow” but Firefox and Safari don’t (haven’t cared to check it in Opera).
http://www.css3.info/preview/text-overflow/
Also, this seems like an awful lot of JavaScript for not much benefit you can have clean markup and utilize the selectors without all the extra javaScirpt. I’ll give it a try though.
Copy & paste the code below to embed this comment.
Christian Schlensker
Of the three forward thinking methods, I like the third one the best, (just use the offspring classes). The reason I like this one is because if I do eventually want to remove offspring I can just do a find/replace on those classes.
I’m currently working as stylesheet guy on Slantly.com – I developed a method for making pipe-separated horizontal lists with no requirement of :first-child (so no IE problem, either) => http://www.dillerdesign.com/css/cookbook/links_pipes_list_elements.html
Copy & paste the code below to embed this comment.
Jordan Haven
Interesting script, Alex. I’m playing around with it right now on some dev sites at work :)
I just wanted to let you know that there is a small error in the “Applying Offspring to a specific section of the DOM” section. Where you have “Offspring.init();” and “Offspring.traverseChildren(tableNode);”, those first “O“s should be lowercase.
It took me a few minutes to figure out why I was getting “Offspring is not defined” errors, but a lowercase “o” sets everything right.
Copy & paste the code below to embed this comment.
Simon Hingley
I’m not qualified to speak on the script aspects of the article as I’m only just dipping my toe into javascript but the section of the article that suggests using an image to separate the items of a horizontal list bothers me a little. I like the reason for using it but if the viewer is using a large font size rather than a screen reader; the list-item markers won’t increase in size as the font increases. Would it not be an idea, especially as horizontal lists are so useful, to lobby for either a vertical line or for customised markers to be included as a list-item marker.
The only part of offspring that I haven’t liked is the need to use class notation in your stylesheets instead of pseudo-classes, which means when browser support catches up with CSS3 (sometime around the turn of the next century, I’m sure) you’d have to go through and fix all your stylesheets. So I’ve devised a little script that you can run with offspring called pseudonut. It basically lets you use the css3 pseudo-classes in your stylesheet, and it converts them into the class notation for use with offspring. When CSS3-compatible browsers become commonplace, all you’d have to do is drop the scripts and you’re ready to go.
You can check it out at http://www.cssquirrel.com/2008/03/02/solving-impatience-with-pseudonut/
Copy & paste the code below to embed this comment.
Gretchen Zimmermann
For me this is perfect – and I’m loading offspring and the class notion styles via a conditional statement in the index file, so there is no extra overhead for any other browser than IE6, and no need to upgrade the CSS later
39 Reader Comments
Back to the ArticleBrian Flanagan
This looks fantastic and something that I’d love to play around with sometime. That said, I can’t imagine using it seriously any time soon. I don’t think the benefits outweigh the headaches that it’ll undoubtedly somehow cause.
Eddie Sutton
In your section about the horizontal navigation you mention, “It just doesn’t work in IE 6.” Isn’t that a deal breaker? When client sites have 30% or more of their audience using IE 6, is it reasonable to create something that doesn’t work for those folks? Then you toss-in the Safari issues – more of a deal breaker?
Steven Simmons
@Eddie: I don’t think you read the article. The whole point was to make advanced selectors work in IE6, and other browsers. IE6 was a deal breaker (for CSS selectors), now its not. And “The fastest overall browser in the tests was Safari 3.x”, so I’m not sure what Safari issues you are talking about.
Peter Bird
In the section of the code in the optimization section, lastChildHashTable1 and lastChildHashTable2 both apply the first-child class. Shouldn’t first-child only be applied for lastChildHashTable0, or am I missing something here?
Michael Jackson
Alex: Wonderful job on this library. I like the fact that it stands alone without support from any underlying framework. I’m not a framework hater by any means, in fact I have a few favorite frameworks of my own, but it’s nice to see a script that can stand on its own for those projects where a complete framework is overkill.
I also like how thorough the library is. Those nth-child selectors will come in very handy. Up to this point, I’ve been using PHP on the back-end to add a special alt class to odd elements.
Once again, well done on this library and keep up the good work. Oh, and try to ignore the nay-sayers…they’re just jealous. ;)
Jon Harvey
Does anyone know any reason what-so-ever why Microsoft would choose to implement first-child and not last-child for IE7? I’m perplexed.
Matthew Hill
This comes at a good time for me. Trying to improve the CSS for the Wordpress backend and very annoyed that they don’t provide enough CSS hoooks in their tables.
With nth-child support I can get around that problem without having to edit the core templates, and I didn’t want to use a full library such as jQuery to create the same effect due to speed issues. Wordpress’ backend can be pretty slow already.
Erik van Beek
Great article, and all the comments in the .js file are very helpful too!
However, something kept bothering me. I’m not a webdeveloper, but I wonder if JavaScript is the language to do this. In my view JavaScript is designed to do behavioural tasks in a browser. XSLT is the language that’s really good at finding the position of an element in the DOM and at creating mark-up.
So I did an experiment and wrote a small client-side XSLT (60 lines) that renders the same result (I think) as this JavaScript library in full mode.
It doesn’t run flawless yet in Internet Explorer but I believe this is the way it should be done (in a perfect world :)
I’ve written about my solution: http://banji.nl/experiments
I’d be interested to get some feedback and hear about other experiences with client-side XSLT.
Erik van Beek
A couple of people asked in the comments why Internet Explorer (and Safari) support first-child but not last-child. This is probably because first-child was part of the CSS2.1 recommendation and last is CSS3.
Niels Matthijs
While I appreciate libraries like this, I will only use them in contained environments (where you know people will have javascript. If not, I prefer to find solid css fixed.
As for the css discussed in this article, I do have a few things to say:
have it inserted through css (generated content). Again, this is not supported by IE (yet) but it’s really the way to go, as this generated content can be styled to your liking. Much easier than fixing background images over and over again. If you’re really hardcore, you can have it inserted through the css content and use conditional comments for IE. Though that is overkill alright :)
Tim-Wright
here’s a weird fact:
IE6 & IE7 implement the CSS3 selector “text-overflow” but Firefox and Safari don’t (haven’t cared to check it in Opera).
http://www.css3.info/preview/text-overflow/
Also, this seems like an awful lot of JavaScript for not much benefit you can have clean markup and utilize the selectors without all the extra javaScirpt. I’ll give it a try though.
my2cents
Christian Schlensker
Of the three forward thinking methods, I like the third one the best, (just use the offspring classes). The reason I like this one is because if I do eventually want to remove offspring I can just do a find/replace on those classes.
Drew Diller
I’m currently working as stylesheet guy on Slantly.com – I developed a method for making pipe-separated horizontal lists with no requirement of :first-child (so no IE problem, either) => http://www.dillerdesign.com/css/cookbook/links_pipes_list_elements.html
Drew Diller
My motive for leaving my previous comment was that use of :first-child was the first-real world example in the article.
Jordan Haven
Interesting script, Alex. I’m playing around with it right now on some dev sites at work :)
I just wanted to let you know that there is a small error in the “Applying Offspring to a specific section of the DOM” section. Where you have “Offspring.init();” and “Offspring.traverseChildren(tableNode);”, those first “O“s should be lowercase.
It took me a few minutes to figure out why I was getting “Offspring is not defined” errors, but a lowercase “o” sets everything right.
Andrej Telle
Has anyone done a proper testing of Dean Edwards IE7 beta 3 script and if so, give some feedback.
I would very much like to use it, however heard a couple of annoying things such as frozen screens and very slow loading times.
Help would be appreciated. Thanks.
Simon Hingley
I’m not qualified to speak on the script aspects of the article as I’m only just dipping my toe into javascript but the section of the article that suggests using an image to separate the items of a horizontal list bothers me a little. I like the reason for using it but if the viewer is using a large font size rather than a screen reader; the list-item markers won’t increase in size as the font increases. Would it not be an idea, especially as horizontal lists are so useful, to lobby for either a vertical line or for customised markers to be included as a list-item marker.
Kyle Weems
The only part of offspring that I haven’t liked is the need to use class notation in your stylesheets instead of pseudo-classes, which means when browser support catches up with CSS3 (sometime around the turn of the next century, I’m sure) you’d have to go through and fix all your stylesheets. So I’ve devised a little script that you can run with offspring called pseudonut. It basically lets you use the css3 pseudo-classes in your stylesheet, and it converts them into the class notation for use with offspring. When CSS3-compatible browsers become commonplace, all you’d have to do is drop the scripts and you’re ready to go.
You can check it out at http://www.cssquirrel.com/2008/03/02/solving-impatience-with-pseudonut/
Gretchen Zimmermann
For me this is perfect – and I’m loading offspring and the class notion styles via a conditional statement in the index file, so there is no extra overhead for any other browser than IE6, and no need to upgrade the CSS later