A Web-Opening Goal for Opera Türkiye and Clearfix Fixed

A month after I wrote how Opera Türkiye had opened up the Avea website, a large Turkish mobile phone operator that was sniffing and blocking Opera, the Turkish guys and gals have scored another brilliant web-opening goal.

This time, they've used Facebook to persuade the sports portal trtspor.com.tr to change some CSS that hid all the homepage content from Opera.

It's an interesting case-study. Opera was behaving correctly and implementing the specification properly, but the website owners hadn't tested it properly.

There was a super-whizzo CSS technique called clearfix that uses CSS pseudo-elements to insert content after an element, and hide it from view while clearing floats:

<pre>.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }</pre>

Whereas other browsers implement the content property only on the before and after pseudo-elements, Opera allows it on any element, as defined in the specification.

Therefore, if a designer has erroneously copied and pasted the clearfix code and dropped the pseudo-elements, you can end up with

<pre>.clearfix { content: "."; }</pre>

which hides the whole element. trtspor were hiding their whole main content, which would have been immediately apparent if they'd tested with Opera.

So, thanks to trtspor for reacting quickly when the problem was brought to their attention, and a huge çok sağol to our Turkish fans!