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

, ,

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:

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.

Opera 10.60 moves to the beta zoneHTML5 <video> Artikel und Wettbewerb auf Chip.de

Comments

Anonymous Friday, June 25, 2010 2:10:52 PM

Nicolas writes: Any news about linear/radial gradients?

Bruce Lawsonbrucelawson Friday, 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

edvakf Friday, 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 Lawsonbrucelawson Friday, 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)

edvakf Friday, 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 data:image/svg+xml;
<?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 Spoonhellspork Friday, June 25, 2010 4:36:41 PM

Thanks for the update! I assume you've been using these prefixes for a while now?

Bruce Lawsonbrucelawson Friday, 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

Anonymous Friday, 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.

YongShunyongshun Friday, June 25, 2010 6:15:21 PM

o.O But Opera 10.6 shows: Presto 2.6.30

Cutting Spoonhellspork Friday, 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 Lawsonbrucelawson Saturday, June 26, 2010 7:38:46 AM

Cutting Spoon: yes.

Witold Barylukmovax Tuesday, 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 Barylukmovax Tuesday, July 6, 2010 11:41:15 PM

-o-tab-size I VERY USEFULL. I was waiting for it for years!

Bruce Lawsonbrucelawson Wednesday, July 7, 2010 7:42:57 AM

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

Witold Barylukmovax Wednesday, 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 RauscherHades32 Tuesday, July 13, 2010 7:49:55 AM

What does "table-baseline" exactly do? The spec is a little thin there...

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.