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

measure page rendering time

Tue, 05 Feb 2008 05:07:08 GMT

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

jQuery as another option?

Tue, 05 Feb 2008 06:02:01 GMT

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

Typo in the article's code

Tue, 05 Feb 2008 06:43:27 GMT

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.



Re: Measuring Page Rendering Time / Re: jQuery as Another Option
Tue, 05 Feb 2008 06:51:33 GMT
@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.)


On Safari and do-it-all libraries, respectively
Tue, 05 Feb 2008 07:00:59 GMT
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.


Another one on Safari
Tue, 05 Feb 2008 07:15:57 GMT
Ben is right about Safari not supporting the last-child selector.


Re: On Safari
Tue, 05 Feb 2008 07:17:18 GMT
@"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.


Using jQuery
Tue, 05 Feb 2008 09:26:18 GMT
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';


Untitled
Tue, 05 Feb 2008 09:56:17 GMT
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.


Untitled
Tue, 05 Feb 2008 10:24:47 GMT
Unfortunately Opera also does not support the CSS 3 selector :last-child so it only works in Mozilla based browers.


Untitled
Tue, 05 Feb 2008 12:35:30 GMT
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.


negative margin-left for IE6
Tue, 05 Feb 2008 13:30:13 GMT
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;
}


Thanks for the reminder!
Tue, 05 Feb 2008 13:47:01 GMT
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!


White Space
Tue, 05 Feb 2008 14:44:56 GMT
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.


:hover?
Tue, 05 Feb 2008 15:14:47 GMT
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!


Untitled
Tue, 05 Feb 2008 16:29:26 GMT
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.


actually... Opera
Tue, 05 Feb 2008 16:55:51 GMT
Opera 9.5 beta has full support for CSS selectors "check it out":http://www.css3.info/fully-selected/


Interesting. . .
Tue, 05 Feb 2008 17:19:56 GMT
Sounds like it has got some positives and negatives.


Untitled
Wed, 06 Feb 2008 02:20:29 GMT
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.


Porting isn't a replacement
Wed, 06 Feb 2008 06:28:19 GMT
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.


Lovely, but...
Wed, 06 Feb 2008 15:02:15 GMT
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.


Little Deal Breakers?
Wed, 06 Feb 2008 19:32:33 GMT
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?


No deal breakers
Thu, 07 Feb 2008 03:14:27 GMT
@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.


Code typo in optimization section?
Thu, 07 Feb 2008 15:55:53 GMT
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?


Wonderful Job
Thu, 07 Feb 2008 15:58:05 GMT
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. ;)


Amazed by Microsoft yet again...
Fri, 08 Feb 2008 15:15:58 GMT
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.


Useful in Wordpress
Sat, 09 Feb 2008 18:50:49 GMT
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.


Alternative: use XSLT to create CSS pseudo-classes
Sat, 09 Feb 2008 19:40:36 GMT
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.


first, but not last-child
Sat, 09 Feb 2008 21:05:56 GMT
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.


Some css tidbits
Tue, 12 Feb 2008 10:45:33 GMT
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 :)


Funny fact
Tue, 12 Feb 2008 15:13:33 GMT
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


Forward Thinking
Thu, 14 Feb 2008 16:35:41 GMT
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.


Piped separators: low tech solution
Thu, 14 Feb 2008 19:27:49 GMT
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


Should have elaborated...
Thu, 14 Feb 2008 19:29:12 GMT
My motive for leaving my previous comment was that use of :first-child was the first-real world example in the article.


Small Error
Fri, 15 Feb 2008 14:48:38 GMT
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.


Dean Edward's IE7
Mon, 25 Feb 2008 18:32:38 GMT
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.


List item markers
Tue, 26 Feb 2008 12:21:58 GMT
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.


Untitled
Mon, 03 Mar 2008 18:40:15 GMT
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/


Thanks a TON!
Fri, 12 Sep 2008 05:14:01 GMT
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