The following are my panel notes from @media2006. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.
Jeremy Keith Clear:left
Using DOM scripting to Plug the holes in CSS
Last year was a PR job. I was demonstrating that JavaScript is not evil. This year I'm not doing that. The DOM scripting task force came about after the first year and so this year I don't have to sell JavaScript to you.
Tiger by the Tail. Buck owens and the buckaroos. he had hitys in teh 50's becuase he made use of the technology of the time. Buck Ownes exploited that. He made use of the limitation of AM radio. He used guitars for basslines. he was a country music hacker.
This is similar today instad of radios we have browsers. We can expoit the technical limitations of the browsers using DOM scripting.
The right tool for the job
HTML structure
CSS behaviour
DOM scripting for behaviour.
We're going to take DOM scripting a fill some holes in the presentation layer.
Equivalence: CSS has selectors SOM has methods.
CSS has id selector #footer DOM has document.getElementById("footer")
Both are doing the same thing.
CSS has tagname {} DOM has getElementsByTagName("p")
Combining selectors #nav a in CSS or document.getelementById('nav').getElementsByTagName("a");
Class Selector
CSS .classname
DOM we write our own because we don't have one in javascript. So now I have the equivalent of the CSS class selector.
In CSS 3 we will be able to do stripey tables in CSS but for now we have to use the DOM
tr:nth-child(2n+1) every odd row
tr:nth-child(2n) every even row etc....
tr:nth-child(odd) every odd row
tr:nth-child(even) every even row
I suggest when tackling this you write this out in English first and then convert it to JavaScript.
Get all the tables in the document
Loop through them all
Get all the tables
Loop through every second row
Set the style on that row.
So now what methods do I use.
(Slide of script)
I'm using Js to set the styles directly but this is bad practice it's better to set a class and then you can edit the class in you CSS file.
I can't just give it a class as there may already be a class on it. This checks to see if there's a class and if there is I will add a space and then append the class. If not I just set the class.
Now it's easier to maintain.
When you view source you won't see the result (SJC: You can through view renderd source and other firefox extensions)
A variation on that is to stripe ordered lists. It's the same thing but with different elements.
In this case I can check for the classname of "striped" and if it does I carry out the the striping. The result is I do get that striping on the ordered list.
Using classnames keeps the presentation in the CSS.
Next...
Multiple background images.
CSS3 will allow you give more than one background image.
The Kobayashi Maru scenario. An unwinnable situation. Star Trek 2 the Wrath of Khan.
You can use CSS but only Safari supports it currently. Or, you can add a whole bunch of divs into your markup. It's not ideal. Alternatively we can use JavaScript to generate the same superfluous markup. This is passing the buck. I am not endorsing this it's an unwinnable situation.
Creating Markup
createElement and appendChild allow you to add markup.
I will use my own getElementsByClassName function to apply this to every div with a class of Rounded.
The real work is in the CSS. Which positions each image in the corners.
Generated Content
CSS2 has the ability to do this but limited support.
blockquote:after{}
Who knows about the site attribute. Not surpising if you don't as the default browser action is to do bugger all. So what I want to do is make the meta data visible. Because no-one like hidden meta data right Tantek?
Tantek: right.
Get all the blockquotes
Loop through each one
Get the cite attribute (getAttribute)
If there is a site attribute
Create a string of text
Insert if after the blockquote.
I can expand this to provide a link pointing to the source of the blockquote.
Moving on
max-width
Available in CSS2 but not supported in IE. Which is annoying but it will be supported in IE 7
Get the current width of the browser and if it's greater set the width of the body to your max.
Same thing for min-width. If it's less than x set the width on the body to x
This isn't DOM scripting it's BOM scripting it's the Browser Object Model. The man in Blue Example Rammstein.
This is old school and related to browser chrome. I'm not familiar to this but Cameron Adams has come up with the resolution dependant layout. Even Dave Shea is using this.
Next... we are going to tackle anything you can possilbly imagine.
IE7 by Dean Edwards turns IE6 into IE 7.
This may come into it's own when IE7 gets adopted. It's rather big but it's a great script.
What CSS can't do.
The arrow of Time
setTimeout and setInterval
This allows you to do things over time. You can update styles over time. Animation (SJC: FACE) that's good the right way but awful the wrong way. Fades over time cannot be done using CSS but you can using javascript. Yellow fade technique. enormously useful for Ajax application to let people know what's going on. YFT is becoming a convention which means it becomes point of reference.
here's a contact form that has validation carried out by Ajax. If the form's submitted I indicate that somthing is wrong and use a fade to draw attention to it.
When submitting succesfully I use a green fade. As a positive message.
...
Q: What's frustrating with DOM scripting now and what would like to see in the future.
A: No a lot. It's good that you can easily add stuff that's not there. CSS suffers from scope creep in CSS3 where it's trying to do behavioral stuff. I asked Doug Crockford this and he said leave it as it is. We don't need strong typing it's fine it does the job. I'm happy as it is. I would like to see the browsers support the specs as they are. It's better today than it was. As Eric pointed out. Doing stuff is ok it's the browsers that cause teh problems. The nice thing about DOM scripting is that using the w3C dom specs your scripts should work on all browsers. Ok not all the time. I'm using the DOM for parsing HTMl but it can also be used elsewhere.
Q: I've been converting ppt to valid XHTML. I wrote a function so that the fonts would fit the browser window. It doesn't work in IE what am I doing wrong.
A: Nothing it'll be a browser issue. In this case it'll be down to events being mishandled by different browsers. Ask for help on different browser lists etc.
Q: I use the expression in CSS for just IE. What are your thoughts on using proprietary expression in IE.
A: Nothing wrong with that. It's good that you're thinking about separating it off. I hate hacks it's good to quarantine any hacks that you use. As for sniffing for browsers conditional comments for IE then that's fine. But don't check for the browser name. Use object detection. It should really be method detection. This is much better than testing for the version or name of a browser. Test for the method.
Q PixelDiva: The addons that these solutions offer are great but if I've got my accessibility hat on I'm worried for example about generating content.
A: I wouldn't put important content into the document using the DOM. Generating content as enhancements rather than creating content that wasn't there. E.g creating a table contents from existing content. All of this stuff I showed today are niceties the fallback is that these things don't happen. No mission critical stuff happening with the DOM.