Quick Tip: Mimic a Click Event with CSS

I think someone needs to buy Andy Clarke’s Hardboiled Web Design….

I would tend to agree with this. I of course know it’s purely an experiment.

However, the added benefit of doing something like this in CSS as opposed to JS is you still retain the functionality when JS is disabled.

It can also be argued that the width of an element is a “design/style” property, and therefore using only CSS for it is still well within the design realm.

Yes, it’s good to separate web development into content, style, and behaviour. But you will never get this separation 100% pure, because the divisions between them are not as neat as is commonly assumed.

What constitutes behaviour? Is it an event, such as a click or key-press? Is it the appearance of movement, of dynamism, such as an animation? Where do you draw the line?

Similarly, what constitutes style? Must style be purely static?

What makes one set of code easier to maintain than other? There are many factors, but here’s one: maintenance is easier if you keep related code together. In this example, we have a simple presentational effect: an image that can be zoomed. You argue that this is more maintainable if we split it across HTML (for the markup), CSS (for the initial, static styles), and JS (for the dynamic effect).

I argue that it’s more maintainable if we split it across fewer layers, not more: HTML (for the markup), and CSS (for the presentation). That way, most modifications can be carried out in one place (the CSS). Why add another layer if you don’t need it?

Of course, it’s not just about counting the layers. It also depends on how complicated the code is. You wouldn’t write 1000 lines of CSS to replace a 3-line javascript effect. ;)

Separation of layers is a good basic idea. It helps us avoid writing spaghetti code (font tags in the HTML, HTML fragments in the javascript, inline event handlers everywhere…). But separation of layers is not the goal: it’s merely a method that contributes towards the goal, which is high-quality code.

Rather than worrying about 100% pure separation of layers (which is impossible), try to choose the best tool for the job. If a presentational effect can be achieved elegantly in CSS, why would you add javascript?

You know, if you really believed in this 100% pure separation, you would refuse to use a:hover and add the styles via javascript instead. Do you actually do that? No, of course you don’t. Why? Because a:hover is familiar; you accept it because it’s been around for a long time, and nobody moans about it being “bad coding practice”.

“Following best practices” is often a euphemism for “I don’t understand why I’m supposed to do this, but someone important told me once”. ;)

Let’s not beat around the bush. The mantra used to be perfect experience parity across browsers, but that’s out the window now. We’re done waiting for users to catch up on their browser updates. The lowest common denominator can no longer define the experience for everyone. Provide enhanced functionality for those who happen to be capable of using/viewing it.

The attitude that we can’t implement something if it doesn’t work for everyone is harmful to our industry and is holding back web innovation more than browser standards compliance is.

Do you mean how do you style an element with a class of act?

.act { }

Or how do you change the class name of an html element with a current class of “act” to something different?

You can’t do it with CSS, but you can do it with javascript. In jQuery it’d be as simple as adding

$(“.act”).toggleClass(“act secondClassName”);