Opera 24 released

Opera 24 (based on Chromium 37) for Mac and Windows is out! For users, it includes tab preview, better hi-res support and more obvious Private Windows. Here’s what the new release means for web developers.

Improved font rendering

On Windows, Opera now uses DirectWrite instead of GDI whenever possible. This results in much better rendering of OpenType (*.otf) fonts. (Note that font rendering on OS X and Linux was great already, and is not affected by this change.)

Here’s a nice blog post with comparison screenshots of when this change was made in Mozilla’s rendering engine.

Subpixel font scaling with CSS text-rendering: geometricPrecision

Technically, text-rendering is an SVG property that is not defined in any CSS standard, but Firefox and Safari widened the spec to allow this property to be applied to HTML and XML content. Now Opera and Chrome support this too.

When text-rendering: geometricPrecision is used, the browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don’t scale linearly, so geometricPrecision can make text using such fonts look good. geometricPrecision also enables sub-CSS-pixel font-sizes and thus smooth font scaling, which in turn allows for stable layout when zooming and drastically improves readability and font rendering quality on high-DPI devices.

CSS Shapes

CSS Shapes make it possible to customize the areas inside and around which content flows using the CSS properties shape-outside, shape-margin, shape-padding, and shape-image-threshold (and, in the future, shape-inside).

Our friends at Adobe have put together some amazing demos for this feature.

For compatibility with browsers that don’t support CSS Shapes yet, use the CSS Shapes polyfill.

To help with debugging CSS Shapes, a browser addon is available.

CSS all

The CSS all property is now supported. It can be used to reset all properties except unicode-bidi and direction to their initial or inherited value. Its possible values are unset, initial, or inherit. MDN has a great example that illustrates the difference.

Unprefixed CSS cursor values zoom-in and zoom-out

The old Presto-based Opera 11.10 introduced support for the zoom-in and zoom-out values for the CSS cursor property. Unfortunately, these values stopped working when we switched over to the Blink rendering engine in Opera 15, as Blink implemented -webkit--prefixed variants instead.

Until now, that is. Support for the unprefixed zoom-in and zoom-out values is back, and here to stay!

New default monospace font

If you’re using font-family: monospace in your CSS, or have unstyled code, kbd, listing, plaintext, pre, samp, tt, or xmp elements in your HTML, you might notice that the default monospace font on Windows is now Consolas instead of Courier New.

Cross-origin web fonts

Cross-origin web fonts are now blocked from loading, unless the response includes an appropriate CORS header (e.g. Access-Control-Allow-Origin: *). This matches the behavior in other browsers.

The <dialog> HTML element is the new showModalDialog()

As previously announced on Dev.Opera, the global showModalDialog() method is now removed.

Instead, web developers wishing to use modal dialogs on their websites should use the new <dialog> HTML element and its corresponding JavaScript API (element.show(), element.showModal(), and element.close()). Here’s a demo page with code examples. For compatibility with browsers who do not yet support <dialog>, a polyfill is available.

The new navigator.hardwareConcurrency API makes it possible to read the system’s total number of logical processors (cores) available to the browser (up to an optional thread limit per origin). If you’re using Web Workers to run code in parallel, this feature will help you make an informed decision on the maximum number of workers to spawn.

For compatibility with browsers that don’t support this feature yet, you could use a polyfill, or just fall back to a hardcoded number of cores (var cores = navigator.hardwareConcurrency || 4).

The new navigator.languages property exposes the languages the browser sends in the Accept-Language request header.

Additionally, a languagechange event is now fired on the window object whenever the browser’s understanding of what the user’s preferred languages are changes (if you change your system settings, for example).

This allows web applications to handle internationalization on the client side, thus allowing offline applications to react to user language changes.

Web Cryptography API

The Web Cryptography API is now available off the window.crypto object. This means it’s now possible to perform cryptographic operations such as hashing, signature generation & verification, and encryption & decryption, all on the client-side.

Higher-precision TouchEvent values

Behind the scenes, TouchEvent coordinates and radius values are now doubles instead of longs. These values are now floating point values rather than integers when accessed through JavaScript. This results in higher-fidelity touch interactions (e.g. much smoother dragging) on high-DPI displays. See this HTML5 Rocks blog post for more info.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.