WTF Opera Mini?!

22 December 2015

According to StatCounter statistics, the global usage statistic for the Opera Mini mobile web browser is about 11.3%. However, in some developing countries such as Nigeria (where I live), this percentage goes up to 73%.

StatCounter Mobile Browser Usage Statistics for Nigeria

This is a huge problem.

It’s a problem because Opera Mini today is basically like IE 8. It has terrible support for a lot of development features we take for granted. For example -

2D transforms
@font-face Web fonts and, by extension, icon fonts
Basically any styling for fonts including line-height, text-decoration, and using font families not native to the OS

I only discovered this professional-life-altering fact about a week ago thanks to a friend, and it’s been seriously racking my brain ever since.

Although, as a developer, I personally dislike Opera Mini for this fact, there is a reason that people use it. For a particular kind of user, for example one with very limited data connection, it is very useful. Even though their experience may be diminished compared to if they were using a fully-fledged browser, all the feature-cutting works for their particular needs.

wtfoperamini.com #

So, I decided to create this site, wtfoperamini.com, which is a list of all the unsupported or partially supported development features on the Opera Mini mobile browser, and some crowdsourced workarounds for them.

Although this is directed at Opera Mini, I hope for it to be a useful resource for anyone practicing progressive enhancement or graceful degradation.

Workarounds #

The aim of WTF Opera Mini?! isn’t really Opera Mini bashing, but rather a way to crowdsource some workarounds people can use if they need to support the browser.

For example, a particular pain point for me was the lack of support for 2D Transforms. To align elements both horizontally and vertically, I frequently use this magical snippet -

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.centered-element-parent {
  /* make sure parent is positioned e.g. relative */
}

This doesn’t work in Opera Mini because the transform property is not supported. So I’ve had to use different workarounds based on the situation. For example, one workaround is using tables and vertical-align -

.centered-element {
  display: table-cell;
  vertical-align: middle; /* vertical */
  text-align: center; /* horizontal */
}

.centered-element-parent {
  display: table;
}