ODIN Blog

Opera Developer Network

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 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.

W3C Widgets talk @ Web Standards Group, SydneyOpera 11 snapshot with better HTML5 forms, faster SVG, and improved extensions debugging

Comments

BS-Harou 23. November 2010, 22:35

So when do you plan to release build with the multicol. layout? smile anyway, good work!

Charles Schloss 23. November 2010, 22:35

I wonder how the Chrome team will handle sites that read version 10 as 1 wink

Will test some more later smile

lwiczek 23. November 2010, 22:40

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.


Yes, I have an issue... MDI is utterly broken making any version beyond 10.10 utterly useless :/
Funny thing tho - reporting bugs doesn't change a single thing...

Chirpie 23. November 2010, 23:18

Originally posted by lwiczek:

Yes, I have an issue... MDI is utterly broken making any version beyond 10.10 utterly useless :/
Funny thing tho - reporting bugs doesn't change a single thing...


This is a blog related to web development/web standards in Opera... somehow I think this is the wrong place to complain about UI bugs.

Reporting bugs will change things if the bug is deemed to be a priority, I would think.

Jan Henrik Helmers 23. November 2010, 23:51

-o-ellipsis-lastline is a nice addition. Looks like a perfect way to create excerpts.

John A. Bilicki III 24. November 2010, 03:56

I'm with BS-Harou, when will Opera get multi-column support? I have it implemented on my site for Firefox 1.5+ and Safari 3.0+ with the option to choose the number of columns to boot. It would make reading text across large screens like my 24 inch LCD much easier.

Besides that I'm glad to see we won't have to wait for Opera 11.5 to see some new CSS3 support added.yes

Anonymous 24. November 2010, 09:34

yarix writes: So, can I see somewhere, how text-overflow must look like? Any screenshots?

RainyShadow 24. November 2010, 12:26

So, background gradients should work now?


Originally posted by lwiczek:

Yes, I have an issue... MDI is utterly broken making any version beyond 10.10 utterly useless :/
Funny thing tho - reporting bugs doesn't change a single thing...


Maybe you might want to support this.

David Storey 24. November 2010, 12:42

Originally posted by BS-Harou:

So when do you plan to release build with the multicol. layout?



Multi-column is still in development. It is looking good already (column-span support for example), but we need to finish it before integrating it into the main branch of our engine. If it makes it into 11 depends on when 11 final ships. If it is too soon then it will be in the next release.

Originally posted by anonymous:

yarix writes:

So, can I see somewhere, how text-overflow must look like? Any screenshots?



Try http://people.opera.com/dstorey/text/text-overflow.html (third example)

David Storey 24. November 2010, 12:45

Originally posted by Helmers:

-o-ellipsis-lastline is a nice addition. Looks like a perfect way to create excerpts.



I was thinking box-decoration-break could look good when doing text highlighting in search results

BS-Harou 24. November 2010, 13:12

btw, you removed Function.prototype.bind from Opera 11 beta (because it was doing some problems on gmail). But that's definitely not good solution. Can't you just include "delete Function.prototype.bind" to browser.js for gmail? + I still can't understand, why the bind method made such a troubles on gmail. Other browsers like FF4 or Chrome has bind method too and gmail is working in them. Are they testing ES5 support with this method? - something like: if ("bind" in function.prototype) Object.create("...",...) ?

lwiczek 24. November 2010, 13:44

Originally posted by RainyShadow:

Maybe you might want to support this.


Done (:

z@h3k 24. November 2010, 15:15

up

Artur „Jurgi” Jurgawka 24. November 2010, 15:16

Originally posted by dstorey:

Multi-column is still in development.


Well, I'm waiting too. wink

Rafael Luik 24. November 2010, 15:41

removal of the -o- prefix from the text-overflow property

*---*
The less vendor prefix, the more I get happy with Opera.

Anonymous 24. November 2010, 18:31

Gladiator writes: Just tested the new beta. As always slick and impressive :) I've noticed one thing, on my MacBook Pro (latest generation) scrolling the page with two fingers on the trackpad is a bit sluggish...

Pierre 25. November 2010, 21:46

First browser to 11 (unless Chrome gets there first)


Unless Amaya is also a web browser wink

Turin 29. November 2010, 08:51

Has -o-ellipsis-lastline been discussed on the W3C CSS list?

Jim 2. December 2010, 05:57

Originally posted by dstorey:

I was thinking box-decoration-break could look good when doing text highlighting in search results


up

When do you think we will see the gradients?

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies