Click here to Skip to main content
15,400,381 members
Articles / Web Development / HTML
Technical Blog
Posted 27 Feb 2012

Tagged as

Stats

7.1K views
1 bookmarked

Cool CSS 4 Feature: pointer-events

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
27 Feb 2012CPOL1 min read
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.

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

Comments and Discussions

 
-- There are no messages in this forum --