Andreas Bovens by Andreas Bovens in Blog

Post tags: browser extensions odin opera opera-12 spdy standards

This post is licensed under a Creative Commons Attribution 3.0 Unported license.

Opera 12.10 Is Out

Today, we're happy to release Opera 12.10 for Mac, Windows and Linux! There are many goodies in this release, such as OS integration, improved standards support, new extensions APIs, compatibility tweaks and more. An overview.

OS Integration

built-in sharing functionality

Opera 12.10 for Mac supports a number of Mac OS X Mountain Lion features such as Notification Center (to let you know when e.g. a download is finished) and built-in sharing of pages to Facebook, Twitter, and more, and it also comes with Retina Display support.

Windows users aren't left out of course: as part of our continuing work on Windows 8 integration, Opera 12.10 has inertia scrolling and pinch-to-zoom on Windows 7 and Windows 8.

Pretty colors

Opera 12.10 also supports International Color Consortium (ICC) profile v4, which will make photographs more vibrant and colorful, displaying them exactly as the photographer intended.

In the example below, you see what difference this can make. This photo of a caterpillar by Flickr user Scarlet St looks more vibrant in Opera 12.10 compared to its predecessors, because the Adobe RGB (1998) profile included in the image metadata is applied (as intended).

color profile example

SPDY support

SPDY extension

Opera has always been about speed, so the new release incorporates the new SPDY protocol, which makes web pages load faster on SPDY-enabled sites such as Twitter, Gmail, WordPress and (soon) Facebook. For users, things will just work faster, but developers wishing to see which sites have SPDY support can download our SPDY indicator extension.

Extensions

Talking of extensions, we've added several new APIs to give more power to developers. The most notable of these is the Context Menu API that allows an extension to add options to the user's right-click menu. Other improvements include the Resource Loader API, the Screenshot API and an update to our URL Filter API.

We've also added support for high-DPI screens in our extensions framework: with two simple adjustments, you can make sure your extension icons look great on Retina Display screens. We invite you to read more about this particular change on the extensions blog.

extensions icons on high-dpi and regular screens

And last but not least, we've tightened extension security: by default, only extensions that are hosted by Opera may be installed, as these have been rigorously tested to ensure they're safe and don't harm a user's machine or data.

HTML5 and Web Standards

Opera is the browser that began the HTML5 specification that is transforming the web, so it's only natural that we'd be adding more support for the latest standards.

Opera 12.10 adds partial support for the Fullscreen API that allows video, games or web pages to use the whole screen to remove distractions like browser chrome that can divert your attention from skateboarding kittens or shooting aliens. (We say "partial" because new "HTML5 the living-on-the-edge standard" specs chop and change. This release implements the Fullscreen API editors' draft 7 February 2012, while the standard has now mutated in the latest July 2012 version.) Daniel has made a shiny demo showcasing how the API can be used.

There's also partial support for the Page Visibility API that allows a tab to know if it isn't visible so, for example, it could suspend resource-hungry animations or pause HTML5 audio/video until the tab returns to view. Daniel's demo also includes this API, so be sure to have a look at the source code.

hungry kittens

Web Sockets are in as well: now that security concerns with the spec have been addressed, we've turned on this functionality by default in Opera 12.10, and Luz has created a Web Sockets demo featuring hungry kittens. You can move around your cat and make it jump with the arrow keys, and meow with the spacebar, or by pressing the buttons underneath the image: the fun starts though when multiple people connect at the same time, and the room becomes overpopulated with jumping and meowing cats. Bonus: try it on Opera Mobile 12.1 as well.

We now also have support for the CSS Flexible Box Layout Module, aka Flexbox. For your enjoyment, Chris has prepared a Flexbox introductory Dev.Opera article. It's worth noting that we have implemented the recent spec without CSS prefix, but in addition, we're also aliasing the older Flexbox specification with a -webkit- prefix, for compatibility purposes. More info about this below.

And together with our Flexbox implementation, we've also added support for CSS Conditional Rules Module Level 3 aka @supports. @supports makes it much easier for authors to use new CSS features and provide a fallback mechanism for implementations that do not support those features. In other words, if you build a Flexbox-based layout, you may want to look into using @supports so as to provide an alternative float-based layout to non-Flexbox capable useragents.

User-Agent string changes

Opera 12.10 ships with a simplified UA string: we have dropped the "U;" token, as well as the language indicator. As an example, the UA string of Opera 12.10 on Mac OS X Mountain Lion is:

Opera/9.80 (Macintosh; Intel Mac OS X 10.8.2) Presto/2.12.388 Version/12.10

In a corresponding Mozilla bug report, Henri Sivonen explains why this matters. If you're interested in figuring out the user's locale, you should be looking at the Accept-Language header instead.

Both these changes correspond to similar changes in the IE, Firefox, Chrome and Safari browsers' UA strings.

CSS and Site Compatibility

Opera 12.10 now supports unprefixed CSS transitions, transforms, gradients, animations and flexbox. For a transitional period, we'll also support transitions, transforms and gradients with an -o- prefix, but these will be phased out in order to promote site compatibility and leaner code.

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.

If you're interested in the absolute minutiae, here is a handy cut-out-and-keep chart you can keep in your anorak pocket.

-o--webkit-unprefixed (standardized)
linear-gradientyes; old syntaxyes; old syntaxyes
repeating-linear-gradientnonoyes
radial-gradientnonoyes
repeating-radial-gradientnonoyes
animationnonoyes
transformyes (deprecated)yesyes
transitionyes (deprecated)yesyes
border-radiusnever existedyesyes
background-sizenoyesyes
box-shadownever existedyesyes
flexbox related propertiesnever existedyes; old syntaxyes

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.

The general rule is: use the finalised syntax in your CSS, add an unprefixed property/value to your code and you'll be fine.

So that's a wrap! Go get the latest build, play around with the latest features, and let us know what you think!