Something About CSS Pointer-Events Property

Introduction

I was doing my normal routine - web research on creative websites and I stumbled upon this wedding website called Lucy and Si. Generally the website uses a few CSS3 tricks and the thing that caught my attention is the location section.

In locations section, it uses Google Map, and it's customized with different color theme (you can do it here - Style Map) and custom icons as well. The folded paper effect is pretty nice, it's a transparent PNG layered on the top of the map. Yes a transparent PNG layered on the top of the map, does it sound alright to you? But why am I still able to interact with the map? This is when the not-so-famous pointer-events CSS property become very useful.

What Does CSS Pointer-Events Property Do?

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular element can become the target of mouse events. Pointer-events property was originally defined for SVG content, but now it can be applied to all HTML elements and it affects the circumtances under which the following are processed:

user interface events such as mouse clicks
dynamic pseudo-classes
hyperlinks

For Lucy and Si wedding website, with pointer-events set to none to the PNG layer, we can click through the PNG and interact with the Google Map layered underneath.

pointer-events: none;
background-size: 100%;
background-image: url('your_transparent.png');

However, as stated in Mozilla Developer Network, the use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4

Browser Support

Pointer-Events property is supported by Firefox 3.6+, Chrome 4.0+, Safari 3.2+ and Android 2.1+. Unfortunately, for IE and Opera, they don't support this property yet. As a result, some of you might still able to use it, it depends on the target audiences, for example, you still can use it if you're developing website or app specifically for iOS and Android.

For more detail about browser support, you can visit Compatibility table for support of pointer-events in desktop and mobile browsers

To emulate the ability to click through a transparent PNG, for some IEs, you can use this hack. I mentioned some because it's only supported by IE7-8, not 9 and not sure about 10:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;

Conclusion

CSS Pointer-events property can be really useful in certain circumstances, but without IE's support, it's quite risky to use it. Again, take Lucy and Si website as an example, they make sure the map is still viewable and usable even without the Google Map functionality, and in webkit browsers and firefox, they get extra ability to browse and interact with the map. As a result, it's still a win-win situation, we just have to use it wisely.

References

TAGS:
CSS
CSS3
Tips