September 2nd, 2014
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 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.
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 make it possible to customize the areas inside and around which content flows using the CSS properties
shape-image-threshold (and, in the future,
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.
all property is now supported. It can be used to reset all properties except
direction to their initial or inherited value. Its possible values are
inherit. MDN has a great example that illustrates the difference.
The old Presto-based Opera 11.10 introduced support for the
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-out values is back, and here to stay!
If you’re using
font-family: monospace in your CSS, or have unstyled
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.
<dialog> HTML element is the new
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
element.close()). Here’s a demo page with code examples. For compatibility with browsers who do not yet support
<dialog>, a polyfill is available.
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).
navigator.languages and the
navigator.languages property exposes the languages the browser sends in the
Accept-Language request header.
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.
Behind the scenes,
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.