In the last years the discussion about web standards has mainly focused on XHTML, CSS and their proper application, possibilities and limitations. The rapid evolution of the use of these technologies and concepts now appear to have implications for the use of other web standards like JavaScript and the W3C DOM.
CSS has taken over some of JavaScript's functions and concepts like separating structure, presentation and behavior, semantic markup and accessibility force us to look differently at how we use JavaScript and the DOM. As a result we are standing at the doorstep of redefining how we should use DOM based scripting techniques to enable them to go hand in hand with all other web standards and their supporting theories.
Articles like Separating behavior and structure and Enhancing Structural Markup with JavaScript show us good examples of a modern use of scripting techniques and are eye openers for the new possibilities in how these techniques can supplement standards like XHTML and CSS. This article describes a concept called presentational JavaScript and explains why it is important to separate presentational JavaScript from behavioral and structural JavaScript.
To a lot of people CSS is an equivalent for presentation and JavaScript for behavior. However, JavaScript is so powerful that it can be used in all layers: structure, presentation and behavior. Instead of automatically categorizing all scripting as behavior, we should look at its use and functionality first and then determine to which layer it belongs.
The W3C DOM enables JavaScript to dynamically update styles, which means that you could use JavaScript instead of CSS to create almost any presentational effect. However, theory prescribes us that in principle CSS should take care of style and JavaScript of behavior. This means that if you have the choice between a CSS solution and one that uses scripting, it is recommended to use CSS only. In all cases where CSS currently lacks support or is insufficient, DOM based scripting can supplement CSS in the way you style your web documents. In this case, a combination of CSS and scripting techniques or scripting techniques only is justified.
So what is presentational JavaScript? My definition of presentational JavaScript is all JavaScript that resides in the presentation layer that supplements CSS in places where it lacks support or use of CSS only would be insufficient. An example. A script that positions a footer on page load or on page resize like I described in my Exploring Footers article is a good example of a script that belongs to the presentation layer. This effect could have been achieved with CSS only, however this doesn't work cross-browser yet.
Peter-Paul Koch's Three column stretching example explains the principle of Minimal CSS Enhancement: Use JavaScript only to create minimal, straight forward scripts to solve a CSS problem and leave the rest up to regular style sheets. What I particularly like about this idea is that it adds a dimension of applying the minimal necessary change to achieve an effect to the presentational JavaScript concept. Another example of this concept is a solution to center a container in the middle of a screen, where CSS is used for horizontal alignment and scripting for vertical alignment.
In my opinion in some cases presentational JavaScript is even more standards compliant than using ugly CSS hacks or bad semantic markup to achieve a certain visual effect. An example of the latter is the addition of multiple div elements for a box, while you could use semantic markup with presentational JavaScript.
In all cases where it is important to separate structure and content from presentation, it can be important to physically separate presentational JavaScript and structural and behavioral JavaScript into different files. When I first implemented my JavaScript footer solution, I was working on a project where we built one web application that would be rolled out for multiple brands. The mentioned approach enabled us to easily swap one brand with another, just by throwing a different sauce over the application. It looked something like:
- structure / content
- images (content)
- javascript (structure / behavior)
- style01
- templates
- css
- images (presentation)
- javascript (presentation)
- style02
- ...
- ...
The advantage of separating presentational scripting and images from the rest is that we had an overview of what was determining our style and we could literally swap one style with another, without creating any pollution. Here we learned that for separating the presentation layer from the structure layer it can be important to also separate the presentation from the behavior layer.
There are no real drawbacks for using presentational JavaScript, but there are a few extra things you should keep in mind. As detailed in Peter-Paul Koch's article Separating behavior and structure there is a certain percentage of people that surfs with JavaScript turned off or without JavaScript. It is important that your web document is still accessible and degrades gracefully if this is the case. You will also have to cater for the situation where JavaScript is enabled and a user cannot use CSS. And do you use object detection?
You cannot validate JavaScript. You need to have (or know somebody around you) with a certain level of knowledge to write good quality JavaScript code. Please keep in mind that there are a lot of badly written old-school JavaScripts available on the internet. It is my advice to only use scripts from others if you can evaluate the code quality yourself or retrieve it from a trusted source where scripts are discussed and evaluated, like at A List Apart.
One of the reasons I wrote this article is that I know that a lot of people still have the opinion that using JavaScript for presentation in all cases is a bad practice or evil. Reading the JavaScript Bonsai discussion I learned that a lot of high profile designers seem to agree that there is something like presentational JavaScript, but that the concepts behind it are still kind of fuzzy. I hope that this article cleared up the clouds surrounding the concept of presentational JavaScript.
Presentational JavaScript is not a hack. It is a standards compliant way of solving issues that cannot be done with CSS only. In the next years presentational JavaScript will probably be replaced by CSS, when browsers have better CSS2.1 compliance and with the introduction and implementation of a more advanced styling language like CSS3. The one day that no presentational JavaScript will be needed anymore, we can say that both standards makers and browser makers have done their job well. Until then, presentational JavaScript is there for the rescue.
