Colorful build Opera 12.50

Work on a new stable release does not stop, and this week we are pleased to present you the assembly of Opera 12.50 with a whole bunch of new colorful features and improvements. As usual, we selected the most interesting for developers from them and we are in a hurry to share.

Context Menu APIs for Extensions

New APIs for extensions? Sure! This time, this is a useful method for adding items to the context menu (what is called by right-clicking). This may be useful for any interaction with the page or its contents.

The API offers precise control over the operation of the context menu, for example, only for links or only within a specific domain. You can also add submenus and control what happens when you click on a menu item, having access to the link address or to the text that is currently selected by the user.

In general, this API is ideal for developers who always want to activate their extensions differently than through a button on the panel. So try and read the details. in the latest context menu API documentation .

Fullscreen API

Fullscreen API is a simple set of JavaScript-methods (such as element.requestFullscreen() and document.exitFullscreen() ) and new pseudo-like :fullscreen , which allows pages and what is even more interesting, even the individual elements , such as videos or games on the Canvas, go to full screen mode.

As the simplest demo, we put together a simple video player with HTML controls and added new full-screen features to it: HTML5 video - cool controls for video using JavaScript, including support for the full-screen API . Please note that in this demo not only the video itself enters full-screen mode, but also the HTML controls that we made ourselves.

But as usual, with the new ever-living-HTML5-standard, you can never be sure that the specification has not changed since you introduced something. And so it happened: in this assembly, a version of the full-screen API dated February 7, 2012 was introduced , while the standard has partially changed and the latest version dates from July 2012 .

    from HTML5

A very nice feature from the ever-live-HTML5 standard was <ol reversed> added in this assembly. The specification says that “... the attribute is reversed boolean. Its presence indicates that the list is decreasing (..., 3, 2, 1). If it is absent, the list grows (1, 2, 3, ...) ”
By the way, if you combine an attribute reversed with an attribute start (which was extremely unfairly forbidden in HTML 4, but completely restored to its rights in HTML5), you can get a list, items which follow from zero and below. If you use non-decimal list markers (for example, Roman numerals), then the list numbering will become decimal after reaching one. The specification says:

Числа, меньшие или равные нулю, должны всегда использовать десятичную систему, вне зависимости от указанного типа.

For browsers that do not support the attribute reversed , there is a very interesting and semantically correct Luis Lazaris polyphile .

SPDY Support

Ah, how fast they grow ... Only a month ago we released an assembly of Opera Labs with support for SPDY , as this feature has already made its way into the main branch and is ready to appear in the final release.

As a pleasant bonus, this assembly is equipped with a pre-installed extension SPDY indicator , which is turned on if the site uses this new protocol. This means that you will no longer need to catch SPDY signs in the Opera Dragonfly network query panel .

If you previously installed extensions in Opera Next, the extension built into this assembly may not appear automatically. You can reinstall the new Opera Next build with a clean profile or just download the SPDY indicator from the extensions directory .

Nested constructions @media

As a first step in implementing the CSS 3 Conditional Rules specification , in this assembly we present support for nested constructions @media . Instead of compiling long, repeating lists of features:

@media only screen and (orientation: portrait) and (min-width: 480px) {
@media only screen and (orientation: portrait) and (min-width: 600px) {
@media only screen and (orientation: portrait) and (min-width: 768px) {

... you can now simply embed @media each other for cleaner, more convenient and understandable code:

@media only screen {
    @media (orientation: portrait) {
        @media (min-width:480px) {
        @media (min-width: 600px) {
        @media (min-width: 768px) {

ICC Profile Image Support

In addition to the image data itself, many formats (JPG, PNG, TIFF and others) allow you to embed color profiles. These ICC profiles tell programs how the source image data should be interpreted with the current color profile in order to display it more accurately. Most images on the network do not contain color profiles, so browsers display from as is, without any color correction. Nevertheless, enthusiasts and perfectionists from photography will be glad to know that if there are color profiles in their images, Opera will show them exactly as the author intended.

You can read more about ICC profiles in this beautiful and accessible example: Digital Image Color Spaces , but here is the simplest example:
If Bruce is blue on both pictures (and not warm and ruddy on one of them), then your browser does not support ICC profiles.

Both pictures are completely identical in terms of the original image data. They were created using excessively distorted color shift to illustrate the principle described. But the first photo contains an ICC color profile, reporting the necessary correction, while the second photo of this profile does not contain. Therefore, in browsers that do not support color profiles, both images will be displayed without any color correction (with blue distortion), and intelligent browsers will understand and correct the first image, according to the implemented color profile.