Notes
HTML - structure
CSS - presentation
DOM - behaviour
-equivalencies between CSS selectors and DOM methods (both target elements and work with them)
CSS
#footer {}
DOM
document.getElementById(”footer”)
CSS
#nav a {}
DOM
document.getElementById(”nav”).getElementsByTagName(”a”);
CSS
* {}
DOM
document.getElementsByTagName(”*”);
CSS
.className {}
DOM
no equivalent! but can write your own..
function getElementsByClassName(clsName)
{
var arr = new Array();
var elems = document.getElementsByTagName("*");
for ( var cls, i = 0; ( elem = elems[i] ); i++ )
{
if ( elem.className == clsName )
{
arr[arr.length] = elem;
}
}
return arr;
}
As of yet, cannot do zebra tables using just css (may be supported in css3?) — looked at how to use DOM scripting to achieve this effect.
1. Plan
2. Which methods?
–get all tables (getElementsByTagName)
–loop through each
–get all table rows in each table (getElementsByTagName)
–loop through every 2nd
–set style
Where you can, don’t set styles directly, rather assign classes.
CSS3 - can assign multiple background images (already supported by Safari)
Rounded corners - unwinnable situation.
–use CSS that isn’t supported?
–add superfluous divs in the markup?
–use JS to generate superfluous divs
***note, code does not work in IE6/WIN…. 
Generated content
– there are accessibility concerns, as a buffer accessed from a screenreader does not get this ‘new’ content. Therefore, only use generated content for non-essential information
impressions
I really liked this session. I had had the concern about accessibility, which the speaker freely addressed. He did go through his examples quickly. often telling us to google for better code than his own, but his concepts were solid. I was disappointed after the fact to review his slides and see that the rounded corner example does not work in IE6/WIN. Still, I believe that DOM scripting can help us greatly, and I have already started using some of these techniques in my work.
No comments yet.