Using DOM Scripting to Plug the Holes in CSS

Last month I gave a presentation entitled Using DOM Scripting to Plug the Holes in CSS at London’s @media conference. A recording is now available through the conference podcast.

As usual, I’ve posted a transcript of the recording. I’m not sure how much sense it will make without the slides, so you might want to have those open in another browser window.

Posted by Jeremy on Thursday, July 13th, 2006 at 6:58pm


Great presentation Jeremy, I wish id have been there. Its kinda difficult listening to the transcription and trying to make educated guesses as to when to click for the next slide, but eh, what the heck. All part of the fun.

There was one thing that confused me a little however. You spoke of the lack of CSS support for mulitple background images and the three (particularly bad) options available to developers; accept partial CSS support, use convoluted markup (in this case, DIVs to make corner images), or the latter - convoluted markup - except with it [markup] being generated by Javascript and the DOM on the fly. All fair points I agree. However you went on to describe how multiple background images - the Kobayashi Maru scenario - could be acomplished effectively with Javascript and the DOM - but was that not the same as solution 3 you spoke of? As you put it "passing the buck"? Are you not putting markup into the document on the fly? or have I missed the boat somewhere?

Cheers mate

# Posted by Steve Tucker on Friday, July 14th, 2006 at 8:03pm

Hi Steve. Yes, you missed the boat somewhere. I was indeed describing situation three which, as I pointed out, was less than ideal. I didn’t say that multiple background images could be "accomplished effectively" with DOM Scripting — I just offered up one of three, equally unsatisfactory solutions.

Sorry if that wasn’t clear.

# Posted by Jeremy Keith on Saturday, July 15th, 2006 at 1:19am

Thanks mate, and cheers again for providing the transcript - great hour of listening. I was also rather impressed with the little DOM-powered slideshow system you have going there to accompany it. Nice to see such lean markup, especially when it works so effectively.

# Posted by Steve Tucker on Saturday, July 15th, 2006 at 2:07pm

The DEMO table in doesn’t work in Firefox The problem is in this part of code:

… element.className = " "; element.className = name; …

This results in class "veventodd" (without the space!) in Firefox.

This one works properly:

… element.className = " " name; …

Interesting… Anybody knows why?

# Posted by Peter Nemec on Monday, July 17th, 2006 at 6:31pm

hm, cannot write "plus" sign in comments?

# Posted by Peter Nemec on Monday, July 17th, 2006 at 7:18pm

Hi Jeremy,

Thanks for the transcript, it’s very helpful. I have just ordered your book and I want to ask if the scripts in the book work with Firefox or there could be some hidden problems with implementation (please, have a look at my comments above).

Thanks for your answer in advance.

# Posted by Peter Nemec on Thursday, July 20th, 2006 at 6:56am

Hi Jeremy, Most of the time when I look at peoples slides on the web, I get very little out of them. Usually just "ooh, thats an interesting font" , or "Aww, look, a picture of his puppy". But your talk and transcript are really useful and educational. Fair play. Look forward to seeing you at dConstruct

# Posted by Des Traynor on Thursday, August 3rd, 2006 at 5:22pm

Sorry. Comments are closed.

July 2006

Recommended Reading

XML Subscribe

Grab the RSS feed for this blog.

JavaScript API

Grab the RSS feed of comments for this entry.