Friday, August 5, 2011

Adding behavior to CSS?

Blurred separation between presentation and behavior

It's been already stated that it is a good practice to separate Presentation (CSS), Structure (HTML) and Behavior (Javascript) when building a web site. But this concept has not been always clear.

Recently, CSS3 has been adding features to enhance its ability to add behavior by means of new properties like transition or the :target pseudo class. Doesn't this break the forementioned separation concern? Even previous CSS versions had features that made it possible to mix behavior in the presentational layer. Do you remember the vendor specific behavior property of IE and the associated .htc files? What about the :active or :hover pseudo classes?

All these features try to add a visual change (rotation, scaling, changing color...) that is related to behavior (activating a link, targetting an element, hovering over anything...) and all this is done via CSS! Shouldn't this be done via Javascript? In fact JavaScript was designed to be the layer of interactivity.

Well, that is why there is a bit of controversy (http://snook.ca/archives/javascript/css_animations_in_safari/). To smooth things out let me share with you some ideas.

  • Most browser vendors are accepting CSS3 standards. Then, why not accept the transition property?
  • Transitions and animations in CSS3 have blurred the distinction between presentation and behavior as separate layers, but they are easy to create and fun.
  • Some animated transitions are presentational and have nothing to do with behavior such as a flashing banner or a fading title.
  • Sometimes there is no clear border between presentation and behavior.

All in all, as long as you have a clear understanding of the benefits resulting from the separation of concerns, I don't think it is a mistake to take advantage of the improvements in CSS3 even though these benefits blur the distinction between presentation and behavior.

No comments: