Bite-sized CSS & HTML nuggets

CSS hack to target Opera

Last week – while I was working on my new personal site – I had to find a way around Opera not supporting pointer-events. After a quick round of googling, I stumbled upon a CSS hack to target Opera only. That way I was able to simply hide the overlaying generated content that was stealing pointer events from underlying links.

x:-o-prefocus, .intro:after {
    display: none;
    }

:-o-prefocus is a prefixed pseudo-class which was added in Opera 9.5 and allows styling of form elements reached via spatial navigation. Since x is a non-existing element, we’re not really using it here, but the trick is that other browsers don’t understand this selector and therefore disregard the whole rule. Problem solved.

Here’s a simple JSFiddle demonstrating the hack.