Separation of Concerns: JavaScript or CSS for Dynamic Presentation?

In my last post, I talked about the limitations of using pure CSS for the "presentation" component of the web application model. In this post, I talk about the issue of "dynamic presentation," and which language to use for its implementation (JavaScript or CSS).

I have expanded the table previously discussed to help distinguish between "static" and "dynamic" presentation:

The term "dynamic presentation" is used here to encompass any presentation component of a web page that changes in reaction to user input. For example, one of the first capabilities of JavaScript that I coded was the JavaScript image rollover. Of course, this was before CSS 2 existed; nowadays this can be achieved using the :hover CSS style definitions. The image swapping rollover is an example where we can achieve the same effect by using either CSS or JavaScript.

Actually, any "dynamic presentation" effect that’s capable in CSS can be also achieved in JavaScript. For example, we talked about the dropdown menu in the last post, and how it can be coded using pure CSS. However, an alternative option is to keep the CSS fairly simple and use JavaScript for the dynamic component of the dropdown menu.

These are just two examples of dynamic presentation components that are common across many web pages. The question is: what language do we use for dynamic presentation, and how will this choice affect the separation of concerns principle?

Implementing Dynamic Presentation

What language do we use?

1. Only CSS
2. Only JavaScript
3. Mix of CSS and JavaScript

In the last post, I already mentioned how the first option is undesirable in many cases; designers want access to the look-and-feel effects that only JavaScript offers. Furthermore, some pure CSS implementations of dynamic presentation are very difficult to understand (and thus, maintain).

Choosing the second option defeats the purpose of many of the capabilities of CSS 2.1. For example, the :hover style was introduced to make coding rollover effects a lot easier. It is considered bad practice to implement rollovers in JavaScript for this very reason.

It seems that option 3 is the most practical way to go. In some cases, pure CSS should be used –- we have already determined that this is the best choice for implementing a rollover. In other cases, we should use JavaScript because the CSS implementation, although possible, is either convoluted or badly supported (e.g. use of the :target style). Finally, some cases exist where we have no choice but to use JavaScript to achieve the desired effect (e.g. transition effects).

I acknowledge this with great reluctance, because the separation of concerns principle breaks in this case. With dynamic presentation, the best approach seems to be to use a mix of both CSS and JavaScript.

Figure 2: Delegating concerns amongst languages

The Venn diagram above summarizes our conclusion. Web designers must use their judgment in deciding on language to use for each dynamic presentation effect. The option that yields the most lightweight, readable, and cross-browser compatible code should be chosen.