Wishful Thinking – The Un-Click-Through-able Z-Indexed Elements

[macharborguy]

This is just a brief thought i have always had when attempted to do designs in CSS, but was just wondering if other people felt the same way.

I have always disliked the physicality of elements in HTML/CSS in terms of how they obscure interaction. The big example is a DIV floating (via “position” and “z-index” settings) over another DIV (lets say both are 100px by 100px). The DIV that has the higher Z-index (the highest card in the stack, as it were) would prevent the element below it from receiving click events, EVEN if the highest DIV had no visual style (no background, a transparent background or opacity set to 0, etc).

There have been many times that I wished to place non-content related visuals over top of content, yet still allow the content (links and such) under the visual to be clickable and register events.

Here is an example:

I was working on an HTML5 app for my business to be run on the iPad. I am making it look like a classic iPad app (header bar, footer bar, sidebar and content block, much like what you see with the AppStore IMDB app). I wanted to add some nice shadows using :before and :after to the header, sidebar and footer, to make the main content block appear sunken deeper than the other 3 sections. I did NOT want to use CSS box-shadows, as those did not give me the effect I desired. In addition, I ONLY wanted the shadows to appear over the main content block, and not have the shadows appear over the Sidebar (which does not scroll, as I do not have a large number of options in that sidebar). So I had to go the route of generated elements with :before and :after.

I was able to make the visual appearance look very nice, however, since those generated elements had to be z-index’d to appear above the main content block, I in effect added unclickable/undragable sections within the confines of the content block and any click/touch events landing on those elements would block them from going to where they should go, that being the content block.

I am unaware of any discussion regarding the ability to turn HTML5/CSS elements into what I would call “phantom” elements, those being elements that are there visually, but have no physicality to them when it comes to events, and any clicks/touches would simply pass through them into the element below.

I could see the CSS appearing like this…

#untouchable {
phantom: true|false|both;
}

true: object is completely Phantom, any click on it will pass into the element below;
false: default state, object is not Phantom and any click on it will trigger events as normal, and no click will pass through
both: object triggers, but click also passes through to the object below

one stylistic idea for this could be like one of those “Hidden Object Games”. Sure, they are easy to do right now with HTML5 and CSS, but the “phantom” object could be something like a layer of fog (simply a background image of a transparent fog cloud), scrolling over the scene and objects. It would add to the visuals, but would not prevent interaction with the objects under it.

[joshuanhibbert]

pointer-events: none;

[macharborguy]

@joshuanhibbert: bad form for me not to thank you sooner. Ever since your reply i have been using this CSS property like mad. And now that Opera is moving to WebKit, I won’t have to use the vendor-prefix hack to get it to work there.

[macharborguy]

@CrocoDillon: thank you. I hate bumping posts unless I have something relevant to say about it, or if it is a ‘thank you’ like my post above and this one, lol. Glad my previous bump helped you out, and thanks again @joshuanhibbert. I am still using this feature quite a bit.

[Author]

Posts