pointer-events, a property I wish we had now.

December 1st 2009

Mozilla announced it’d support pointer-events in Firefox 3.6. While the specification has apparently been part of SVG for a while, I never really heard of it before today.

The pointer-events CSS property basically specifies if the mouse event should be sent to the current element, or the element underneath it. Might not look very useful at first, but it makes a whole lot of sense when you’re working with “complicated” designs.

Real world example

Lets say you have that fairly simple design, a content area and a sidebar. The content area has a drop shadow that goes over the sidebar area. Something that look like the following.

The problem with the design is that in order to display the shadow over the sidebar, you have to bring it’s z-index up and since it goes a bit over the sidebar, there’s a small part of the content area that goes over the link and blocks the click. See below outlines in yellow.

Up until now, you really didn’t have much choices. In order to enable the click on the link, you’d have to include the shadow as a background image in the sidebar. The content area wouldn’t go over the sidebar anymore, but the drop shadow would’nt be over the content as the designer intended it to be.

Well with the pointer-events, you just have to see the value to “none” in the CSS and that means any click event sent on that element will automatically go to the element underneath it, in that case, the link in the sidebar.

.content {
pointer-events: none;
}

What now?

Unfortunately, this isn’t part of any CSS specification (yet). Mozilla decided to implement it in Firefox 3.6 and they are the only one right now. However, that’s a nice step forward and I really do hope others starts implementing it, because it’s really small, but can save quite some time in the long term.

Related Posts

If what you were reading interested you, those might too! Check them out!

INK is a new way to own your content. It’s a well known fact, the content you produce can be shared all around the web and in a very large number of ways. One of the most common ways is to simply copy the content and paste it wherever we want it to be shared. […]

prettyLoader is a small (less than 4kb uncompressed) jQuery plugin that aim at making your life easier regarding ajax loader display. You know, when you do an ajax call and you never quite know where to position your loader. prettyLoader takes care of that for you, by default, prettyLoader will “hook” to the jQuery ajax function […]

prettySociable is a jQuery plugin that tries to make sharing fun while being easy to use. It was inspired by the sharing on mashable.com. While ShareThis and AddThis provides a very useful piece code that allow users to share basically anything everywhere, their solution is not the prettiest nor the easiest to use. prettySociable simply […]