Forum Moderators: open
There's a ton of new awesome in this build. First and foremost Presto 2.3 introduced Vega [my.opera.com] which is Opera's vector graphics library. For Opera it makes implementing certain things easier but it barrels down to CSS3 properties for web designers like myself. Since there are no official Presto spec pages beyond Presto 2.3 I'll just list the big-hitters outright: border-radius (rounded corners), multiple-background image support per element, border-image support, box-shadow, and 2D transforms. Opera has also made a bit of history by being the first browser vendor to make these properties available without vendor specific prefixes.
Presto 2.4 while never publicly released (at least on any desktop platform) introduces Opera's Carakan [my.opera.com] JavaScript engine. After benchmarking it's DOM and paint performance it was noticeably faster (other types of JavaScript performance will vary of course) though in regards to DOM and paint it solidified Opera's third place (out of five rendering engines (Gecko, KHTML, Presto, Trident, and WebKit) on an internal benchmark I created yesterday coincidentally. While it did not perform the benchmark faster it performed it much more accurately (70 seconds versus as low as 16 with other browsers). Other parts of JavaScript seem to be much faster and naturally it's an alpha (or as mentioned pre-alpha).
Here is an unofficial though reasonably tested list of new CSS based DOM properties that you can detect in Opera 10.5 that did not exist in Opera 10.2 and earlier...
OTabSize
OTransform
OTransition
OTransitionDelay
OTransitionDuration
OTransitionProperty
OTransitionTimingFunction
backgroundClip
backgroundOrigin
backgroundSize
borderBottomLeftRadius
borderBottomRightRadius
borderImage
borderRadius
borderTopLeftRadius
borderTopRightRadius
boxShadow
bufferedRendering
wordWrap
Additionally Huib Kleinhout reported that there will be no more builds of Opera 10.2 as they have been concentrating entirely on 10.5.
So Opera has finally added some critical CSS3 property support leaving IE as the only CSS 2.1 browser on the market (minor CSS3 text effects don't count and KHTML at least has border-radius). It's not difficult to envision multi-column and gradient support making it's way in to Presto 2.6. This new decade we'll see web designers doing web design with web design, not with meshed graphic design and is going to be totally awesome.
- John
The border-radius property has an obvious immediate effect by removing the need for presentational divisible elements and forcing the browser to download actual graphics.
Multiple background-image support per element also has this same effect and it'll make graphic heavy sites not require a mesh of (X)HTML to add background-images, positioning, etc.
The box-shadow property also reduces (X)HTML meshing and negates further need to force the browser to download purely layout based graphics.
So it will be possible to do much more with basic (X)HTML code.
In regards to transforms they basically negate the need for DHTML, subjectively either entirely or at least partially. With a few dozen characters you can animate (X)HTML elements moving them, resizing them, changing their colors, etc where as with DHTML you'd need a few kilobytes to achieve this if you wrote it on your own or a JavaScript framework.
It's just all all-round awesome release because it really goes a long way towards making our work so much simpler while also giving us more options and of course time.
- John
Opera's JavaScript debugger has one thing none of the other browsers have, at least from what I've seen; traceback!
All my JavaScript is function based and there are lots of functions that refer to other functions. However it would be ridiculous to setup a parameter with each function and pass along the calling function's name to figure out that function b was executed by function k and to check the parameters that function k is sending to function b.
- John
Stack traces unstackedWhen the debugger is paused, Firebug shows you the call stack, which is the set of nested function calls that are currently running and waiting to return.
The call stack is represented as a compact strip of buttons in the toolbar, each with the name of a function on the stack. You can click any button to jump to the line where that function is paused, and look at the local variables inside that function.
Opera was the only browser that I tested (IE8, FF, Safari, Opera, Chrome) that still had square boxes.
Assuming the Opera implementation is good, Chrome will now be the worst since it gives the most jaggy corners. But it works.
So unless you want super-clean, anti-aliased corners, you can at this point quit using corner images.
Dom Trace backs
Scripts
Network (headers/status/load times)
error console
You can detach it and run it in a stand alone window to watch load items...
Pretty nifty. (don't know enough about firebug to make a case-by-case comparison). The thing I do like about opera is that everything is built in - you don't have to go find addons and constantly update those addons. The other thing is that, I still feel opera is significantly faster than any other browser I have tried.
- John
When doing speed tests, the testing tools can't be having a major impact on page loading speeds compared to the load time of given pages when the testing tools aren't being used.
I'm probably not going to switch from Firefox to Opera, but I was impressed in general with Opera and how fast it loads pages. My observations are that it is the fastest of the browsers I test against on WinXP.
Opera(v10.50) Scored:
3470 Points
Chrome(v4.0.249.43) Scored:
3885 Points
Benchmarks are really subjective though. Chrome pulled ahead on this benchmark though performs no better then IE on the benchmark I created last week which is strange while Opera moved up to a close to second third place (behind Firefox and then Konqueror). It's going to get pretty sweet when GPU acceleration becomes widespread! :)
- John
I recently discovered how to fetch an array of all supported DOM properties [webmasterworld.com] so here is the official DOM property difference between Opera 10.1 and 10.5 (so far with the initial build)...
Removed
OBackgroundSize
Added
OTabSize
OTransform
OTransition
OTransitionDelay
OTransitionDuration
OTransitionProperty
OTransitionTimingFunction
backgroundClip
backgroundOrigin
backgroundSize
borderBottomLeftRadius
borderBottomRightRadius
borderImage
borderRadius
borderTopLeftRadius
borderTopRightRadius
boxShadow
bufferedRendering
wordWrap
- John
Pretty nifty. (don't know enough about firebug to make a case-by-case comparison). The thing I do like about opera is that everything is built in - you don't have to go find addons and constantly update those addons. The other thing is that, I still feel opera is significantly faster than any other browser I have tried.
I too like the fact that I don't have to go chasing about after addons.
This new decade we'll see web designers doing web design with web design, not with meshed graphic design and is going to be totally awesome.