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-size
s 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.
navigator.hardwareConcurrency
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
).
navigator.languages
and the languagechange
event
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.