Opera 9.5 for developers

With version 9.5, Opera completely moved to the new Core-2 engine. Now Opera Kestrel can offer developers several new features for use on sites. Already, you can appreciate the new features CSS3, SVG and a new engine for Javascript.

Say hello to CSS3 selectors

Kestrel maintains the entire list of CSS3 selectors. Using them, for example, you can create groups of elements without adding extra tags or class names.

Rinse tables

Alternating the colors of rows in tables is a rather popular idea of ​​recent years. This usually required Javascript, or the creation of a class for each stylized alternative color line. This can now be done with nth-child (or nth-of-type)

For example,

#playlist tr: nthchild (odd) td {
background-color: # edf3fe;
}

Notice the word odd, meaning odd. Conversely, use even. In addition, in brackets you can specify the line number, or (!) The similarity of formulas, for example, 2n + 1.

And in the air caps threw

Drop cap, or, in Russian, the capital letter (letter) of the text. This is such a huge letter, which is often found at the beginning of the chapter of the book. On the Internet, it is usually allocated using a separate block for the first letter. Now you can use the pseudo-element :: firstletter. We must not forget that in any case, the capital letter needs a class.

div.article> p: firstof-type :: firstletter {}

This covers the first letter of paragraph p, a direct descendant of div.article.
')

Dynamic media queries

Media queries are used to obtain information about the user's system. Knowing her, you can build a new design. This idea is often used when accessing a site through a mobile device. In Kestrel media queries are dynamic. This means that they are called every time an event is placed on them, for example, when windows are resized.

@media screen and (max-width: 730px) {

h1 {font-size: 2em; }

.figure {
float: none;
margin: 0 10%;
}

.figure p {display: none; }

.figure img {
max-width: 95%;
height: auto;
padding-bottom: 5px;
}
}

Rounded corners

As you know, CSS supports rounding using the border-radius property. As long as it does not work, Opera offers output using SVG. Example:

CSS:

background: silver url ("../ images / roundedcorners2.svg");
-webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em;

SVG:

<rect fill = "white" x = "0" y = "0" width = "100%" height = "100%" />
<rect fill = "silver" x = "0" y = "0" width = "100%" height = "100%" rx = "1em" />

A browser that does not support SVG will start building roundings using border-radius, of course, if it does. If not, everything will remain square.

Gradient

Opera now has a way to draw a gradient using the same SVG. This is great for scaling situations. Save the vectors :).

The example uses the color rgb as a background for browsers that do not support this method, and SVG for Opera:
CSS

#playlist tr: firstof-type {background: rgb (187,187,187) url ("../ images / gradient.svg"); }

SVG:

<defs>
<linearGradient id = "grad" x1 = "0%" y1 = "0%" x2 = "0%" y2 = "100%">
<stop offset = "30%" style = "stop-color: rgb (219,219,219);" />
<stop offset = "90%" style = "stop-color: rgb (187,187,187);" />
</ linearGradient>
</ defs>

<rect fill = "url (#grad)" x = "0" y = "0" width = "100%" height = "100%" />

New Javascript

The Javascript engine has once again become faster, less powerful and more functional. For example, solved some problems with decorated text. There is support for Node.compareDocumentPosition from DOM3 and Range.comparePoint from Gecko DOM. They are both used by Google Pages. Added getters and setters Javascript 1.5, which improves the work with Yahoo! mail and Microsoft Live.

Also now you can use the popular function getElementsByClassName from HTML5, which eliminates the need to write your library.

Conclusion

Work is in full swing! ;)
Original