-o- vendor prefixed CSS supported in Opera 10.50 and 10.60

June 25, 2010 · by Bruce Lawson

The CSS specification allows for vendor-specific extensions. These are usually (but not exclusively) used for experimental additions to the CSS specification that have not yet reached Candidate Recommendation stage. The following are used in Opera 10.5x and Opera 10.60:

-o-table-baseline see A MathML for CSS Profile
-o-text-overflow see CSS3 Text Module section
-o-transform see CSS 2D Transforms Module Level 3
-o-transform-origin see Transforms Module Level 3
-o-transition see CSS Transitions Module Level 3 (Partial support, see http://www.opera.com/docs/specs/presto25/css/transitions/). CSS transitions are supported on certain animatable properties.
-o-transition-delay see CSS Transitions Module Level 3
-o-transition-duration see CSS Transitions Module Level 3
-o-transition-property see CSS Transitions Module Level 3
-o-transition-timing-function see CSS Transitions Module Level 3

In addition to using -moz-, -ms-, -o- and -webkit- extensions (I usually put them in alphabetical order), the final declaration should use the unprefixed version. That way, future browsers that include the feature after it becomes fully standardised can apply the style.

(This carries a risk that the specification might change, but if you choose to use experimental features on production sites you need to be aware that there is a risk. The risk a spec may change is a better bet than the certainty that future browsers won't be able to use your rules if you don't use a non-prefixed version: see Bruce's Writing cross-browser, future-proof CSS 3 for more discussion.)

Opera 10.5x also supports the extension -o-tab-size which defines how many spaces a tab character displays as inside <pre>, for example {-o-tab-size:3;}.

We also publish a full list of Web specifications supported in Opera Presto 2.5.

Peter Beverloo has written an Overview and comparison of vendor-prefixed CSS properties.

Readers' comments 16

Left under the original article, as archived.

Unregistered userFriday, June 25, 2010 2:10:52 PM
Nicolas writes: Any news about linear/radial gradients?
Bruce LawsonFriday, June 25, 2010 2:25:27 PM
none that I can talk about!

I use {background-image:url(gradient.svg);} to pull in an SVG gradient
edvakfFriday, June 25, 2010 2:31:24 PM
@Bruce
To apply that only to Opera you need some kind of CSS hack for Opera, don't you?
Bruce LawsonFriday, June 25, 2010 2:42:41 PM
No: it's perfectly legitimate CSS but isn't supported by other browsers (haven't tried it on IE9)

edvakfFriday, June 25, 2010 4:34:26 PM

I see, I got it. Linear gradient for Opera and all http://edv.sakura.ne.jp/lineargradient.html yey!
For url I'm loading ;

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="grad" x1="0" y1="0" x2="0" y2="100%">
    <stop offset="0" stop-color="#ccc" />
    <stop offset="1" stop-color="#000" />
  </linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#grad)" />
</svg>

Cutting SpoonFriday, June 25, 2010 4:36:41 PM
Thanks for the update! I assume you've been using these prefixes for a while now?
Bruce LawsonFriday, June 25, 2010 4:59:13 PM
@evdakf - perfect. If I were cleverer, I'd make a site that you paste your webkit or firefox gradient code into and it spat out the data-encoded SVG for you. Or even adapt http://www.westciv.com/tools/gradients/

But I'm not that clever ...

@cuttingspoon The transitions and transforms are new in O10.50
Unregistered userFriday, June 25, 2010 5:23:33 PM
Divya Manian writes: @edvakf Apart from Opera, IE9 latest preview supports SVG as background image (even in multiple backgrounds) and Webkit does too. Firefox nightlies support them too I think.
YongShunFriday, June 25, 2010 6:15:21 PM
o.O But Opera 10.6 shows: Presto 2.6.30
Cutting SpoonFriday, June 25, 2010 9:55:10 PM
Bruce: Then they've been there since early 10.50? That's what I am unclear on. I probably missed the release where this was first mentioned.
Bruce LawsonSaturday, June 26, 2010 7:38:46 AM
Cutting Spoon: yes.
Witold BarylukTuesday, July 6, 2010 11:39:15 PM
How about transition looping? it will allow simple animations. Or you think webkit's approach is better?
Witold BarylukTuesday, July 6, 2010 11:41:15 PM
-o-tab-size I VERY USEFULL. I was waiting for it for years!
Bruce LawsonWednesday, July 7, 2010 7:42:57 AM
Witold, r/e transition looping; we haven't finished with all the new CSS stuff yet!
Witold BarylukWednesday, July 7, 2010 11:45:23 PM
Originally posted by brucelawson:

Witold, r/e transition looping; we haven't finished with all the new CSS stuff yet!

Yes, i know. Just wondering is anybody is thinking about it.

For sure things like gradients should be implemented first as they are already supported and on the standard track.
Martin RauscherTuesday, July 13, 2010 7:49:55 AM
What does "table-baseline" exactly do? The spec is a little thin there...