Colorful assembly Opera 12.50

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

Context Menu API for Extensions

New APIs for extensions? Of course! This time, it is a useful method for adding items to the context menu (what is called by right-click). This can be useful for any interaction with the page or its contents.



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

')

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

Fullscreen API

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



As the simplest demo, we have 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 full-screen API . Please note that in this demo, not only the video itself, but also the HTML controls that we made ourselves, go into full-screen mode.



But as usual, with the new ever-live-HTML5 standard one can never be sure that the specification has not changed since you implemented something. And so it happened: the full-screen API version of February 7, 2012 was introduced in this build, while the standard partially changed and the latest edition dates back to July 2012 .

<ol reversed> from HTML5

A very nice feature from the ever-living-HTML5-standard <ol reversed> added in this build. The specification says that “... The attribute is reversed boolean. Its presence indicates that the list is decreasing (..., 3, 2, 1). In its absence, the list increases (1, 2, 3, ...) "



By the way, if you combine the reversed attribute with the start attribute (which was extremely unfairly forbidden in HTML 4, but completely restored to your rights in HTML5), you can get a list whose items follow from zero and below. If you use non-decimal list markers (for example, Roman numerals), the list numbering will become decimal after reaching one. The specification states:

Numbers less than or equal to zero should always use the decimal system, regardless of the type indicated.

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

SPDY supported

Oh, how fast they are growing ... Only a month ago we released the assembly of Opera Labs with SPDY support , as this feature has already snuck into the mainline and is ready for the final release.



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



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

Nested @media constructs

As a first step in implementing the CSS 3 Conditional Rules specification, in this build we present support for nested @media constructs. Instead of making long recurring lists of opportunities:

 @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) { … } 

... now you can simply nest @media into 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) { … } } } 

Image Support with ICC Profiles

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



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 the wallpaper (but 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 an overly distorted color shift to illustrate the principle described. But the first photo contains an ICC color profile, indicating the necessary correction, while the second photo does not contain this profile. Therefore, in browsers that do not support color profiles, both pictures will be shown without any color correction (with blue distortion), and intelligent browsers will understand and correct the first picture, according to the embedded color profile.