On Opera’s Implementation of WebKit Aliases

Warning This article was written over six months ago, and may contain outdated information.

As I’m sure you’re aware, Opera recent­ly released a pre­view build of their brows­er Mobile Emu­la­tor which is notable large­ly because they’ve aliased a group of -webkit- pre­fixed prop­er­ties, effec­tive­ly sup­port­ing anoth­er ven­dors sup­pos­ed­ly pro­pri­etary code in their own.

Let me state upfront that I under­stand why this deci­sion has been made. I don’t agree with it, but I under­stand it. Opera have a large world­wide audi­ence in the mobile space — to under­stand how large, take a look at this graph­ic show­ing top mobile browsers world­wide last month (if you’ve ever said ‘no-one uses Opera any­way’, put on a dunce cap; if you’ve recent­ly said ‘Opera are break­ing the web, but no-one uses it any­way’, pull your head out of your arse before putting on the dunce cap).

With the rise of iOS and Android and mobile WebKit, a lot of devel­op­ers who can’t see out­side their wealthy West­ern tech bub­ble are build­ing sites that are opti­mised for WebKit and don’t degrade prop­er­ly or, even worse, use -webkit- pre­fixed prop­er­ties to active­ly exclude oth­er browsers. This has also been raised as an issue by Microsoft and Mozil­la, who are try­ing to make head­way in the mobile space, but it’s Opera with their huge world­wide user­base who are bear­ing the brunt; their mil­lions of users are see­ing web­sites that don’t work, and blam­ing Opera for the problem.

So my issue is not so much with the fact that Opera have done this, but with the prop­er­ties they’ve cho­sen. The prop­er­ties in ques­tion are:

  • -webkit-border-radius
  • -webkit-box-shadow
  • -webkit-linear-gradient
  • -webkit-transform
  • -webkit-transition

Of these, -webkit-transition is obvi­ous; some peo­ple have writ­ten scripts which use the webkitTransitionEnd event as a depen­den­cy, so if Opera want these scripts to work, they have to sup­port it. -webkit-transform is straight­for­ward too; if it’s being used for page ani­ma­tions (like slid­ing between pan­els), it also has to be sup­port­ed. -webkit-linear-gradient I can under­stand although it’s less con­vinc­ing; the exam­ple they’ve used is where a gra­di­ent has been used with­out pro­vi­sion of a fall­back background-color, which is no doubt a prob­lem but one which must affect IE users too, and I can’t say I’ve heard of any wide­spread report­ing of that.

I can’t jus­ti­fy their use of -webkit-box-shadow and -webkit-border-radius. For a start, both have been unpre­fixed by WebKit for a lit­tle while now — nine months in the case of box-shadow, 21 in the case of border-radius — but even pre­sum­ing a lot of lega­cy use, nei­ther of these prop­er­ties intro­duces crit­i­cal depen­den­cies; see­ing squared cor­ners or no drop shad­ow can hard­ly be classed as ‘bro­ken’. I know Chris­t­ian Heil­mann has high­light­ed a case where -webkit-box-shadow has been used as cri­te­ria for test­ing CSS3 sup­port in browsers, but that can’t be a com­mon case, and would be bet­ter served by get­ting in touch with the site own­er and explain­ing the problem.

Appar­ent­ly the deci­sions about which prop­er­ties to alias were based on fre­quen­cy of mis­use along with some judge­ment, but I think that not all of these prop­er­ties have been prop­er­ly jus­ti­fied for inclu­sion by the Opera team — cer­tain­ly in the cas­es of box-shadow and border-radius. These to me smack of oppor­tunism: ‘we’re going to have to sup­port some prop­er­ties, so while we’re at it let’s also add a cou­ple of more vis­i­bly blingy ones’. If that’s not cor­rect, I’d love to see more exam­ples of lack of round­ed cor­ners and shad­ows being flagged as an issue.

Microsoft have said that they don’t intend to fol­low Oper­a’s lead, and Mozil­la are yet to declare their inten­tions (last update was that it’s ‘very like­ly’ they’ll do the same) but don’t seem to view the prob­lem on the same scale as Opera — remem­ber, though, that the for­mer two are in a very dif­fer­ent sit­u­a­tion to the lat­ter. I hope that, as has been indi­cat­ed, this is an event that Opera won’t be repeat­ing in the future, that it’s a one-off solu­tion to a prob­lem that would be bet­ter off resolved in a dif­fer­ent way.

My posi­tion is still that this is a prob­lem large­ly caused by devel­op­ers and one that should be resolved by them; it’s as easy as test­ing your web­sites in Opera Mobile Emu­la­tor or Fire­fox Mobile for Desk­top before releas­ing them. And if you’re some­one who’s crit­i­cised Opera for mak­ing this move but you haven’t tak­en the time to update your own web­sites to make sure they work in Opera, you’re part of the problem.

6 comments on
“On Opera’s Implementation of WebKit Aliases”

  1. Cool arti­cle with exact­ly the type of feed­back we need from devel­op­ers. That is use­ful. Thanks a lot. 

    Neat­pick­ing ;)

    “Opera recent­ly released a pre­view build of their browser ”
    should be in fact: “Opera recent­ly released a pre­view build of their Mobile Emulator”

  2. Thanks Karl; I’ve updat­ed the text to include your correction.

  3. I could­n’t agree more. These “WebKit Only Devlop­ers” (or WODS — http://www.iandevlin.com/blog/2012/04/css/on-vendor-prefixes-and-wods) are sim­ply lazy and can’t be both­ered to build sites correctly.

    Sure we all make lit­tle mis­takes and over­look some­thing which might not work in a spe­cif­ic brows­er, but there’s no excuse for specif­i­cal­ly writ­ing WebKit only code unless you are sure it will only be run on WebKit com­pat­i­ble soft­ware (e.g. in a closed environment).

  4. Last time I used box shad­ow on iOS it still need­ed the ‑webkit- prefix.

    Robert Daly [April 30th, 2012, 19:27]

  5. Just test­ed on a sim­u­la­tor run­ning iOS5.0, no pre­fix required. Will test it on a device when I can.

  6. […] On Opera’s Imple­men­ta­tion of WebKit Alias­es by Peter Gasston […]