Is the fat lady singing for Vendor Prefixes?

Although this has been in the pipeline for the last couple of months, last week Opera announced that they will support a small number of proprietary vendor prefixes from Apple/Google’s -webkit engine.

This defy’s the convention, standards and agreements around the use of vendor prefixes in the CSS specifications; but it is not a decision nor action that they have taken lightly or without cause.

Rest assured, this is both huge, and just the tip of the iceberg.

What’s meant to happen

The process for displaying styles in a browser is based on two properties: The code we write, and the interpretation of said code.

It’s the combination of the two that causes issues, but thankfully we have an agreed process in place.

**What developers are meant to do**

What developers are meant to do with CSS3

Please note, for those who love to be pedantic, that “property-name” is a placeholder for the name of a CSS property. I know there is no such CSS property as “property-name”. I also can’t believe I’ve had to write this!

**What the browsers are meant to do**

Browsers are meant to support/interpret 2 lines of CSS code. The agreed property (that may or may not be fully defined) and an experimental prefixed version specific to each vendor.

Browsers are then meant to deprecated their prefixed version once the agreed property reaches “Candidate Recommendation” stage in the W3C process for ratification in the specification.

This is key to ensure interoperability, and to give developers the carrot & stick for implementing the correct coding conventions (agnostic and proprietary).

What’s actually happening

**What developers usually do**

What developers are actually doing

Please note, for those who love to be pedantic, that “property-name” is a placeholder for the name of a CSS property. I know there is no such CSS property as “property-name”. I also can’t believe I’ve had to write this!

**What the browsers are actually doing**

Opera, Firefox and IE (yes, IE) are all following the process.

Apple/Google on the other hand are NOT following through with the final step. Y’know, the crucial one!

The webkit engine is not removing support for its proprietary prefix in favour of the standard property – against the agreed process.

e.g. -webkit-box-shadow and box-shadow both work in Webkit, while Opera removed support for -o-box-shadow once box-shadow became standardised.

The problems this causes

The actions, or inactions of Apple/Google removes the need for developers to code against the standards, as they know that CSS properties with the “-webkit” vendor prefix is going to work forever; while the other browsers will eventually support the standard property.

In essence, Apple/Google are creating a two tier browser baseline: Webkit (supports -webkit) and the others (support standard properties).

Which is funny, because didn’t we already realise this was a bad idea about 10 years ago? Haven’t we spent the last 10 years blaming Microsoft for being Evil and making IE6 non-standard friendly? Isn’t IE6 and it’s different rendering engine the root of all evil? Isn’t it worrying that we’re going down this road again?? Why is it ok because it’s Apple/Google? Oh, right, they’re not Microsoft…

This is expedited when we get to Mobile development, where the browser market is massively different to that of the desktop.

It’s not about developers, it’s about users.

I’m really disappointed in Opera for making this decision. I know it may not seem it here because I’m offering a somewhat defending viewpoint, but I am disappointed that they’ve taken this decision.

Deep down though, I know they had no choice.

I’ve seen it with my own eyes and heard it with my own ears. Whenever a friend of mine has moved away from IE in the last year I have recommended Chrome or Opera. Those that have chosen Opera, especially those convinced to try it on their phone mobile, have came back raving about it, but after a short while have to change browser again because “it didn’t work with loads of websites”. I know thats somewhat anecdotal, but thats what we developers sometime miss – it’s about USERS not code.

If a user cant get a website to load / navigate / display properly they think “it’s broken”, they don’t think “hmmm, i wonder if the developer used the correct vendor prefix for this…”. If it continues to happen, users blame the tool (the browser), regardless of where the fault actually lies (developers).

Opera had no choice

Opera’s market share has changed considerably, and we web-heads don’t give Opera (or other non-webkit/firefox browsers) enough credit.

At the end of last year Opera had 21.7% of the Mobile browser market . That’s a market that is more than doubling each year for the last 5 years, and no your iPhone still isn’t the most popular phone.

In March 2012 Opera had 5.5% of hits to Wikipedia (almost double Android’s 3%).

Most importantly though is this graph:

Global mobile browser usage march 2012

Opera is THE most popular mobile browser GLOBALLY.

Yes, iPhone rules North America and UK. Yes, iPhone rules the hearts and minds of designers and front-end developers. Both of those segmentations are a drop in the ocean. But Globally, Opera is kicking ass. And we all remember that “www” was the “WORLD wide web” right? right!

We all talk about Mobile First and Responsive Web Design and HTML5 and Nyan Cats and the open web and the mobile web and every other fracking buzzword and meme; and yet the most popular mobile browser in the world is finding that developers are simply not writing the code that to supports it.

Proof is in the pudding

Opera have yet to release their data, so lets go on Mozilla’s sample data set . It’s shocking!

Lets take “border-image” as an example:

# of sites % of sites Prefix
3330 24.08% border-image
9144 66.13% webkit-border-image
1338 9.68% moz-border-image
15 0.11% o-border-image
1 0.01% ms-border-image
Browser # supported sites Max % sites displayed correctly
Webkit 9144 100%
Firefox 4668 33.76%
Opera 3345 24.19%
IE 3331 24.09%

Out of the top 18000 websites, only 15 sites used both the Opera and Webkit vendor prefix, while a staggering 9129 websites only used the -webkit prefix. 66.01% of websites in the top 18000 won’t display the same in both Opera and webkit even though both support the code to do so.

Opera control a quarter of the mobile market, and yet two thirds of websites won’t display properly in it! Make no mistake, we backed Opera into this corner. We weren’t putting our users first, so they had to.

Opera are the first domino to fall

Lets be clear: 42% of mobile sites ONLY have the -webkit property and don’t carry the standard specified property without the prefix.

That is the crux of the issue because that is going to hit every other browser that isn’t webkit. This isn’t about Opera, Firefox, or IE. It’s about developers that claim to love standards and the open-web, but then purely code for 1 specific browser.

Opera have taken a step to help their users; and Mozilla are already looking at the stats to see if they need to do the same (see: Chrome Compare and Bug 708406 – Analysis of the use of vendor-specific CSS property prefixes on the web).

Sadly, this won’t be the only browser to make this change (its not even the browser that floated the idea).

( For the record I doubt IE will implement other vendor’s prefixes, even if the single deciding reason is “we have to stay as on standard as possible, or somehow people will think this is all our fault”. )

Here’s some quotes from the last Working Group meeting for context:

You can read all about it here: [CSSWG] Minutes 2012-02-06: Vendor Prefixes

[Mozilla]: Sites have webkit-specific content, and serve backup content to everyone else. Specifically for mobile content.
Non-WebKit browsers face prisoners dilemma similar to quirks in 2003 or so at this point we’re trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla.
Currently we have zero.
Zero is no longer an option for us.

[Adobe]: We are operating in an environment where we can’t control users of our standards. We can influence them, that’s point being made; but too many of them doing too little reading that we can impact them.

[Mozilla]: Web standards activists are teaching people to use -webkit. You will see presentations from all the web standards advocates advocating people to use -webkit prefixes.

[W3C]: A long time ago, Mozilla had an Evangelism team that would call up the website owners and ask them to change.
[Opera]: Opera has a large and active one, but it does not scale.
[Opera]: Evangelism has failed.
[Microsoft]: Evangelism has failed.

[Mozilla]: We haven’t had content breaking because of dropping the [prefixes].
[Apple]: We probably would have content break in WebKit if we did that.

[Google]: There’s enough legacy (webkit) content that there are some properties that we can’t drop the prefixes.

The long tail effect of failure

Webkit vicious circle

What we are seeing from Opera & Mozilla over the past 5 weeks is simply the long tail effect of failures. As with all good vicious circles, no single person/organisation is to blame, we are all to blame!!

  • Developers you have failed to support the browsers that your users chooses. You have failed in supporting the standards you claim to love. You have failed to stay up to date and informed with what is an ever changing industry and specification.
  • Web Standards activists you have failed to support the browsers that users choose. Blinkered by looking towards the future yet defined rather than the world today, you have marginalised the choices you claim that web standards promote.
  • Authors you have failed to support the browsers that users choose. You have failed to update your own articles. All but 2 of the first 10 results on Google for “CSS3″ contain non-updated and are inaccurate information especially regarding browser prefix.
  • Opera you have captured a market that is not North America or the UK. You bastards.
  • Microsoft apparently some folks are still sure you’re to blame for this, and everything else that will ever go wrong on the web ever.
  • Apple / Google you have not deprecated your “experimental” vendor prefixes so that developers are forced to use the standardised properties.

Me ? I’m guilty of each of these things.

Actually, we’re all guilty of some of this, and we’re all to blame for finding ourselves in this predicament. We rush head first into whatever works and looks cool, regardless of how effective, sustainable or widespread our goal is. Words like Accessibility and Usability, the ideas surrounding choice & interoperability, standards and the open/free/mobile/nyan-cat web have been reduced to buzzwords and shields to hide behind while we go back to our default position of doing the minimum.

The Web [...] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.

Tim Berners-Lee: Long Live the Web: A Call for Continued Open Web Standards and Neutrality

Sorry Tim, we’ve not only allowed this catastrophe to happen, we’ve facilitated its downfall.

Where do we go from here?

The first action we need to take is to pressure Apple/Google/Webkit to implement the correct standardisation of properties by dropping support for “-webkit” where the non-prefixed version is standardised, and not circumvent the agreed process. Make no mistake, by favouring the continued use of “-webkit” over the non prefixed version as specified in the CSS2.1 and CSS3 spec THEY are the organisation that gave developers the permission to not write their code in a standardised way.

Second, we need to create a centralised place with the right information; at the right level of detail. You and I know what we’re doing, but frankly the internet is awash with mis-information and people circumventing the standards whenever it matches the “coolest” thing. Bruce Lawson once pointed me towards Web Standards Curriculum that Opera open-sourced/submitted to the W3C; but it’s not written for today’s developer, it’s written for people who already know better.

Third, we need the HTML/CSS Validator services to flag lack of standards as errors. If you have a -webkit and don’t have the non-prefixed version, then thats an error. If you have -webkit but don’t have -moz, or -o thats a warning (ideally an error). Deep down we want the web to be a better place, and that only happens if we educate.

Fourth, lets stop with the minimising CSS. I know that will cause controversy, but we’re saving a few KB and making it harder for people to debug our code. And before anyone starts giving me the “data on mobile excuse” I refer you to images in responsive design, and the fact that celebrated responsive sites in prominent magazines are now reaching 5Mb to download on a mobile device! The web grew on the ability for people to inspect code, read, learn and iterate; lets get back to basics.

Fifth, We need the CSS Working Group to move quicker. A heck of a lot quicker! Part of Apple/Google’s “get-of-out-jail-while-people-still-think-microsoft-are-always-the-bad-guys” card is that the CSSWG (and every other Working Group involved with CSS and HTML5) are so horrendously slow at standardising anything that people are without clear and unifying direction. That shitty excuse didn’t work for Microsoft back in the day, and it’s not working now either; but thats not to say that their point is wrong, just the level of slack they want cut because of it.

Finally, we need to name and shame. Not one of us likes that idea, but we do, sorry. It’s the only way that people will take notice. Take the Alexa top 10,000. Take the FTSE 500. Take the Top 100 digital Agencies and go through the sites they have built. Trust me, it only takes a few “Websites built by R/GA don’t work on 250million mobile devices” messages and things change.

Back to the Future

We’ve been here before, you and I.
We’ve seen what a monopoly can do to the web.
We’ve seen what a lack of standards can do for all of those “edge-cases”, who are arguably are the people who benefit most from standards and a free open-web.

I don’t know about you, but I don’t want to go back to that.

We need to stop blaming the people making the changes to try to HELP their users. We need to stop blaming the edge cases. We need to work together, and bluntly, we need to stop patting ourselves on the back for toppling IE6 and realise that the “open-web” is not yet here. We’re far too self congratulatory and sycophantic, and far too quick to presume the cool thing is also the right thing.

Back to the Future - johnny B Goode

At the risk of using a poor Back to the Future analogy:

The family browsers in the picture are fading one by one, and its up to us to kiss Lea Thomson embrace the standards we all claim to love so that Marty can play some cool guitar Marty can make Teen Wolf and we can save Doc Brown the web with the information from the 1950s the original browser wars.

Llorando (crying)

We either need to embrace the standards we claim to love, or accept that we’ll be back to a 2 browser market within a very short period of time.

  • Opera are pulling out all the stops to stay relevant; but we’re not helping them.
  • Firefox’s development is paid for by Google, and who knows how long that will last.
  • Safari has no market share on non-Mac’s to speak of.
  • Google Chrome will be coming to the iOS devices in the next 2 months

I don’t know about you, but I can’t believe that we’ve allowed ourselves to be in this position once again.

The Fat Lady, she is clearing her throat for her next performance…


Edits:

I’d like to address some of the points raised since originally posting this article.

  1. The article originally had a picture of Adele to which some people took offence. I’ve removed the image and ask those offended to accept my sincere apology. I never thought anyone would read the article, let alone take offence; and I’m genuinely sorry.
  2. In the CSS Working Group meeting that this article references, Tantek Çelik, the Mozilla representative directly names Lea Verou as being one of the “Web standards activists [that] are teaching people to use -webkit”.

    Apparently, on an unknown website at an unknown time later, he recanted the statement in terms of Lea Verou specifically, though the general statement regarding activists still stands.

    I have not seen that article, but have been told by the many angry fans of Ms.Verou (and the good lady herself) that she is a wronged party in this. I am more than happy to add the link to the apology/comment/blog-post by Tantek Çelik if someone e-mails it to me.

  3. I really like Twitter, but struggle to reply quickly (I live in a place with no internet) or adequately in 140 chars. If you follow me, I’ll do my best to reply as soon as I can. I’m more than happy to talk to people over email or Google+.