Cutting down on vendor prefixes

There are a bunch of CSS properties that we can safely stop using vendor prefixes for, or at least considerably cut down on the number of prefixes.

No need to provide vendor prefixes for all versions ever of all browsers ever nowadays. Take CSS3 transitions for example. The code below will do just fine in most cases:

.example {
    -webkit-transition:background-position 0.5s;
    transition:background-position 0.5s;

Cutting down on vendor prefixes →

Vendor Prefix Drama

Grab a bucket of popcorn and start reading. “YHWH” clearly doesn’t get it (UA sniffing, only prefixed properties, inline JS, …)

Hundreds of pages in our 16 plus domains DO NOT fade images on mouseover anymore, because the -moz-opacity:0.7 reading function is GONE.

Seems like he’s also forgetting the fact it only works used to work in Firefox and none of the other browers out there. #facepalm

Bugzilla Bug #765645: Millions of web pages use the -moz-opacity:0.7 tag and in javascript. It’s broken now since FF 13.01. Please can you “alias” it back into your main browser code. Thanks. →

Related: JSDrama

Proposition to change the prefixing policy

When a browser vendor implements a new css feature, it should support it, from day 1, both prefixed and unprefixed, the two being aliased. If a style sheet contains both prefixed and unprefixed, the last one wins, according to the cascade.

Authors should write their style sheets using the unprefixed property, and only add a prefixed version of the property (below the unprefixed one) if they discover a bug or inconsistency that they need to work around in a particular browser.

If a large amount of content accumulates using the a particular vendor prefix to work around an issue with the early implementation in that browser, the vendor could decide to freeze the behavior of the prefixed property while continuing to improve the unprefixed one.

Makes sense, but still the problem will exist that many examples that exist now only contain a prefixed version (those “Webkit only”-demos) of a property, breaking in other browsers — hence Opera about to support -webkit prefixes.

Proposition to change the prefixing policy →

Opera Mobile Emulator with support for (some) -webkit vendor prefixes

Opera, along with Mozilla, announced at a CSS Working Group meeting that we would support some -webkit prefixes. This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.

They’ve made some beta (labs) builds of their mobile emulator supporting -webkit prefixes.

Opera Mobile Emulator Labs Builds →
Opera Mobile Emulator Labs supported -webkit properties →

Be sure to also read Faruk Ates’ two posts on the the topic.