{--o--} (-o-) Vendor Extensions | CSS: Presentation Layer
Standards Based Development
The -o- prefix extension identifies an Opera experimental css property or keyword.
Note: the final declaration of the property should be added to your style sheet when using unprefixed version(s). This practice future proofs your css for newer browser versions that include the feature once it becomes fully standardized. Future proofing via css (and html) are simply forms of progressive enhancement, at its most basic level. The example below demonstrates this
-o-transform:scale(1.6);
transform:scale(1.6);
Opera -o- Vendor Extensions
| Property | css Module Reference | Support |
|---|---|---|
| Note: each vendor extended property links to its relative in the css module. | ||
-o-border-image | css3 Backgrounds and Borders Module Note: Opera only supports the | Yes |
-o-device-pixel-ratio | Note: This property is not yet part of a w3c css3 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 | Yes |
-o-object-position | css3 Image Values and Replaced Content Module Note: Originally | Yes |
-o-tab-size | css3 Text Module | Yes |
-o-table-baseline | MathML for css Profile | Yes |
-o-prefocus Vender Extension Pseudo-Class
-o-prefocus is a pseudo-class allowing styles to be targeted by Opera only. Opera's equivalent to conditional comments, -o-prefocus was introduced in Opera 9.5. In the following example, the text in the example class will be red in Opera only:
-o-hightlight-border Vender Extension
-o-prefocus is a vendor extension property that outlines an element with a bright blue border; exactly what the example below shows, a bright blue border will appear around any input class="hi" / when it recieves focus.
Opera Support for Selected -webkit- Prefixed Properties
Opera Presto 2.12 introduced support for select -webkit- prefixes as a response to the extraordinarily large number of web sites that do not correctly use unprefixed versions of stable css properties. Essentially, Opera is accepting WebKit Prefixes because of the lack of support for cross-browser compatibility coding standards in place by the majority of web developers today. When Opera now come across this wretched web documents it will treat -webkit- rules as if they were unprefixed and therefore render the documents properly, ultimately not penalizing the user. Here Opera is finely exhibiting one of the greatest features and drawbacks in user agents: being forgiving to front-end technologies for the benefit of the user.
Effects on JavaScript
Opera's switch to supporting WebKit properties naturally had an effect on related JavaScript events and properties. For example, the oTransitionEnd event gets dropped in favor of unprefixed (and lowercased (as per spec)) transitioned event.
-o- | -webkit- | Standard (Unprefixed) | |
|---|---|---|---|
Note: for linear gradients, old syntax refers to the previous syntax of specifying | |||
Note: for flexbos, old syntax is the previous | |||
* Deprecated refers to the removal of support for the | |||
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 (and related properties) | never existed | yes; old syntax | yes |
SOMETHING TOTALLY WAS HERE BUT NOW IS NOT!!! YAY! allowing styles to be targeted by Opera only. Opera's equivalent to conditional comments, -o-prefocus was introduced in Opera 9.5. In the following example, the text in the example class will be red in Opera only:
-o-prefocus Vender Extension Pseudo-Class
-o-prefocus is a pseudo-class allowing styles to be targeted by Opera only. Opera's equivalent to conditional comments, -o-prefocus was introduced in Opera 9.5. In the following example, the text in the example class will be red in Opera only: