CSS -o- vendor extensions support in Opera Presto 2.12

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 -o- prefix extension identifies an Opera experimental property or keyword.

Opera recommends that the final declaration of the property should be added to your style sheet if you use the unprefixed version. That way, future versions of the browser that include the feature after it becomes fully standardized can easily apply the style. See the following example.

-o-transform: scale(1.6);
transform: scale(1.6);

Recent changes:

Opera -o- vendor extensions

Please note that each vendor extended property is hyperlinked to its place in various CSS modules.

Property CSS module reference Support
-o-border-image CSS3 Backgrounds and Borders Module
Note: Opera only supports the border-image shorthand property with the use of the -o- prefix.
Yes
-o-device-pixel-ratio Note: This property is not yet part of a W3C CSS working draft or recommendation. It determines the resolution of a device's screen, and describes the ratio of device pixels to css pixels. This value consists of two positive integers separated by a slash ("/") character, and represents the number of screen pixels over the number of CSS pixels. Yes
-o-object-fit CSS3 Image Values and Replaced Content Module
Note: Originally "image-fit", renamed to "object-fit".
Yes
-o-object-position CSS3 Image Values and Replaced Content Module
Note: Originally "image-position", renamed to "object-position".
Yes
-o-tab-size CSS3 Text Module Yes
-o-table-baseline MathML for CSS Profile Yes

-o-prefocus

-o-prefocus is a pseudo-class introduced in Opera 9.5 that allows styles to be targeted for Opera only.

Example: The following will make text in the 'example' class red in Opera only.

doesnotexist:-o-prefocus, .example {
  color: red;
}

-o-highlight-border

The -o-highlight-border value will outline an element with a bright blue border.

Example: The following will add a bright blue border around any input element with class 'hi' when it has focus.

input.hi:focus{
  outline:-o-highlight-border;
}

Support for selected -webkit- prefixed properties

This release also introduces support for certain -webkit- prefixes on sites that don't correctly use unprefixed versions of stable CSS properties.

Broadly speaking, where developers haven't coded for cross-browser compatibility, Opera will treat -webkit- rules as if they were unprefixed and therefore render the sites properly so users aren't penalized.

Of course, this also has an effect on any related JavaScript events and properties – so things like the oTransitionEnd event will be dropped in favor of the unprefixed (and lowercased, as per spec) transitionend event.

Here is a full overview of supported prefixed properties.

-o- -webkit- unprefixed (standardized)
linear-gradient yes; old syntax yes; old syntax yes
repeating-linear-gradient no no yes
radial-gradient no no yes
repeating-radial-gradient no no yes
animation no no yes
transform yes (deprecated) yes yes
transition yes (deprecated) yes yes
border-radius never existed yes yes
background-size no yes yes
box-shadow never existed yes yes
flexbox related properties never existed yes; old syntax yes

For linear gradients, "old syntax" refers to the previous syntax of specifying bottom left for a linear gradient as opposed to the standardized syntax to top right, which is supported without a prefix.

For flexbox, "old syntax" refers to the previous box-flex syntax, as opposed to the more recent flex syntax.

"Deprecated" means that we will remove support for the -o- prefix in a future version of Opera.

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.