My OperaA colourful Opera 12.50 snapshot
By Patrick H. Laukepatrickhlauke. Tuesday, August 28, 2012 1:00:00 PM
As work steadily continues on our next stable release, this week's Opera 12.50 snapshot provides a colourful mixed bag of new features and improvements. As ever, we've cherry-picked the ones we find most interesting for developers.
Context Menu API for extensions
Another new API for extensions? Yes indeed! This time, it's a handy method to add items to the context / right-click menu. This can be useful for any kind of interaction with a page or its contents.
The API allows fine-grained control, making it possible for an extension menu item to only appear in the context menu for a link, or to only be present on certain domains. It's also possible to add sub-menu items which can be created with a folder-style structure. When a menu item is clicked, there are also a variety of event properties to enable you to work with things such as a link's URL or some text selected by the user.
In short, this API is ideal for developers wanting to activate their extension through more than just a toolbar button, so feel free to try it out following our freshly released Context Menu API documentation.
Fullscreen API
The Fullscreen API provides a simple set of JavaScript methods (such as element.requestFullscreen() and document.exitFullscreen()), as well as a new :fullscreen pseudo-class, that allow pages – and, more interestingly, even individual elements within a page, like a custom video player or a canvas game – to go fullscreen.
As a simple demo, I've hacked up one of my old video player examples (with custom HTML-based controls) to include this new functionality: HTML5 video - fancy video controls with JavaScript, including Fullscreen API support. Note that in this demo it's not just the video element, but the whole container – including the custom controls – that is going fullscreen.
As ever, with the new "HTML5 the living-on-the-edge standard", specs chop and change. This snapshot implements the Fullscreen API editors' draft 7 February 2012, while the standard has now mutated in the latest July 2012 version.
HTML5 <ol reversed>
A nifty feature from HTML5-the-living-standard is <ol reversed>. The specification says "The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...)."
Note that if you combine reversed with the start attribute (which was bizarrely deprecated in HTML 4 but re-instated as a full member of the attribute gang in HTML5) you could encounter lists counting to zero or below. If you're using a counter style that isn't decimal (for example, alpha or roman numerals), the list will be decimal when it drops below the value that corresponds to 1. The spec says:
Numbers less than or equal to zero should always use the decimal system regardless of the type attribute.
For browsers without support, there's a clever and semantically meaningful reverse ordered lists polyfill by Louis Lazaris.
SPDY support
They grow up so quickly...only last month we released an Opera Labs build with SPDY support, and now it graduated to our main branch, on track for inclusion in our next stable release.
As a bonus, this snapshot also comes bundled with a SPDY indicator extension that shows you when a site uses SPDY...no more hunting around in Opera Dragonfly's network panel for those extra headers!
If you previously installed extensions in Opera Next, the bundled extension may not show up automatically. Either reinstall this snapshot with a clean profile, or simply grab the SPDY indicator extension from the addons site.
Nested @media blocks
As a first step towards our implementation of CSS 3 Conditional Rules, this build introduces support for nested @media blocks. Instead of long and repetitive @media feature lists such as:
@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) {
...
}it's now possible to nest media queries, allowing for much cleaner, leaner and most importantly more understandable CSS:
@media only screen {
@media (orientation: portrait) {
@media (min-width:480px) {
...
}
@media (min-width: 600px) {
...
}
@media (min-width: 768px) {
...
}
}
}Support for images with ICC Profiles
Beyond containing the image data itself, many image formats (JPG, PNG, TIFF to name a few) allow for embedded colour profiles. These ICC profiles tell programs how the raw image data should be interpreted, mapped to the currently-used colour space, and ultimately displayed. The large majority of images on the web don't contain embedded ICC profiles, so browsers will simply display them without any sort of color correction. However, photo enthusiasts and perfectionists will be pleased to know that, should their images contain specific profile information, Opera will display these as intended.
For further information on ICC profiles, I'd recommend this excellent and accessible primer on Digital Image Color Spaces, but here's a simple example.
If Bruce looks blue in both images, your browser doesn't support ICC profiles.
Both of these images are exactly the same, in terms of their raw image data. They were created using an exaggerated custom colour profile, to more clearly illustrate the point. The first image contains an embedded ICC profile, which signals to colour-managed programs how to interpret the data, while the second image doesn't. In browsers that don't support colour profiles, both images will be displayed without any colour correction (resulting in the funky colour shift), while ICC-aware browsers will correct and display the first image based on its embedded ICC profile.
And here's the Russian translation of this post: Красочная сборка Opera 12.50.
