Bruce Lawson by Bruce Lawson in Blog

Post tags: gradients odin opera-12 prefixes webkit

This post is licensed under a Creative Commons Attribution 3.0 Unported license.

CSS Vendor Prefixes in Opera 12.50 Snapshots

Vendor prefixes have been useful, but they have arguably caused as many problems as they've solved, both in CSS and DOM APIs. So, in the run up to Opera 12.50, we're removing as many -o- prefixes from stable CSS properties as we can.

Last week, Patrick mentioned the removal of prefixes from Transitions, Animations and Transforms.

In today's Opera 12.50 snapshot, we're removing prefixes from CSS Gradients. The latest CSS Gradients syntax is supported in Opera with no prefix. Using an -o- will no longer work, so if your CSS still has some -o-linear-gradient hanging around, you should start to include the unprefixed version as well.

While it's encouraging to see that Opera, Firefox and even Internet Explorer 10 are accelerating the move towards unprefixing stable CSS properties, it's not all roses. The elephant in the room is of course the WebKit family of browsers, which continue to support the -webkit- prefixed stuff even in parallel with the unprefixed variants. This means that "Web developers" who only test in (or care about) WebKit have no incentive to move to unprefixed CSS, and their sites will look broken in non-WebKit browsers.

Admittedly, the history of linear-gradient has been very tumultuous, with a series of incompatible syntaxes being implemented at one time or another. Although we'd love to just support the new unprefixed standard, our testing has shown that there are many sites that use an older syntax, but do so with only a -webkit- prefix. In order to ensure Opera users don't receive a worse experience, we've included support for this older syntax when it's -webkit- prefixed. So, in Opera 12.50, the legacy syntax is supported:

background: -webkit-linear-gradient(top, white, black);

whereas the equivalent, newest syntax is supported without any prefixes:

background: linear-gradient(to bottom, white, black);

For reasons of site compatibility and interoperability, this Opera 12.50 snapshot also introduces aliasing for -webkit-background-size, as this particular property is heavily used on Japanese mobile sites. This brings the list of our aliased CSS properties to:

  • -webkit-background-size
  • -webkit-box-shadow
  • -webkit-transform
  • -webkit-transform-origin
  • -webkit-border-radius
  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-left-radius
  • -webkit-border-bottom-right-radius
  • -webkit-transition
  • -webkit-transition-delay
  • -webkit-transition-duration
  • -webkit-transition-property
  • -webkit-transition-timing-function

Therefore, if (for some reason) you're sending a different value to Opera than to webkit browsers, put the -o- prefixed rule after the -webkit- prefix, so the Opera one "wins" in the cascade.

You can find more information about this in our earlier article on the Opera Mobile Emulator build with experimental WebKit prefix support.