Standards support in Opera Presto 2.2 and Opera 10 beta

Introduction

We just released the first beta of Opera 10 , which not only includes some great new features, but also looks amazing. But what does this mean for developers? This beta includes a new version of the Opera Presto 2.2 engine, which provides better speed, stability, support for web standards and much more. This post focuses on the most important web standards support improvements introduced in Opera Presto 2.2 (see the list of previous improvements in Presto 2.1 ). It will be interesting for us to look at what you managed to do using these new features, so let me know in the comments.

Please note that to view the examples you will need the latest beta of Opera 10 or the previous alpha .

Table of contents

1. Embedded Fonts - Web Typography Made Easy
2. Translucent transparency, RGBA and HSLA
3. Selectors API
4. SVG improvements
5. 1. FPS Property in SVG
   2. Embedded fonts in SVG
6. Development of Opera Dragonfly
7. Acid3 - 100/100!
8. Conclusion

All sample code used in the article can be downloaded separately .

Acknowledgments: some thanks should be said to my colleagues for excellent examples to the article: Lachlan Hunt for an example of selection on selectors, Andreas Bovens for an example of using embedded fonts, and David Vest and Erik Dahlström for SVG examples.

Embedded Fonts - Web Typography Made Easy

For many years, the sore point for web designers is the lack of normal fonts that can be used on sites. No, of course you can declare any font through CSS, but no one guarantees that it is installed on the user's machine. Moreover, the font set that is guaranteed to be available on the main platforms is negligible and often you have to list the font-specific font families, and then carefully test whether your design has gone.

Fortunately, this situation should change in the near future thanks to embedded fonts . The Web Fonts Specification As Part Of The CSS 3 Moduleallows you to download the necessary font file along with the page, and then freely use it on the site, without fear that it is not installed on the user's machine. To download a font with a page, use the following syntax:

@ font-face {
    font-family: "My font gothic";
    src: url ("http://www.myweb.com/fonts/myfont.ttf") format ("truetype");
}

You describe your special font inside the block @font-face(at the very beginning of the stylesheet, before declaring the fonts), and then refer to it as usual:

p {
    font-family: "My font gothic";  
    ...
}

Andreas made an example of using embedded fonts for us , using the Forgotten Futurist and Minya Nouvelle fonts . Open the example in a browser that supports embedded fonts and you will see something like Figure 1.



Figure 1: example of using embedded fonts in Opera 10 beta.

Other free fonts are listed on the Free Font Manifesto page and on Larabie Fonts . More complex examples can be found here: Webfonts demo and test pages .

Translucent transparency, RGBA and HSLA

Opera Presto 2.1 already supports a property opacityof CSS 3, which makes it easy to set the transparency level of the element - for example: div { opacity: .7; }.

In addition, Opera Presto 2.1 supports specifying colors using RGB and HSL values. HSL values ​​allow you to deal with some RGB problems, such as the non-obviousness of color matching (when using HSL, if you need to get a lighter tone of the same color, just increase the brightness value) or like hardware difficulties. HSL values ​​are defined as follows:

div {background-color: hsl (240, 100%, 50%); }

RGB values ​​are set as follows:

div {background-color: rgb (255, 0, 0); }

Combination of transparency, RGB and HSL

Opera Presto 2.2 supports a better way to set transparency: an additional fourth value for HSL and RGB is alpha transparency. This optional value can be used when specifying colors using HSLA and RGBA. As well as a well-known property opacity, the transparency value in HSLA and RGBA is set in the range from zero to unity, where 0 is full transparency and 1 is full visibility.

div {background-color: hsla (240, 100%, 50%, 0.5); }
div {background-color: rgba (255, 0, 0, 0.5); }

It's just fantastic for creating animated elements that appear or disappear with the simplest JavaScript code — you only need to change one property through the DOM. Pay attention to the fact that it opacitysets transparency for the element itself and all its nested descendants , while the use of HSLA and RGBA allows you to set transparency only for the element itself.

By the way, Opera Presto 2.2 now also supports a value color: transparentfor setting a transparent color for text.

Let's take a look at examples that demonstrate these properties and the difference between them. I created a simple two-column news blog that looks like Figure 2.



Figure 2: Example of a news block with translucency in Opera 10 beta.

The most interesting thing in the code of this example is the indication of transparency for news blocks, as well as using the property background-sizefor the left column, so that the image of the globe accurately fills the column across its entire width (this property appeared in Presto 2.1).

First of all, take a look at an example where a property is used opacity. Styles for a news block with simple transparency look something like this:

.news-item {
    background-color: rgb (0, 255, 0);
    opacity: 0.4;
}

Note that I have positioned the CSS 3 properties separately from the simpler properties to make the code easier to understand. Take a look at the CSS file of the first example to make it clearer what I'm talking about.

Try to open the example with the usual transparency and rotate it a little. I think you will immediately notice that what you see is different from the screenshot above. This is because, as I already said, a value less than one for a property opacitymakes not only the element itself transparent, but also all its descendants . In some cases, this is not a big deal, but in this case it is not the best option, since the translucent text is quite difficult to read.

But you can only make the background color transparent by setting the color to RGBA instead of RGB and the opacity property:

.news-item {
    background-color: rgba (0, 255, 0, 0.4);
}

This CSS rule is essentially no different from the previous one, except that only the background color has become translucent. But the text remained completely visible and perfectly readable. Take a look at the RGBA example to see how this works.

Finally, for complete reporting, let's take a look at indicating the same transparent background, but this time using HSLA:

.news-item {
    background-color: hsla (120, 100%, 50%, 0.4);
}

And the same HSLA example live .

Looking ahead, I will say that the same color-setting formats with RGBA and HSLA work in SVG, regardless of the transparency specified with fill-opacityand stroke-opacity.

Selector selection

The Selectors API specification defines the DOM API to make selecting elements much easier.

Take a look at an example - this line of code selects all elements of a document with an attribute classwith a value alert:

document.querySelectorAll (". alert");

The next line will select the first element from the document div:

document.querySelector ("div");

Using CSS-like syntax in function arguments makes things a little easier for those who are not very good at JavaScript.

As you can see from the previous example, two new methods are supported in Presto 2.2: querySelector()and querySelectorAll(). The first method returns the first matching item in the tree, while the second returns a collection of all matching items in the view NodeList. The current specification defines that these methods are available for type nodes Document, Elementand DocumentFragmenthowever, our implementation so far only supports Documentand types Element.

The method querySelector()is useful in cases where it is necessary to obtain only the first element and is created in order to work more efficiently than querySelectorAll()in similar cases.

In order to compare how these methods are more effective than traditional, let's look at the following snippet of HTML code:

 Apples
 Oranges
 Bananas
 Grapes

In a situation where the user has filled out a form containing these checkboxes, it is likely that you will want to get a list of those that have been marked. When using traditional methods, you will first need to get all the checkboxes, and then recursively go through them, checking which ones are checked.

var fruits = document.getElementById ("fruits");
var checkboxes = fruits.getElementsByTagName ("input");
var list = [];
for (var i = 0; i <checkboxes.length; i ++)
{
    if (checkboxes [i] .checked) {
        list.push (checkboxes [i]);
    }
}

When using the new API, all code fits on one line !

var list = document.querySelectorAll ("# fruits input: checked");

This code returns a list of DOM elements that contains all the checkboxes that have been marked by the user. Then you can do whatever you want with this list.

SVG improvements

There are a couple of improvements in SVG support in Opera Presto 2.2, and this part describes both.

FPS Property in SVG

Now you can control the speed (frames per second) of your SVG animation using JavaScript. For any root element itself, svgyou can specify an ID, select an element with getElementById, and then increase or decrease its targetFpsproperty. In the example that Eric has prepared for us, the following code inserts two buttons in the document that allow you to increase or decrease the speed of the current animation.

function checkfps ()
{
    svgElm = document.getElementById ("o"). contentDocument.documentElement;
    setInterval (update, 100); 
}
function update ()
{
    cfps = svgElm.currentFps;
    tfps = svgElm.targetFps;
    document.getElementById ("f"). textContent = "currentFps:" + cfps + "targetFps:" + tfps;
}    
function incFps () {
    svgElm.targetFps ++;
}
function decFps () {
    svgElm.targetFps--;
}

You can also access the current value of the property currentFps. Take a look at Erik’s example , demonstrating the change in FPS for SVG, or look for it in the archive with all the examples for the article .

The property targetFpsis not very accurate, since it depends on both hardware and software, but nevertheless, it gives some opportunity to control the speed of your animation. It should also be understood that this property is not responsible for how often redrawing occurs during DOM manipulations; this property only affects explicitly specified animations.

Embedded fonts in SVG

And if regular embedded fonts aren't cool enough for you, then we also added support for SVG fonts. This will allow you to use font files in SVG format to style text (both in HTML and in SVG documents), just like regular embedded fonts. For instance:

@ font-face {
    font-family: "My SVG font";
    src: url ("http://www.myweb.com/fonts/myfont.svg#myFont") format ("svg"); 
    font-style: normal, italic;
    font-weight: 500;
}

Take a look at Eric’s example using embedded fonts in SVG, and then the source code itself to understand how it works - Figure 3. By the way, UbuntuTitleBold is an SVG font, while the rest are TrueType fonts.



Figure 3: Embedded SVG Fonts!

To make sure that all this works in the good old HTML, take a look at my modified example of embedded fonts, which shows that the SVG font is first mentioned in CSS and then used to style the HTML.

SVG fonts are described in SVG files using font or font-face elements within which each individual glyph is attached to a glyph element. This may seem like a complicated decision, but it is not at all - especially considering the existence of the free program FontForge , which can convert fonts to a wide variety of formats.

Take a look at the source code for the UbuntuTitleBold font from Eric's example to see what SVG fonts are.

Another good news about SVG fonts is that using the DOM, you can modify fonts directly on the client - after all, this is, after all, plain, valid XML. Nothing prevents someone from writing a web application that allows you to edit the font, and then assemble your own TrueType font from it on the server.

Development of Opera Dragonfly

• Network tab: work on it has not yet been completed, but the first step in its development already allows you to monitor outgoing and incoming HTTP traffic, which is very useful for debugging Ajax applications.
• DOM editing: One of the key features of Opera Dragonfly's third alpha is support for DOM editing. There are two editing modes: the first allows you to edit, add or remove attributes and text fragments in real time. It is activated by double-clicking on an attribute, its value or on a fragment of text. The second mode allows you to edit the DOM in plain text - for example, add new elements to the DOM. This mode is activated by double-clicking on the opening or closing element tag. After that, the element itself and its descendants turn into a simple text field. At the moment, there is a known problem with the first type of editing, which does not allow to exit the editing mode after pressing enter. This issue will be fixed without any noise in future updates.
• General front-end improvements: We made many front-end improvements to Opera Dragonfly, including the way in which a page for debugging is selected. Now the tab selected in the browser is the page for debugging.

You can find out the latest events in the life of Opera Dragonfly on a thematic blog .

Acid 3 - 100/100

Opera 10 beta scored one hundred out of a hundred possible points in the Acid 3 test - Figure 4. All future browser builds will pass this test completely.



Figure 4: Acid 3 test shows the result of "one hundred out of one hundred."

Conclusion

I hope you enjoyed the Opera 10 beta test drive with the new Opera Presto 2.2 engine inside. Stay tuned for more updates and please feel free to share your feedback with us to help us make the next release as good as possible.

useful links

• List of changes . For those who are interested in a complete list of updates.
• Article: Opera Presto 2.1 - support for web standards in the Opera engine . An article from Dev.Opera covering web standards support in a previous version of the Opera Presto 2.1 engine.
• Article: Changing the format of the "User Agent" string . The new “User Agent” line format, which appeared in the new beta and remains for future versions, may surprise someone. The article talks about the changes made and explains their reasons.

Chris Mills, Developer Relations Manager, Opera Software

Upd: Official Dev.Opera Translation - Standards Support in Opera Presto 2.2 and Opera 10 beta