As part of a project, and using fufu as a sort of base, I got bitten by a particular bug: Opera Mini and repaints.
Opera Mini is awesome and has surprisingly good support for a lot of things (except, strangely, border-radius). Since it supports CSS3 selectors, and doesn’t support client-side JS, I decided to use
:target for a bit of accordion-like User Interface.
I used a
list-accordion class with a cunning combination of IDs and nested things, like this:
<ul class="list-plain list-accordion"> <li id="list-item-1"> <a href="#list-item-1" class="list-accordion-header">Accordion item header the first</a> <p class="list-accordion-item">Accordion item header the first</p> </li> <li id="list-item-2"> <a href="#list-item-2" class="list-accordion-header">Accordion item header the second</a> <p class="list-accordion-item">Accordion item the second</p> </li> </ul>
Here’s an example of the list accordion in action, and here’s the (Sass-flavoured) CSS for it. Accordion items that are not the subject of a
:target are hidden. That means that the one that is the subject of a
target is shown (because the
display: none isn’t being applied). Yes, it’s a bit odd.
Opera Mini Fights Back
This was working great, except on Opera Mini. After some poking and prodding, I remembered that I should just search and see who else has had this problem.
I found Zach Leatherman’s issue on Scott Jehl’s (currently quite quiet Device Bugs repo): Opera Mini doesn’t repaint :target CSS rules after page load #44. His suggested fix is to add an empty
onclick, forcing a server request, and therefore a page load. It didn’t quite make sense to do this for these tiny accordions, so I searched a bit more.
I found another post, Nav toggle via CSS :target which seemed a bit better, and worked, but it felt like a bit of a hack.
In the end, I (slightly unhappily) settled on sniffing for Opera Mini (which Opera do in fact recommend), and over-riding the
:target styles that worked for most other browsers.
I have learned a lot about about compromises. And that coffee and willpower can keep me coding even when I’m kind of ill!