CSS3 Gems: The pointer-events Property
It’s becoming increasingly difficult to keep up with CSS3 advances. Just when you think you’ve seen everything, you discover an incredibly useful new property.
Consider the HTML problem when one element overlaps another. All the controls and links in the bottom element cannot be used or clicked. Sometimes that can be useful, e.g. to show a modal dialog. Sometimes it’s not.
Let’s consider a topical example. Say you just successfully landed a probe on the surface of Mars. But rather than analyzing boring rock samples or looking for primitive alien life, you decide to point your powerful telescopic camera back at Earth to view a popular sporting event (I realize it’s a little too late, but we’ll assume a space-time anomaly has opened, the distances appear far greater and you’re viewing recent history).
OK — convoluted example, but bear with me! In essence, the probe would see a map through a red-tinged telescope…
If we wanted to replicate this on a web page, we could use a map API from Google, Bing or any other provider and overlay the telescope graphic. Unfortunately, the map would become inoperable and you couldn’t drag or zoom because the controls are obscured by a transparent graphic.
pointer-events to the Rescue!
pointer-events setting is auto and the overlaid image would receive all mouse events even though it’s not waiting for any. However, setting it to none means that it will never be the target of mouse events. In other words, the map can be dragged and used as if overlay was not there.
Try this in Firefox, Chrome or Safari and the map remains usable. IE and Opera don’t support HTML
pointer-events so dragging and zooming will fail.
pointer-events to none does not necessarily mean an element will never receive mouse events. If a child element permits capture, it will receive those events as they bubble up the parent chain.
pointer-events originated from SVG CSS where it offers several other options, e.g. stroke — the element can only receive mouse events when the pointer is over the stoke perimeter. SVG
pointer-events are supported in all browsers, including IE9 and Opera.
For more information, refer to the MDN pointer-events documentation. I suspect you can think of many situations where the property would be useful.