New development techniques using Opera Kestrel (9.5)

By David Storey

Kestrel is the upcoming version of Opera's desktop browser (version 9.5.) The full version isn't available yet, but the first beta version is already available to play with, at http://www.opera.com/download/?ver=9.50b. Now that Opera has fully migrated to the new version of its rendering engine, Core-2, Opera Kestrel has a few new techniques available for developers to play with, including new CSS3 and SVG support, and a new JavaScript engine, all of which I will discuss in this article.

Say hello to CSS3 selectors

Kestrel supports the full range of CSS3 selectors, so you can take advantage of some of the CSS3 spec's advanced selectors to select very useful element groups without having to add extra mark-up or class/ID names.

Tiger striped tables

Alternating the background colour of the rows in a data table has been a popular usability technique for a few years now - it allows the eye to follow the rows more easily. This traditionally required JavaScript or adding a class name to each row that needed to be styled with the alternative colour, but no more! This can now be done with nth-child (or nth-of-type).

In the following example (see here for the example in action) the striped effect can be created by simply using:

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

Alternatively nth-child(even) could have been used. You can have exact control over which element is selected, by specifying the element number, the repeating pattern you want and/or the element offset value. For example, tr:nth-child(2) would specify the second row only, tr:nth-child(3n) would select every third row, while tr:nth-child(3n+1) would select every third row offset by one.

Drop caps

A popular way to add drop caps is to put a span around the first letter, or add a class to the paragraph you want to add the drop cap to and use the ::first-letter pseudo-element to manipulate the drop cap (the class is needed as it isn't always predictable where the element will be in the code; there could be a image or a list before the first paragraph for example, which could throw things off.) But no more do we have to suffer this hassle - you can now create a drop cap (among many other things) with the first-of-type selector.

Check out the following code:

div.article > p:first-of-type::first-letter { }

This selects the first letter of the first p element that is a direct child of the div element with an class of article. If there are any other elements before the first paragraph of the article, the correct element will still be selected. It ignores any paragraphs that are not a direct descendent, such as those contained in div elements. This can be seen in the example found here.

Dynamic Media queries

Media queries allow you to query certain properties about the user's system, so that you can tailor the style and layout to suit their needs. They are most commonly used to customise the layout for mobile devices, but they can be useful on the desktop too. With Kestrel, media queries are dynamic, meaning that if you have a media query that checks the screen width, the query will fire automatically when the user moves the window size below/above that width, rather than you being expected to refresh the page. This can be very useful - with liquid layouts, there are often problems where content overlaps or breaks unappealingly onto a new line when the user resizes their browser below a certain width; with dynamic media queries you could avoid this by using a media query to automatically break the content in an acceptable manner when the browser goes below that width.

Let's have a look at a real example - point your browser at this example. If you resize the browser window horizontally the Media Query fires when the column of text reaches a hard to read width, and clears the text under the image by removing the float from the figure class. It also reduces the size of the heading to make it more readable at smaller window sizes, and scales the image so that it remains fully visible.

The CSS for this is:

@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;
    }
}

Other useful CSS additions

Selectors aren’t the only CSS additions to Kestrel. For a further overview please check out the change logs (you can find links to them here) or my previous post on Opera Labs for a quicker overview.

Adding decoration using SVG

SVG (scalable vector graphics) is a markup language for creating high-quality, small bandwidth vector graphics and animations. It has shown promise for a long time, but hasn't yet made it to the main stream, mainly because of browser adoption, but this is starting to change. Opera Kestrel improves its support further with partial support for SVG 1.2 Tiny (the basic subset of SVG guaranteed to work on all devices including mobile phones, as long as a parser is available,) amongst other things. The most interesting addition in my opinion though is the ability to use SVG as the source of an img element and make use of it via CSS using the background-image and list-style-image properties. Below we'll look at how this can be used to spice up your designs.

Rounded corners

The border-radius property has been added to CSS to make rounded corners easier. This doesn't work in Opera at the present moment, but SVG can be used in tandem with border-radius to create rounded corners that work in the latest versions of Opera, Safari and Firefox.

In the following example (see here for a live example) you can see each technique used separately, then them combined in the final example. No special HTML is needed, except a regular block level element (in this case a div) to apply the style to.

The CSS needed is as follows:

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

And the 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"/>

Browsers that don't understand SVG as background images will ignore the file and apply the border-radius if they support it. Browsers that don't support either will fall back to square corners (do nothing.) In Opera Kestrel, it will display the SVG image as a background, covering the silver background colour. The first rectangle in the SVG covers the content div with the same colour as the web page background (in this case white) to stop the rounded corners being spoiled by same-colour corners showing through. The second rectangle is set to the same colour as the background of the content div, and has 1em radius rounded corners applied to it using rx.

While SVG can be used to simulate border-radius, it is not limited to round corners, so it is also quite possible to simulate border-image in the same way. It is quite easy to imagine using it for cut off corners, page curls and the like.

Gradients

If you want to add gradients to your design, the most common method is to use a tiled image. With Kestrel this can be added with a very simple SVG file set as a background image. As it is SVG, it scales much better than the bitmap alternative when zooming, and this is becoming a bigger issue as the web moves to situations where zooming is a common activity, such as on mobile phones and TV based browsers. It also doesn’t require a image editor to adjust the gradient, and it can even be changed programatically through JavaScript if required.

In the previous striped table example, a gradient was applied as a background image to the first row in the table. For browsers that don't accept SVG as a background image they apply the supplied background colour, which is generally an acceptable fallback.

The CSS was very similar to the example above:

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

While the SVG is just a simple gradient element applied the fill of a rectangle:

  <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%" />

Introducing the new JavaScript engine

We heard there was a challenger to our speed crown. Not one to shy away from a challenge, we are debuting a new improved, more efficient and quicker JavaScript engine in Kestrel. it is not only faster (and getting faster with every build,) but also has a huge number of bug fixes and feature enhancements.

One of the focuses was fixing bugs in relation to rich text editing. Examples include adding support for Node.compareDocumentPosition from DOM3, and Range.comparePoint from the Gecko DOM. These are both used by Google Pages. JavaScript 1.5 getters and setters have also been added, improving the compatibility with a number of big sites including Yahoo! Mail and a number of Microsoft Live properties.

A popular and useful feature will be the addition of native support for getElementByClassName from HTML5. This will save you from having to roll your own or using a JavaScript library for this commonly required functionality.

More changes can be found in the change logs (again, find links to them here,) and the new JavaScript engine will be the focus of an upcoming article on dev.opera.com.

Summary

In this article I have provided a useful look ahead towards new web development techniques available due to the new standards support in next-generation browsers such as Opera Kestrel. These changes will only improve our work by making new techniques available but by also making existing techniques easier and simpler to achieve. Keep giving Opera and the rest of the browser manufacturers feedback about this kind of thing and it will become more standard across browsers, driving quicker adoption.

David Storey heads up the Open the Web initiative at Opera. This small global team is tasked with improving the compatibility of web sites across Opera's wide range of browsers, as well as promoting web standards, accessibility and best practices, so that the Web will work for all standards-aware browsers, platforms, devices and users. He is a member of the W3C Mobile Web Best Practices Working Group.

On his blog, Slightly Ajar, he discusses this work, as well as random topics, from travel to music.

David previously worked for CERN, home of the World Wide Web, before taking up his post at Opera Software.


This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.