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 ArticleTim-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