First Browser to 11 (Unless Chrome Gets There First)

Opera released the beta version of our eleventh desktop browser today. New features unveiled include visual mouse gestures and tab stacking. The latter allows you to place your tabs in stacks to save screen real estate and organise the many tabs you probably have open. So far the feedback has been outstanding. I’m sure you’re not here to learn about the browser features though, or otherwise you’d be on the Spinal Tap inspired Opera 11 beta product page. What features do we have for the designers and developers I hear you ask? Quite a lot as it happens.

Extensions

Opera Extensions have so far been a runaway success with around 20 new extensions being submitted each day by some accounts. Want to know what you’re missing? Check out our Getting Started with Opera Extensions article for an overview of the technology and what it has to offer. New in the beta release includes option pages for defining extension preferences, the ability to work on HTTPS connections, and a much improved developer workflow. Developing Opera Extensions should now be quicker and easier. As extensions use the W3C Widget Packaging and Configuration format, the knowledge you gain can be transferred to other domains such as developing apps using Web technologies.

Improved CSS3 support

Opera now supports the full CSS3 Backgrounds and Borders module except the new non-shorthands for border-image. The box-decoration-break property has been added, along with updating the background shorthand to accept background-size, background-origin and background-clip. The overall support for the spec has also been tightened up with a number of bug fixes.

Other CSS changes include support for object-fit and object-position from the CSS3 Image Values module (astute readers will note this is the same spec which contains CSS3 Gradients), and the removal of the -o- prefix from the text-overflow property. As part of this work we added support for the experimental -o-ellipsis-lastline value. This hasn't found a home in any spec yet, but we hope it will as we find it very useful when developing rich UIs. This allows the ellipsis character to be added to multi line blocks when they overflow. Check out the text-overflow demo in Opera 11 to see what I mean.

Expanded HTML5 support

You can’t go five minutes these days without hearing about HTML5, and the Opera 11 beta launch is no different when it comes to showing off fancy new capabilities. New features range from the small and unglamorous (document.head and the HashChangeEvent event object), to hyped features such as Web Sockets, and Web Messaging (the technology that Opera Extensions are built upon). This is even a reintroduction of an old Opera friend with Server-Sent Events having been thoroughly updated to the latest version of the spec. This was originally implemented using an old version of the spec around the time Opera first introduced Web Forms 2. If you want to learn more check out our introduction to Web Sockets article.

More DOM3

Opera’s support for DOM3 Events has been updated with support for CustomEvents and defaultPrevented. isEqualNode from DOM3 Core has also been added.

A quick note about Opera Dragonfly

The ECMAScript service in Scope has been improved, which allows Opera Dragonfly to support the Console API amongst other things. The Resource Monitor service is also close to being integrated into Opera Presto (but didn't quite make it for this beta). Once this is included we will be able to deliver a much improved Network Inspector, which can inspect the bodies of requests (including XHR data and the like). Progress is being made on Opera Dragonfly and the experimental path (https://dragonfly.opera.com/app/stp-1/experimental/) has been updated today to the latest code. This introduces improvements the JavaScript Debugger and Command Line, as well as further refinements to the user interface and context menu support. This should make it easier to discover a number of existing features such as DOM and CSS editing. Links to many specs have also been added. Try right clicking on a CSS property or a DOM Interface for example to see the specification for that feature. This is a work in progress so there will be gremlins and unicorns hiding, and could break at any time. If you are brave check it out and let us know what you think.

We hope you enjoy playing with the new Opera 11 beta features, and if you have any comments or issues we’d love to hear from you.