The rather talented Alex Maughan was in our office the other day, and we got to chatting about Opera Mini and JavaScript (as FEDs in our situation are often want to do). Our chat got me thinking a bit.
Opera Mini is a strange little browser. There are Android, iOS, and Windows version, but the biggest market is the version that runs on low end feature phones. Opera claims that it “works on almost any phone” and in my experience that’s certainly true.
I call it strange because despite running on low end tech it’s quite advanced. The article Opera Mini and JavaScript by Tiffany Brown on the Opera dev blog does a great job of breaking down exactly what (and how) Opera Mini handles JavaScript. More strangeness comes in because of the way it handles things: everything requires a server round-trip. This complicates matters for things like off-canvas / side drawer menus.
Feature testing versus device detection
What Alex and I were discussing was how to solve a particular conundrum. A feature-detection test on the JavaScript required to show / hide an off-canvas menu would pass on Opera Mini, but because of the server round trip, the experience would be a bit wonky. So, do we resort to device detection, which goes against our general Progressive Enhancement principles? In her article, Ms Brown says
99% of the time, you should use feature detection to determine whether a browser supports a particular feature or API. Yet sometimes browser sniffing is the right choice.
and I’m thinking that for Opera Mini, that might indeed be the right approach. I want to take a mustard cutting approach: probably using localStorage (support for localStorage on caniuse.com) as the yardstick for “a higher end browser,” and load in the JavaScript for those only: that would exclude Opera Mini.
However, Opera Mini exposes a window.operamini object. Although this is still basically the same as device detection, it feels less horrible.
Conclusion
I’m still not sure, to be honest, but I’m going to stick with my mustard cutting for now. I quite like the combo of localStorage and querySelector: that gives me a set of fairly modern, fairly capable, browsers as a first pass.