Click Through CSS pointer-events
Among over three hundred active CSS properties, there's one I constantly forget, even though its name is more than obvious – pointer-events. Every time I try to recall how it's spelled correctly, I resort to a Google search with a query like "click through CSS." And this is precisely the CSS rule I occasionally need for decorative elements on a page.
pointer-events:none;
To disable an element's ability to react to pointer actions, you need to assign the pointer-events rule with a value of none to that element. "Pointer", in this context, is a generalizing term for the user's pointing tool. In other words, a pointer refers to a mouse cursor, a touchpoint from a finger or stylus on touchscreens, a joystick pointer, or a smart TV remote control.
The most common scenario where disabling "click through" via CSS might be necessary is for a decorative element or pseudo-element positioned higher on the Z-axis than the main element. Essentially, it's for cases where you need to click on a lower element through an upper one, while still keeping the upper one visible.
A live example - the Amazon homepage.
The promotional banners on the homepage are decorated with a smooth gradient that transforms the banner's background color into the page's body color. This gradient is achieved by using a block-level pseudo-element over the main image.
Of course, they could have avoided over-complicating things by making the gradient an mandatory part of the banner's design itself. However, the decision was made to use this particular scheme. The designer's idea – to seamlessly blend the banner into the page's background color – will work in this scenario regardless of the user's theme settings or whether Dark Mode is enabled in their browser.
However, the pseudo-element with the gradient covers the active layer of the banner. It was at this precise point that it became necessary to enable clicking through the pseudo-element, which was successfully achieved with pointer-events: none;.
A Couple of Words in Conclusion
As we can see, just one CSS property can allow a website visitor to "penetrate" upper template layers of your page with a click, without resorting to additional means like JavaScript.
To be fair, it's worth noting that besides enabling click-through, the pointer-events rule, with minor variations, is also applied to inline SVG images. A very rarely used, yet incredibly interesting effect can be achieved, about which you can read more on my blog later.
To everyone who read through to the end, I wish you a good day and a peaceful sky above your head. Bye for now...
