There are several layers to web development and that the Layers should be, as a rule, kept separate. I read the recent A list Apart article named JavaScript Triggers that stated the following:
Technically, adding this information to the class attribute is possible, but is it allowed to use this attribute for carrying information it was not designed to carry? Does this violate the separation of behavior and presentation? Even if you feel there is no theoretical obstacle, it remains a complicated solution that requires complicated JavaScript code.
This specific statement was said in response to posing the situation of adding a CSS class for the sole purpose of acting as a hook to initiate a javascript behavior. In other words adding an empty (i.e. unstyled) class to trigger Javascript.
There is nothing inherently wrong or invalid from a standards standpoint. You are adding a class that has no styling associated. No problem. I do agree that adding a class for the sole purpose of triggering javascript should not be done as it does blur the lines of separation. I am, however, more pragmatic in my design philosophy. I am, in away, a Pragmatic Purist.
I am currently looking at using a CSS class to trigger a javascript code. However, in my case the CSS class(es) are being extensively used (not empty), and the javascript to be used is only there to reproduce a CSS behavior (Pop-up Menus) that is not supported by other browsers (Internet Explorer). Is this wrong. I may be a bit biased, but I say no. The Presentation is separate from Content, and the aforementioned is separate from Behavior Wait, you just said "CSS behavior" that is a presentation based behavior and therefore not separate. I will cover that topic below, but for now let us just say this is acceptable. I am using javascript to reinforce an existing behavior (albeit a CSS behavior). Not a problem.
Other Blurring
I started to think if there are existing portions of the standards that might blur the lines between the different Layers (specifically Presentation and Behavior). The Hover, Focus, Activate states of links (being the most prevalent and as it applies to other elements) and the various CSS techniques used to create Pop-up Menus (display None, and Absolute positioning to move content far left). These result in a CSS based behavior (i.e. a response from the webpage based on user interaction). If the user interacts with the site the site responds by changing the color of links or showing a popup menu this is a behavior This can all be done without Javascript. Bow down before the power of CSS and it's mighty ability to blur the lines.
Now, using these techniques are perfectly valid from an efficiency and standards standpoint, but is it from a design perspective. By using the very basic (Hover, Activate, and Focus states) and the advanced features of CSS we are introducing behavior into the presentation layer. Is this all bad? In the development community these are widely accepted and widely used techniques. Will it be in the future? I think so.
Separation Purists might stage an uprising and try to make monumental changes to the standards to ensure separation from content, presentation, and behavior, but it should be quelled rather quickly. Changing something as engrained in web development as link states are, is not going to happen. This would require a subtle but, large paradigm shift the standards bodies. Websites would require javascript to change links states. This is not going to happen. We like our links states and pure CSS menus thank you. They are light and efficient, easy to maintain and use.
Internet Explorer and Separation
Pure bleeding edge sites do not function properly in Internet Explorer because it does not support the CSS hover event on non link elements. The process of writing this made me think.... maybe Microsoft is inadvertently doing a good thing for the development community by not being standards compliant (in this specific instance). Websites cannot reliably use a Pure CSS based pop-out menu because Internet Explorer does not support it. This does force developers to generate the pop-out behavior via javascript which
forces layer separation. Good?? Begrudgingly I will say 'Yes', but it does not mean I have to like it. Internet Explorer only supports the CSS hover event on Links, which I think will always be the case for all versions of the standard. Link behaviours will be forever - hover event on
other elements... hmmmm ... we will see. For now I will create my CSS based menus and use javascript backup for those browsers that do not support it. The best of both worlds.
