Cool CSS 4 Feature: pointer-events

CSS 4? Really? CSS 3 isn't fully released yet! What on earth is going on here?

It all started when I was fooling around with GIMP, the extremely powerful free graphics editor. I took a public domain image, re-sized it, gave it a transparent background and then added a perspective shadow.

It is beautiful.

I wanted to see the image in "action" so I put it on a web page. But because of the way HTML elements are rendered, there was nothing behind my gorgeous image to demonstrate the transparency. I could have used a background color but instead I gave the image an absolute position and positioned it over a button:

It looks 3-dimensional but you can't click on the button with the mouse. The transparent part of the image is like having a sheet of glass over the button. You can tab to it and use the space bar but it's really not useable as it is.

I recalled reading about the CSS pointer-events property. I assigned it to the image and voila! It worked…at least on FireFox. IE hasn't implemented this feature yet.

Here is a jsFiddle that shows it in action. If your browser supports pointer-events, you will be able to click the button:

Here is a direct link to the jsFiddle (just in case): http://jsfiddle.net/Steve_Wellens/6GbwK/

When I did a bit of research on the pointer-events property, I found it had been pushed into CSS4 because it had "issues". Here is a link that documents re-assigning this feature from CSS3 to CSS4: http://wiki.csswg.org/spec/css4-ui#pointer-events

Here's a table showing what browsers/versions currently support it: http://caniuse.com/pointer-events.

The big question is how do you rationalize this to your boss? Here is a list of business justifications:

I hope someone finds this useful.

Steve Wellens

CodeProject