I couldn’t find anywhere that lists the new standards support in Opera 12 alpha all in one place, so I thought I’d write it up here for my own benefit. You might also find it useful.
Opera 11.51 uses Presto 2.9, milestone 168, while while the alpha version of Opera 12 has been upgraded to milestone 220. The way Opera works is they have regular milestone releases of their core Presto rendering engine, that may include one or more tasks. These tasks could be anything from something big like a whole new feature (e.g. WebGL), to a raft of performance enhancements, to a group of bug fixes for site compatibility reasons.
The latter doesn’t get much column inches but they’re a vital part of the health of a browser. There will be hundreds, if not thousands of these small fixes in the alpha release. In theory, with every new release the browser will work better with the top sites (well until someone releases a new site that wasn’t tested, and the process of identifying issues, analysing, making test cases, bug fixing, integration, and releasing happens all over again), and existing features will get more compliant with the spec.
This blog post is about the new features though, so lets take a look at what they are.
HTML5 parser
This is probably the star of the show in Opera 12 alpha, even if perhaps the least glamourous. The old HTML4 parser has been thrown away and replaced with Ragnarök, the new HTML5 parser. If you code your pages correctly then you will not notice much difference, but if you do not create well formed markup (such as using incorrect nesting), then Opera will render more consistently with other browsers. This is because up until HTML5, the HTML spec only defined what should happen when markup was valid. Unfortunately this wasn’t enough as many sites do things incorrectly. Now in HTML5 the error handling is defined, so all browsers should in theory do the same thing. I know this was a huge task in of its own, but it will likely fix thousands of pages.
You do get some new things to play with though. With the HTML5 parser, SVG and MathML can be used in HTML documents. Previously they had to be used with documents served as XML (such as XHTML).
Enhanced HTML5 Video
Opera’s HTML5 video support has been enhanced to add two new attributes and two new DOM properties:
Preload attribute
The preload attribute allows you to control if the video resource is automatically downloaded on page load. It accepts three values: none, metadata, and auto.
If you use preload="none" then the resource will not be downloaded in advance of pressing the play button (or other method of starting the download). You could imagine this being useful on constraint networks or when multiple videos are included in one page.
The metadata value will fetch the video metadata, such as the first frame (e.g. to use as a poster placeholder), duration of the video, size, track list, etc.
The auto value says that the browser is free to download the entire video resource without the user explicitly requesting it, or a script fetching it. If you just use the preload attribute on its own without a value, it is equivalent of using auto.
Not specifying a preload attribute at all is left for the browser to define, but the metadata value is suggested as a default value in the spec. Although the author can specify these values, they are not gospel. By spec, the user agent is allowed to just use the value as a hint and do what it thinks is best for the user. A mobile browser for example could preload on wifi when using the auto value, but just download the metadata if using the radio connection.
Muted attribute
The muted boolean attribute defines if the audio in a media file is muted or not. If the muted attribute is present the sound is disabled. This attribute is not dynamic, so if the attribute is added via script at a later date it will not mute the sound. It only effects the default state.
Buffered property
The buffered property (called attribute in the spec, but named property here to avoid confusion with attributes in HTML) is a member of the HTMLMediaElement DOM interface. If you call media.buffered it will return a TimeRanges object. This represents the range of the resource that has been buffered by the browser. This object contains the length of the buffered resource, the time where the buffering starts and the time when it ends.
Seekable property
The seekable property works much in the same way as the buffered property, returning a TimeRanges object. However, this represents the range that the browser can seek to in the resource. If the browser can seek to anywhere in the file then the range will be the entire video length.
Complete ES5.1 support
Opera has lagged behind for quite a while with its ECMAScipt 5 support. With Opera 12 alpha it now has complete support and passes all the tests in the test suite, bar one test which is believed to be invalid.
This improved support includes:
- Object.create
- Object.defineProperty
- Object.defineProperties
- Object.getPrototypeOf
- Object.keys
- Object.seal
- Object.freeze
- Object.preventExtensions
- Object.isSealed
- Object.isFrozen
- Object.isExtensible
- Object.getOwnPropertyDescriptor
- Object.getOwnPropertyNames
- Function.prototype.bind
- Reserved words as property names
- Strict Mode
Now we are more or less just waiting for older browsers to die out before ES5 is usable across the board.
DOM 3 Events isTrusted property
The isTrusted property from the Event interface has been added. It is a boolean property that reports if the event was generated by the user agent (a trusted event, thus true) or by a script (untrusted event, thus false). Trusted events are given heightened privileges. See trusted events in the DOM3 Events spec for further details.
Microdata
Opera 12 is the first browser to support the HTML Microdata spec (formally specified in HTML the living standard (née HMTL5)). This is a way to add machine readable semantic structured data to a document. If you know about Microformats then it is roughly the same idea, except it uses its own set of attributes and API rather than using (or abusing, depending on which camp you are in) existing HTML attributes. This spec is fairly controversial as it also steps on the toes of the pre-existing RDFa specification.
In the end it will be the survival of the fittest with which one wins out. Most likely driven by user agent and developer adoption. Microdata looks like it is winning out so far with the former (with Motorola also showing interest in implementing it in WebKit), and the Schema.org initiative (a collaboration between Google, Microsoft and Yahoo!) have also chosen it. The scheme.org work is also not without controversy itself, so it is still all to play for.
Typed Arrays
Support has been added for ECMAScript Typed Arrays. This is a specification made by the Khronos group to support WebGL. Typed Arrays allow the developer to work with binary data. This is needed for high performance tasks such as 3D games. The spec itself states:
ECMAScript [ECMA-262] has traditionally been used in contexts where there is no access to binary data. Where binary data has needed to be manipulated, it is often stored as a String and accessed using charCodeAt(), or stored as an Array with conversion to and from base64 for transmission. Both of these methods are slow and error-prone. For example, reading binary data as 32-bit integers requires manual conversion of 4 source bytes to and from the target type. Reading floating-point data is even more expensive.
As web applications gain access to new functionality, working with binary data has become a much-demanded feature. Current specifications such as the File API [FILEAPI] and Web Sockets [WEBSOCKETS] would benefit from being able to read and write binary data directly in its native form. Specifications such as WebGL [WEBGL] require this functionality to meet acceptable performance characteristics.
WebGL and hardware acceleration
Opera’s graphics library Vega is now hardware accelerated in Opera 12 alpha. All of the browser UI and web page content is rendered by the GPU if possible.
Having hardware acceleration and Typed Arrays opens the door for WebGL. WebGL is the 3D context for the canvas element. It is a low level 3D graphics API, which is based on OpenGL ES 2.0, supporting GLSL shaders. This allows for 3D applications such as games to be developed only using web technologies. Try out the HTML5 port of Emberwind to see what it is capable of. The game can be played using 2D canvas or WebGL so you can compare the performance difference between the two.
Radial Gradients
Linear gradients from CSS3 Image values were already supported by Opera. Radial gradients didn’t make the cut, but are now supported in Opera 12 alpha. As the name suggests, radial-gradient() allow for gradients made out of concentric circles or ellipses. There is also support for repeating-radial-gradient(). They both take the -o- prefix.
Support for gradients has been extended so that as well as background/background-image, they can be used with border-image and list-style-image.
For a preview of gradients in action check out Lea Verou’s pattern gallery in Opera 12 alpha.
The rem unit
Nothing related to Remy Sharp, although I’m sure it is his favourite part of CSS3, the rem unit from CSS3 Values and Units maps to the font-size of the root element (html in HTML). If the font size of the html element is 12px then 1rem will also be 12 pixels. This is useful when trying to achieve vertical rhythm on a page, as it is easier than calculating em sizes, which change element to element based on its parent.
Bug fixes which are useful to know
Although there were a lot of bug fixes, a few may effect developers and are useful to know:
- The
insetkeyword onbox-shadownow works oninputelements - Co-ordinate handling has been improved, so values can be used larger than the magic 32768px without pages breaking in Opera. This has been a painful bug for quite a while!
- HTML5 URL input fields (
type="url") are now the same width as regular text fields display: list-itemhas been updated to be compliant with the CSS 2.1 specborder-radiuswill now clip replaced content. No more images overlapping over your nice rounded corners! Not that round corners are in fashion any moreHTMLHeadElement.profilehas been removed due to being obsolete in the HTML5 specaddEventListenerandremoveEventListener’s capture parameter now defaults to false- XML documents no longer show a parse error when badly formed. They now just show an error in the console
That is quite a lot of new features in a relatively short period of time, so I haven’t had chance to try them all myself yet. Opera 12 is shaping up to be a good release, and has even leapfrogged Chrome on the HTML5test with 346 points if you enable WebSockets, and is only 7 points behind if you keep them disabled. There is now a clear race on for first place. Chrome is not standing still and moving fast, but Opera 12 likely still has some things up its sleeve. HTML5 drag ‘n’ drop has yet to make an appearance for example, and getUserMedia() (access to the video camera) has been demoed on Android, so could make an appearance on desktop too. I wouldn’t bet against it when you see images such as the following in Opera’s press event:
This alone would give Opera 20 more points on that particular browser test. Its certainly an interesting time in the browser wars, with a lot of toys for us developers to play with.