A List Apart: Comments on: Keeping Your Elements’ Kids in Line with Offspring

Posted by: thirukumaran kubendran

2012-05-22T12:00:48+00:00

my i know what u used to mesure the time taken?

Posted by: Jacob Boomgaarden

2012-05-22T12:00:48+00:00

Could many of the concepts discussed be implemented using "jQuery":http://jquery.com/ as well?

Posted by: Ian Beck

2012-05-22T12:00:48+00:00

There's a missing closing

 tag immediately above the heading "All together now", which makes the last half of the article pretty hard to read.

In a more legitimate comment, I'd also be interested to see Offspring ported to something like jQuery or (my personal preference) Mootools.



Posted by: Alex Bischoff
2012-05-22T12:00:48+00:00
@thirukumaran: To measure the time taken, I created a one-off version of the code in which I checked the Date() object before and after processing the page; by subtracting one from the other, I had the elapsed time. (I then made use of OpenOffice Calc to help keep track of all the numbers and calculate the median values.)

@Jacob: Yeah, it may be possible to implement some of the functionality with other JavaScript libraries (such as jQuery). All the same, a more specialized library such as this one may be able to offer a lighter set of code than a general-purpose JavaScript library. (And, as it's tuned toward a specific task, this approach may offer performance advantages as well.)

(Just to be sure, I have nothing against jQuery or other JavaScript libraries—they can be quite handy for any number of tasks.)


Posted by: Ben Spaulding
2012-05-22T12:00:48+00:00
Fantastic work. Well done. Just one note -- it is my understanding and experience that Safari _does not_ implement @last-child@. 

@ "Jacob Boomgaarden":http://www.alistapart.com/comments/keepelementskidsinlinewithoffspring?page=1#2 : Yes, jQuery could certainly do this. However, many developers don't want and many projects don't need the overhead of that type of library. Offspring seems to be about doing one thing and doing it well. 


Posted by: Kari Pätilä
2012-05-22T12:00:48+00:00
Ben is right about Safari not supporting the last-child selector. 


Posted by: Alex Bischoff
2012-05-22T12:00:48+00:00
@"Ben Spaulding":http://www.alistapart.com/comments/keepelementskidsinlinewithoffspring?page=1#5 : Good catch. Indeed, Safari "hasn't implemented":http://www.quirksmode.org/css/firstchild.html support for last-child.


Posted by: Andrei Eftimie
2012-05-22T12:00:48+00:00
On mid-to-large projects, where using a complete library is needed, such a script would be useless.

And using jQuery for example, would yield much more flexible results, as its CSS selectors are very complete.

I am, by no means, trying to flame here, but i really don't see the point of a js library that does trivial things.


Wouldn't it be better to simply use pure js to accomplish this?
I mean, if you only need the first-child of the navigation, its much faster to do:

var nav-items = document.getElementById('nav').getElementsByTagName('li');
nav-items[0].class = 'first-child';




Posted by: Paul Waite
2012-05-22T12:00:48+00:00
Might be worth having another look at Dean Edwards’ ie7 (and now ie8) script. He’s done some re-writing, and I believe it performs a bit better now.

Of course, Offspring and ie7/8 solve different problems, albeit with some overlap.


Posted by: Fonts K
2012-05-22T12:00:48+00:00
Unfortunately Opera also does not support the CSS 3 selector :last-child so it only works in Mozilla based browers.


Posted by: ramon j
2012-05-22T12:00:48+00:00
sometimes for purely presentation-based pages i import jquery just to get around ie6's useless CSS implementation and to avoid using CSS hacks - so i commend you for fighting the fight. jquery is probably an overkill if you don't need help with extra behaviours, so i guess in this case offspring would be useful - but it's nice to know with jquery that you have extended options such as ajax, events and DOM manipulation, available when and if you need them.


Posted by: Martin Hintzmann
2012-05-22T12:00:48+00:00
The first-child selector is the only CSS-selector I have really missed for IE6, when creating horizontal menus.

A simple fix would be to use negative margin-left for IE6 served with the star-html CSS-hack.

* html ul#primary-navigation li {
  margin-left:-2px;
}


Posted by: Peter Gasston
2012-05-22T12:00:48+00:00
Here's a slightly outdated table of CSS 3 selector compatibility I made on CSS3.info a while ago:

http://www.css3.info/modules/selector-compat/

This article has reminded me that I need to update it!


Posted by: Josh Stodola
2012-05-22T12:00:48+00:00
What's up with that huge gap of white space after the first line of the first markup snippet?  That doesn't look very good.  Time to call the CSS doctor.


Posted by: Yann B
2012-05-22T12:00:48+00:00
I admit I read it in diagonal (I will read better later... ;) but this lib doesn't support :hover on none a elements correct? That would be a nice addition for drop downs etc... Or did I miss it?

Thanks!


Posted by: Kim Siever
2012-05-22T12:00:48+00:00
Great article.

I was wondering one thing though. How much longer will it be until everyone jumps off this screen-reader bandwagon. There are other platforms that limit displays. Some PDAs and most cellphones for example have poor CSS capabilities.

Can we be a bit more inclusive? Accessibility isn't just about blind people.


Posted by: Marius-Remus Mate
2012-05-22T12:00:48+00:00
Opera 9.5 beta has full support for CSS selectors "check it out":http://www.css3.info/fully-selected/


Posted by: Aaron Payne
2012-05-22T12:00:48+00:00
Sounds like it has got some positives and negatives.


Posted by: Jason Adams
2012-05-22T12:00:48+00:00
Nicely done, it's a simple library which performs one task well with minimal overhead.  Where some of the other commenters have suggested incorporating this functionality into larger libraries, I for one value the clean and minimal nature of Offspring; for projects where I need this functionality I can now get it cleanly without a load of other stuff being thrown in as well.


Posted by: Ian Beck
2012-05-22T12:00:48+00:00
I don't think people suggest porting to other libraries because they think that Offspring needs speed improvements.  I at least would love to see a Mootools port because I use Mootools for other things, and having the functionality that Offspring provides would be a nice bonus.

If all you need is CSS pseudo-classes, then clearly Offspring as a small, stream-lined, standalone library is superior.  However, if you're using a Javascript library for other programming already then integrating Offspring into it makes a lot of sense.


Posted by: Brian Flanagan
2012-05-22T12:00:48+00:00
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.


Posted by: Eddie Sutton
2012-05-22T12:00:48+00:00
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?


Posted by: Steven Simmons
2012-05-22T12:00:48+00:00
@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.


Posted by: Peter Bird
2012-05-22T12:00:48+00:00
In the section of the code in the optimization section, lastChildHashTable[1] and lastChildHashTable[2] both apply the _first-child_ class. Shouldn't _first-child_ only be applied for lastChildHashTable[0], or am I missing something here?


Posted by: Michael Jackson
2012-05-22T12:00:48+00:00
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. ;)


Posted by: Jon Harvey
2012-05-22T12:00:48+00:00
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.


Posted by: Matthew Hill
2012-05-22T12:00:48+00:00
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.


Posted by: Erik van Beek
2012-05-22T12:00:48+00:00
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.
 


Posted by: Erik van Beek
2012-05-22T12:00:48+00:00
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.


Posted by: Niels Matthijs
2012-05-22T12:00:48+00:00
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 :) 


Posted by: Tim Wright
2012-05-22T12:00:48+00:00
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


Posted by: Christian Schlensker
2012-05-22T12:00:48+00:00
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.


Posted by: Drew Diller
2012-05-22T12:00:48+00:00
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


Posted by: Drew Diller
2012-05-22T12:00:48+00:00
My motive for leaving my previous comment was that use of :first-child was the first-real world example in the article.


Posted by: Jordan Haven
2012-05-22T12:00:48+00:00
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.


Posted by: Andrej Telle
2012-05-22T12:00:48+00:00
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.


Posted by: Simon Hingley
2012-05-22T12:00:48+00:00
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.


Posted by: Kyle Weems
2012-05-22T12:00:48+00:00
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/




Posted by: Gretchen Zimmermann
2012-05-22T12:00:48+00:00
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