Hello Opera 12!

Twelve is a fascinating number, full of symbolism: there are twelve months in a year, twelve signs of the zodiac, twelve labours of Hercules, twelve cranial nerves in humans and — as every schoolchild knows — the number 12 has a perfect number of divisors, and the sum of its divisors is also a perfect number. 12 is therefore one of the two known mathematical sublime numbers. Talking of sublime — hello Opera 12!

Shiny demos!

In order to celebrate Opera 12 being released into the wild, we've made a website full of shiny demos for you to play with. Tatami mats? Got 'em. A Hixie Keyboard, madam? Step right up! A 1980s style SVG based inbox attack LED game? Why, of course, sir! A hipster dog riding a penny-farthing and bumping into giant shoes? Like, totally, dude!

Naturally, no browser is blocked, so come one and all, with desktop, tablets or mobile and, if your browser supports all the features, see the shiny!

Hardware acceleration and WebGL support

We're aiming to make Opera entirely hardware accelerated, from the UI to all page rendering and painting (with support for OpenGL as well as DirectX backends), but for now, both HWA and WebGL are turned off by default. You can enable them by setting opera:config#UserPrefs|EnableWebGL and opera:config#UserPrefs|EnableHardwareAcceleration to 1, then saving and restarting the browser.

If you're interested in trying out a WebGL demo, check out Emberwind; if you want to start coding WebGL, have a look at our WebGL articles.

CSS3 Animations and more animatable properties

Opera 12 supports CSS3 keyframe animations. For the moment, they're prefixed. The CSS Working Group recently resolved that animations, transitions and transforms may be released unprefixed. We completely agree with this resolution. However, this decision was made too close to the release for us to change the code without risking bugs/ regressions. We'll very soon remove prefixes for animations, transforms and transitions.

For now, please use -o- prefixes on the relevant CSS properties: -o-animation , -o-animation-delay, -o-animation-direction, -o-animation-duration, -o-animation-fill-mode, -o-animation-iteration-count, -o-animation-name, -o-animation-play-state and -o-animation-timing-function. Also note that you also need to prefix the CSS @keyframes directive, too: @-o-keyframes.

We've also expanded our support for animatable properties (animatable using CSS3 transitions as well as CSS3 animations.)

Learn more:

Generated Content for Paged Media

The CSS Generated Content for Paged Media Module is a spec spearheaded by our CTO Håkon Wium Lie, and it allows you to create a page-like browsing experience on web pages by adding a few lines of CSS to your content. Opera 12 partially implements the spec, which you can try out using Håkon's examples.

Tip: On touch screen devices, try swiping the pages left and right. On non-touch screens use your mouse's horizontal scrolling mechanism to move to the next page, or try PageUp/Down.

Camera support with getUserMedia

Opera Mobile 12, and now Opera 12 desktop, implement camera access with the getUserMedia specification. If you want to get started with building stuff, check out our getUserMedia article. For demo fun, check out our Shiny demos.

CORS

Opera 12 supports cross-origin resource sharing, also known as CORS. If you want to learn how to use this in your site, check out our Dev.Opera article about it: DOM access control using cross-origin resource sharing.

Drag and Drop

HTML5 includes the Drag and Drop API, which gives us the ability to natively drag, drop, and transfer data to HTML elements, and now this is supported in Opera 12 as well. Read how to use HTML5 Drag and Drop.

XMLHttpRequestUpload interface

Opera 12 implements progress events in XMLHttpRequest, for upload, download, and timeout updates:

We also have Blob/FormData support for the same.

Updated Windows & Tabs extension API

Opera 12 updates the Windows & Tabs API, for which we have published updated documentation. Be sure to read through it if your existing Opera extension relies on it, and feel free to ask questions in the comment section on the API pages.

Discontinuation of Unite and Widgets

Previously, we announced that we're discontinuing Unite and Widgets in Opera 12, but at the same time are going full steam ahead with our extensions platform. For those who want to convert their existing widgets to extensions, we've produced an article to help you with the conversion process.

Themes

If you want to spice up your browsing experience, with, let's say, a cookie monster-themed browser UI, be sure to check out our new themes catalog. Making themes is super easy, and the nitty-gritty details of Opera 12's new theming infrastructure are explained in our Opera's lightweight themes article.

Monitor Opera's CPU use

Got a tab that's hogging CPU cycles? Is your machine's fan whirring so hard that it's hovering a centimeter above your desk? Identify the culprit with opera:cpu.

Enjoy!

We're confident your browsing experience will be better than ever with Opera 12. Our product specs overview page gives an overview of what is supported where in all recent Opera products.

The only other known sublime number is 6086555670238378989670371734243169622657830773351885970528324860512791691264 which, by an amazing co-incidence, is the number of empty coffee cups piled up outside our Core Programming Department's door. Makes you think, doesn't it?

Animatable CSS properties in Opera 12Shiny Demos on Github

Comments

inDigazzZAnuarSh Thursday, June 14, 2012 6:24:19 AM

up

Patrick H. Laukepatrickhlauke Thursday, June 14, 2012 10:47:31 AM

lovely stuff smile

Samed Ayanagresiff Thursday, June 14, 2012 11:32:26 AM

up

blackcoder Thursday, June 14, 2012 12:15:36 PM

up

Gerald Mendejagherhald Thursday, June 14, 2012 1:17:33 PM

Martin KadlecBS-Harou Thursday, June 14, 2012 2:13:33 PM

Nice! Core changes are always the brightest part of new releases smile

Now for the async script loading... whistle

Joel Martinbuskanaka Thursday, June 14, 2012 4:05:36 PM

What about WebSockets? Has support been enabled by default? Every other browser vendor now has WebSocket support enabled by default in their latest releases.

norton2001 Thursday, June 14, 2012 4:57:13 PM

Love it, love it & absolutely well done. As it blends with a new generation of apps this should come over as a Chrome beater.
Superb.
Will start splashing over Facebook and Twitter to try to get many friends and acquaintances to try and use

Martin KadlecBS-Harou Thursday, June 14, 2012 6:04:55 PM

Originally posted by buskanaka:

What about WebSockets? Has support been enabled by default? Every other browser vendor now has WebSocket support enabled by default in their latest releases.


Updated websockets will be in Opera soon: http://www.opera.com/docs/specs/presto2.11/#m211-337

thomasbilk Thursday, June 14, 2012 6:13:32 PM

Nice makeover. Too sad that you still did not fix the bug (DSK-351034) I reported almost seven months ago.

operaproductions Friday, June 15, 2012 7:26:59 PM

First thing i do when i see "Opera 12 Launched". I regularly use Google Chrome, but memory problems lure to me Opera. I went on Opera.com, and downloaded it in no time.

It would be really good if you can improvement on your update and improvement speed, as Opera 12 remained Beta for almost a year. It would be nice to have Opera 12 be like Chrome and Firefox, making updates and new versions every 1-2 months.

Also the Extension list. I'll be the best browser if it had more extensions.

Overall, Opera 12 is more like Opera 13. Ultimate revolutionary, but improvement speed and a better extension list would help a lot.

Martin KadlecBS-Harou Friday, June 15, 2012 8:22:33 PM

Originally posted by operaproductions:

Also the Extension list. I'll be the best browser if it had more extensions.



What extensions do you miss?

Constantine Vesnac69 Saturday, June 16, 2012 7:07:51 AM

Great news, Opera 12 is a monster collection of new features!

One thing though, with IE10 dropping prefixes for css animations, transforms, transitions and gradients - are there any similar plans from Opera ?

Originally posted by buskanaka:

What about WebSockets? Has support been enabled by default? Every other browser vendor now has WebSocket support enabled by default in their latest releases.


Wait for autumn. By the time IE10 will be about to get released with WebSockets support, i expect Opera to enable them by default in some minor version.

Originally posted by operaproductions:

It would be really good if you can improvement on your update and improvement speed, as Opera 12 remained Beta for almost a year.


I think, 11.60 was a nice move with lots of features from 12.0 delivered half-a-year ahead. So, if we will be getting updates on frequent basis, i don't mind staying on version 12 for some time.

Constantine Vesnac69 Saturday, June 16, 2012 8:01:21 AM

minor nuisance: opera:config help is broken ("No information could be found for this item.")

adavis159 Saturday, June 16, 2012 6:05:36 PM

I just auto-upgraded to version 12 (on windows), and decided to check out new webgl the demos.

I am greatly disappointed, what is this crap?

The Odin demo doesn't work at all (plays sound, but just gives script errors), the flight trip demo doesn't show anything beyond a list of airlines, and the realtime 3d histogram doesn't show any histograms, just a blank grey box and a meaningless media control

Some of the other demos, like the emberwind demo and the pointless "dog running over shoes on a bike" demo work just fine, so I know I have webgl set up and working

What is the point in showcasing something that doesn't actually work?

operaproductions Saturday, June 16, 2012 8:26:50 PM

Originally posted by c69:

minor nuisance: opera:config help is broken ("No information could be found for this item.")


Same for me..

operaproductions Saturday, June 16, 2012 9:29:52 PM

Originally posted by adavis159:

I just auto-upgraded to version 12 (on windows), and decided to check out new webgl the demos.

I am greatly disappointed, what is this crap?

The Odin demo doesn't work at all (plays sound, but just gives script errors), the flight trip demo doesn't show anything beyond a list of airlines, and the realtime 3d histogram doesn't show any histograms, just a blank grey box and a meaningless media control

Some of the other demos, like the emberwind demo and the pointless "dog running over shoes on a bike" demo work just fine, so I know I have webgl set up and working

What is the point in showcasing something that doesn't actually work?



I guess Opera 12's webGL and hardware acceleration is still in experimenting. Like- Opera 12 is beta and alpha for like a year and they still can't perfect their webGL !?

Opera still needs to take some drastic measures to core changes. Opera 12 has good core changes, but it still isn't perfect.

Goh Lu Fengelfgoh Sunday, June 17, 2012 3:32:25 PM

When will the goodness of Opera 12 like getusermedia and other html5 features come to opera mini/mobile?

srappose Tuesday, June 19, 2012 8:52:57 AM

Why does the "allow file xmlhttprequest" does not work anymore in Opera 12???
I need to load a local file, until 11.64 version I was able but now it's impossible: how can I do???

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 9:52:53 AM

Originally posted by srappose:

Why does the "allow file xmlhttprequest" does not work anymore in Opera 12???I need to load a local file, until 11.64 version I was able but now it's impossible: how can I do???



Did you make sure the file you're trying to load is in the same directory as the web page or a sub-directory of that directory?

I don't think you can have a page on your desktop and use XMLHttpRequest() to load a file at or even as that'd be a higher directory level. Think Opera was changed be restrictive like that a while ago. I think Firefox does it too.

srappose Tuesday, June 19, 2012 10:37:59 AM

Originally posted by burnout426:

Originally posted by srappose:

Why does the "allow file xmlhttprequest" does not work anymore in Opera 12???I need to load a local file, until 11.64 version I was able but now it's impossible: how can I do???



Did you make sure the file you're trying to load is in the same directory as the web page or a sub-directory of that directory?

I don't think you can have a page on your desktop and use XMLHttpRequest() to load a file at file:///c:/file.xml or even file:///c:/Users/user/file.xml as that'd be a higher directory level. Think Opera was changed be restrictive like that a while ago. I think Firefox does it too.

I didn't changed my code. Moreover, I uninstalled Opera 12 and installed an 11.64 version and all work perfectly!So it is not a directory issue but rather a further restriction to local file management and I don't yet understand why only Chrome and Opera go on to this security policy.

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 11:02:42 AM

Originally posted by srappose:

I didn't changed my code.

O.K. But does your code meet those path restrictions I mentioned?

srappose Tuesday, June 19, 2012 12:27:09 PM

The web page and files to be loaded have always been in the same directory

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 1:19:55 PM

Originally posted by srappose:

The web page and files to be loaded have always been in the same directory



O.K.

This works fine on my on my Win7 x64 desktop in Opera 12 x64 with Allow File XMLHttpRequest checked.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                white-space: pre
            }
        </style>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var req = new XMLHttpRequest();
                req.addEventListener("load", function(e) {
                    var doc = e.target.responseXML;
                    var srlz = new XMLSerializer();
                    document.body.textContent = srlz.serializeToString(doc);
                }, false);
                req.open("GET", "file.xml", true);
                req.send();
            }, false);
        </script>
    </head>
    <body>
    
    </body>
</html>


file.xml
<?xml version="1.0" encoding="utf-8"?>
<root>
    <test>d</test>
</root>

srappose Tuesday, June 19, 2012 1:44:44 PM

Thank you for your example but I need to load an xsl file which would parse an xml file, both in synchronous way as the following code snippet:

...

// load the xslt file
var myXMLHTTPRequest = new XMLHttpRequest();

myXMLHTTPRequest.open("GET", xslfile, false);

myXMLHTTPRequest.send(null);

xslStylesheet = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslStylesheet);

try{
// load the xml file
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", xmlfile, false);
myXMLHTTPRequest.send(null);
xmlDoc = myXMLHTTPRequest.responseXML;
}
catch(err){
xmlDoc = document.implementation.createDocument("", "", null);
}

...
The problem is in "xslStylesheet = myXMLHTTPRequest.responseXML;" where I get an "Unhandled Error: WRONG_ARGUMENTS_ERR" and a responseXML null.
This worked well in previous Opera versions

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 2:07:31 PM

To follow specs (or fix some issue), I think Opera fixed it so responseXML is null if the file isn't served with an xml mime type.

xslt files in "Ctrl + F12 -> advanced -> downloads" are served with an xml type. But, if your file just has an "xsl" extension, you might have to add xsl to the application/xslt+xml type extension list.

srappose Tuesday, June 19, 2012 2:24:06 PM

Originally posted by burnout426:

To follow specs (or fix some issue), I think Opera fixed it so responseXML is null if the file isn't served with an xml mime type.

xslt files in "Ctrl + F12 -> advanced -> downloads" are served with an xml type. But, if your file just has an "xsl" extension, you might have to add xsl to the application/xslt+xml type extension list.

You are a genius!!!It works but I have another question: is it possible to add the mime type association dinamically, for example via Javascript?

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 2:37:14 PM

is it possible to add the mime type association dinamically, for example via Javascript?

The mime type should already be in Opera by default. Not sure how to get Opera to add the xsl extension to the mime type list with JS or some trick.

If you request an xsl file served as application/xslt+xml on some server, Opera might (didn't check, long shot) add the xsl type to the list.

It's not possible for you to just rename the xsl file to xslt? If not, perhaps Opera can just add xsl to the application/xslt+xml type in the future so you don't have to worry about this.

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 2:38:21 PM

The other option you have is to get it as responseText and then parse it with DOMParser. Do you know how to do that or do you need an example?

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 2:46:22 PM

Originally posted by burnout426:

The other option you have is to get it as responseText and then parse it with DOMParser. Do you know how to do that or do you need an example?



window.addEventListener("DOMContentLoaded", function() {
    var req = new XMLHttpRequest();
    req.addEventListener("load", function(e) {
        var parser = new DOMParser()
        var doc = parser.parseFromString(e.target.responseText, "application/xml");
        alert((new XMLSerializer()).serializeToString(doc));
    }, false);
    req.open("GET", "file.xml", false);
    req.send();
}, false);


That's an *example*. I think that'll work even if you don't have "xsl" in file types.

srappose Tuesday, June 19, 2012 3:46:10 PM

Originally posted by burnout426:

Originally posted by burnout426:

The other option you have is to get it as responseText and then parse it with DOMParser. Do you know how to do that or do you need an example?

window.addEventListener("DOMContentLoaded", function() {
    var req = new XMLHttpRequest();
    req.addEventListener("load", function(e) {
        var parser = new DOMParser()
        var doc = parser.parseFromString(e.target.responseText, "application/xml");
        alert((new XMLSerializer()).serializeToString(doc));
    }, false);
    req.open("GET", "file.xml", false);
    req.send();
}, false);
That's an *example*. I think that'll work even if you don't have "xsl" in file types.


I found the solution via javascript by simply adding:


myXMLHTTPRequest.overrideMimeType('text/xml');


Thank you again for your precious support, I would never thought about mime type association!smile

Michael A. Puls IIburnout426 Tuesday, June 19, 2012 4:10:42 PM

Originally posted by srappose:

myXMLHTTPRequest.overrideMimeType('text/xml');

Ooops. Duh on me. smile Glad you got it . (Try it with application/xml or application/xslt+xml just to see what happens. application/xml if it works would probably be best for compat)

See <http://annevankesteren.nl/2004/08/mime-types> about text/xml issue.

artoix Thursday, July 12, 2012 10:52:01 AM

Just as always Opera is a complete headache! furious

- Older sites get broken layout (yeah, a few old-school css tricks, but damn, they still work fine in all other standards compliant browsers!) Think about standards? You should have been earlier! Now think about users – online stores get lost clients due to opera updates.

- Everything loads soooooooo sloooooow. Why the heck? My network settings, proxies or what else? Why do I have to bother if all other browsers work fine right after install.

- Oh, and 'Refined Powerful Dragonfly' – whats the sense if it returns 'Could not connect to remote server'!? Damn what server!? Just give me DOM inspector of the loaded page.

Complete headache... Couldn't you just try copy webkit? troll

Write a comment

New comments have been disabled for this post.