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!
The default 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.
View the CSS3 pointer-events Mars probe Olympic viewer demonstration page…
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.
Setting 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.
In addition, 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.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
