A web-opening goal for Opera Türkiye and clearfix fixed

May 1, 2012 · by Bruce Lawson

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:


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

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


.clearfix  {
    content: ".";
}

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!

Readers' comments 9

Left under the original article, as archived.

Mağruf ÇolakoğluTuesday, May 1, 2012 12:01:52 PM
Thanks so much for article. Also big thanks to our web developer Çağlar Yeşiyurt (http://my.opera.com/greench) as his inspection and technical advises.
Of course thanks Bruce as well...
NimeshTuesday, May 1, 2012 12:13:08 PM
OPERATORTuesday, May 1, 2012 6:32:31 PM
Viva OperaTurkiye
Atilla GöğüslüWednesday, May 2, 2012 11:02:27 PM
schemestromSunday, May 6, 2012 1:40:20 PM
Can someone show me, where in the spec this behaviour regarding the content property was defined? I am only able to find this, which clearly only allows it on pseudo elements.
I'm asking because I filed a bug report about 10 days ago on the exact same issue. Also see here (problem with another website).
Bruce LawsonThursday, May 10, 2012 7:42:59 AM
schemestrom I can't find exact reference now. In the CSS 3 spec http://www.w3.org/TR/css3-content/#inserting see the first example in "Example 1":

For example, the following rule replaces the content of elements with the contents of the element's title attribute: abbr { content: attr(title); } Bruce
Mağruf ÇolakoğluSunday, May 13, 2012 5:49:31 PM
TRTspor problem started again.
metudeThursday, May 17, 2012 2:05:25 PM
Originally posted by ZAHEK:

TRTspor problem started again.

It's working in 12.00.1417.
Mağruf ÇolakoğluThursday, May 17, 2012 2:06:16 PM
It is fixed again few days ago:)