Unlike certain browser vendors I could mention, Opera makes an effort to add shiny new features when they release an update. Version 11.60 is no exception although few users will notice changes unless they’re using:
- Opera’s built-in email client — it’s been redesigned, or
- the address field — it has a new quick bookmarking/speed-dial star icon
Apart from various bug fixes, all the exciting enhancements are under the hood in the Presto 2.10 rendering engine. Developers: prepare to tinker…
New HTML5 Parser
Opera implements the W3C HTML Parsing specification. It defines a set of parsing rules — for valid and invalid HTML — to ensure all browsers produce the same DOM. This will improve website rendering compatibility although we’ll need to wait until all vendors follow suit.
ECMAScript 5.1 Support
Opera 11.60 has full support for the ECMAScript 5.1 specification.
Microdata DOM API
Microdata attributes such as itemprop and itemscope can be queried using JavaScript. For example, assume a page contains contact details defined using the Schema.org person definition:
<div itemscope itemtype="http://schema.org/Person">
<p itemprop="name">Craig Buckler</p>
<p>URL: <a href="https://www.sitepoint.com/author/craig-buckler/" itemprop="url">https://www.sitepoint.com/author/craig-buckler/</a></p>
</div>
We can interrogate this data using JavaScript:
// fetch the first person in document
var person = document.getItems("http://schema.org/Person")[0];
// show first name defined
alert("This article was written by " + person.properties["name"][0].textContent);
CSS rem Units
CSS rem units calculate the size of a font relative to the root rather than containing elements. The property can be used in CSS or SVG.
Radial Gradients
Opera now offers radial gradient and repeated-radial-gradient to supplement linear gradient support. The syntax:
-o-radial-gradient(position, size and shape, color stops);for example:
-o-radial-gradient(50% 50%, 50px 50px, #000, #fff)CSS4 image-rendering Property
This property specifies which scaling algorithms should be used for images, backgrounds, canvas elements, and border images, e.g. crisp-edges, optimize-contrast, nearest-neighbor, optimizespeed, optimizequality etc.
Better HTML5 <audio> and <video> Support
The following attributes/properties have been implemented:
- preload — can be set to “none” (minimizes server traffic), “metadata” (permits fetching of track lists, durations, etc.) or “automatic” (can optimistically download the entire media resource).
- buffered — the time range of the media
- seekable — the seekable time range for the media
- muted — mutes audio output
Custom Protocol and Content Handlers
You’ve probably used “mailto:email@address.com” or “tel:01-234-567890” in links to launch default email clients or telephony applications. Opera now supports the new navigator.registerProtocolHandler and navigator.registerContentHandler objects which allows you to create your own protocols and define handlers. For more information, refer to this DEV.OPERA article.
DOM4 Events
Like recent webkit builds, Opera 11.60 allows you to use the following DOM4 APIs:
- synthetic events: fire a UI event from code, e.g. pressing a key, focusing on an input field, moving the mouse over an element, etc.
- custom events: defining your own event types, e.g. a “die” event when a game character is shot.
Speculative Parsing
Under normal circumstances, browsers delay downloads and rendering until loaded scripts have been executed. Speculative parsing continues to load resources such as images and CSS files in readiness for rendering — this can boost performance on script-heavy pages.
Graceful XML Failure
Rather than show an “XML parsing failed” error, Opera will now attempt to render badly-formatted XML (XHTML) documents as HTML — even when they’re served with the application/xhtml+xml MIME type. While this will fix many rendering problems, you can switch it off in Opera’s config panel.
Even better for those feeling festive, Bruce Lawson has sung a Christmas Carol about the changes.
Opera 11.60 is available for most platforms at opera.com.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
