Web Standards are a three-legged stool, or without metaphors, a threesome of technologies that should live together in harmony. (X)HTML adds structure and semantics to your content, CSS is responsible for its presentation, and the DOM provides an interface to add behavior. You keep your Web pages flexible (or: easier to understand, maintain, restyle and update behavior) by separating all three layers; structure and content from presentation, structure and content from behavior and presentation from behavior. To accomplish this, try to avoid inline behavior and use unobtrusive techniques instead.
When you attach behavior on page load, you may have to work around some known issues. First, you may encounter differences in cross-browser event handling. Second, make sure you don't overwrite existing onload handlers. Last, but not least, you may encounter a delay in the attachment of your behavior. The underlying problem is that a window onload event will only execute after the whole document, including all page assets like images and objects, is loaded. If your script needs to respond immediately after an element has loaded or if you work with a lot of content, a series of images or a slow server, you may be forced to look for a solution. You can either hide your content until the behavior is attached or attach the behavior via a script call after your elements are loaded, like at the end of the body element.
- People who use assistive technologies, like screen readers
- People who don't use a mouse for navigation
- Machines, like search engines
Create reusable code. If you find yourself duplicating code snippets, create functions. If you find yourself duplicating similar code snippets, try to abstract your code to the level that you can reuse it for multiple purposes.
Document your code well. If you work together with other people, like to share your code with others, or still want to know why you did certain things one year from now, good documentation is key.
- The HTML DOM is case-insensitive, the XML DOM is case-sensitive
- Elements need to be referenced in lowercase, e.g. document.getElementsByTagName("p")
- document.body is deprecated, instead reference it by id or use document.getElementsByTagName("body").item(0)
- Collections like document.images, document.applets, document.links, document.forms and document.anchors do not exist when serving XHTML as XML, instead use document.getElementsByTagName()
- innerHTML and document.write cannot be used anymore, instead use DOM methods, e.g. document.createElementNS("http://www.w3.org/1999/xhtml", "div")
- Browser vendors
- Standards support, e.g. at the moment it is still a big question if Microsoft will ever fully support existing Web Standards and is going to support future standards
- The addition of proprietary methods and attributes, e.g. innerHTML, Microsoft.XMLHTTP and XMLHttpRequest
- Collaborations like the WHAT WG aimed to create new standards in shorter timeframes, e.g. the submission of Web Forms 2 to become a W3C recommendation and Web Applications, which in the future may standardise XMLHttpRequest
7. Often there is more than one good solution
8. Write your own scripts or reuse code from trusted places
- DHTML & CSS Blog: Stylish Scripting
- A List Apart
- Simon Willison
- Stuart Langridge
- Christian Heilmann
- Avoid fat code libraries and make sure your scripts stay lean and mean (or: small, independent and straightforward)
- Write efficient code and avoid constructs that execute slow
10. Use tools to optimize your work process
A selection of tools that make life much easier:
- Mozilla or Firefox browser
- The Web Developer Toolbar extension, e.g. to quickly enable or disable your scripts
- The Mozilla DOM Inspector and the Firefox DOM Inspector extension, to inspect and edit the live DOM of any Web document