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 publication focuses on the most important improvements in supporting web standards that were 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 have done with these new features, so let us know in the comments.

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

Table of contents

1. Embedded fonts - web typography gets easier
2. Translucent Transparency, RGBA and HSLA
3. Sampling by selectors (Selectors API)
4. SVG improvements
5. 1. FPS Property in SVG
   2. Embedded fonts in SVG
6. Opera Dragonfly Development
7. Acid3 - 100/100!
8. Conclusion

All code examples used in the article can be downloaded separately .
')
Acknowledgments: individual thanks should be given to my colleagues for excellent examples of the article: Lachlan Hunt for a sample of selectors, Andreas Bovens for using embedded fonts, and David Vest and Erik Dahlström for SVG examples.

Embedded fonts - web typography gets easier

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

Fortunately, this situation has to change in the near future thanks to the embedded fonts . The specification of Web Fonts in the CSS 3 module allows 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 the 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 @font-face block (at the very beginning of the style sheet, before declaring fonts), and then refer to it as usual:

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

Andreas gave us an example of using embedded fonts , which uses 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: An 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 the CSS 3 opacity property, which makes it easy to set an element's transparency level — for example: div { opacity: .7; } div { opacity: .7; } .

In addition, Opera Presto 2.1 supports specifying colors using RGB and HSL values. HSL-values ​​allow you to cope with some problems of RGB, such as non-obviousness when selecting colors (when using HSL, if you need to get a lighter tone of the same color, just increase the brightness value) or something like hardware difficulties. HSL values ​​are set 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 additional value can be used when specifying colors using HSLA and RGBA. Like the opacity property, which is well known to us, the transparency value in HSLA and RGBA is set in the range from zero to one, 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);  } 

This is 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 opacity sets transparency for the element itself and all its nested descendants , while using HSLA and RGBA allows setting the transparency only to the element itself.

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

Let's take a look at the 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: An 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 the use of the background-size property for 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 the opacity property is used. News block styles with simple transparency look like this:

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

Note that I positioned the CSS 3 properties separately from the simpler properties for better code clarity. 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 turn it around a bit. I think you will immediately notice that what you see is different from the screenshot above. This is because, as I said, the value less than one for the opacity property makes not only the element itself transparent, but all its descendants . In some cases, there is nothing scary about this, but this is not the best option, since a translucent text is rather difficult to read.

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

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

This CSS rule is essentially the same as the previous one, except that only the background color has become translucent. And the text remained completely visible and perfectly readable. Take a look at the RGBA example to see how it works.

Finally, for complete reporting, let's take a look at the indication of the same transparent background, but this time with the help of 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 specification formats using RGBA and HSLA also work in SVG, regardless of the transparency set with fill-opacity and stroke-opacity .

Sampling by selectors

The Selectors API specification defines the DOM API in order to make the selection of items much easier.

Let's look at an example - this line of code selects all elements of a document with a class attribute with an alert value:

  document.querySelectorAll (". alert"); 

The next line selects the first div element from the document:

  document.querySelector ("div"); 

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

As is clear from the previous example, Presto 2.2 supports two new methods: querySelector() and querySelectorAll() . The first method returns the first matching tree element, while the second method returns a collection of all matching elements in the form of a NodeList . The current specification defines that these methods are available for nodes of type Document , Element and DocumentFragment , however, our implementation so far supports only Document and Element types.

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

In order to compare how much these methods are more effective than traditional ones, let's consider the following HTML code fragment:

  <ul id = "fruits">
     <li> <input type = "checkbox" name = "fruit" value = "apples"> Apples </ li>
     <li> <input type = "checkbox" name = "fruit" value = "oranges"> Oranges </ li>
     <li> <input type = "checkbox" name = "fruit" value = "bananas"> Bananas </ li>
     <li> <input type = "checkbox" name = "fruit" value = "grapes"> Grapes </ li>
 </ ul> 

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

  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 into one line !

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

This code returns a list of DOM elements that contains all 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 svg root element itself, you can set an ID, select an element with getElementById , and then increase or decrease its targetFps property. In the example that Eric prepared for us, the following code inserts two buttons into the document that allow us 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 currentFps property. Take a look at the example of Erik , which demonstrates the change of FPS for SVG, or look for him in the archive with all the examples for the article .

The targetFps property is not very accurate, because it depends on both hardware and software, but nevertheless, it gives you some control over 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 the explicitly specified animation.

Embedded fonts in SVG

And if the usual embedded fonts are not cool enough for you, then we also added support for SVG fonts. This will allow you to use font files in SVG format for text (both in HTML and in SVG documents), just like regular embedded fonts. For example:

  @ 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 the embedded fonts in SVG, and then the source code itself to see how it works - Figure 3. By the way, UbuntuTitleBold is a SVG font, while the rest are TrueType fonts.



Figure 3: embedded SVG fonts!

To make sure that all this works in good old HTML, take a look at my modified example of embedded fonts, in which you can see that the SVG font is first mentioned in CSS, and then used to render 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 very difficult decision, but this is not at all the case - especially given the existence of the free program FontForge , which can convert fonts into various formats.

Take a look at the source code for the UbuntuTitleBold font from Erik’s example to understand what SVG fonts are.

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

Opera Dragonfly Development

• The “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 Alpha 3 Opera Dragonfly is DOM editing support. There are two editing modes in total: the first allows you to edit, add or delete attributes and text fragments in real time. It is activated by double clicking on the 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 are transformed into a simple text field. At the moment there is a known problem with the first type of editing, which does not allow you to exit edit mode after pressing the input. This issue will quietly be fixed in future updates.
• General interface improvements: we have made many interface improvements in Opera Dragonfly, including the way in which the debugging page is selected. Now the tab selected in the browser is the debug page.

The latest events in the life of Opera Dragonfly you can find in the thematic blog .

Acid 3 - 100/100

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



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

Conclusion

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

useful links

• List of changes . For those 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 that highlights web standards support in the previous version of Opera Presto 2.1 engine.
• Article: Changes in the format of the string "User Agent" . The new format of the string "User Agent", which appeared in the new beta and remained for future versions, may surprise someone. The article tells about the changes made and explains their reasons.

Chris Mills, Developer Relations Manager, Opera Software

Upd: The official version of the translation on Dev.Opera - Support for standards in Opera Presto 2.2 and Opera 10 beta