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:
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 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;
}
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;
}
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.
Need help? Hit F1 anytime while using Opera to access our online help files, or go here.