The second key change is that the centre of the image is not shown by default; in order to fill in the image, you have to use the fill keyword with border-image-slice, e.g.:

E { border-image-slice: 10 fill; }

Third, specificity of the border property is now important; if the border property is set to none and has higher specificity, border-image won’t apply.

Fourth and finally, all of the properties have been unprefixed.

The examples in Chapter 9 have been updated to reflect these changes. In Example 09–07 I’ve added an extra box to show the individual properties, and also the fill keyword noted above.

E { font-feature-settings: "feature" flag; }

The feature value is the four-letter code for each OpenType feature; dlig, kern, liga, etc. The flag is a number, 0 or 1, to show whether the feature is enabled or disabled. So to disable kerning, the new rule is this:

E { font-feature-settings: "kern" 0; }

As the flag is Boolean, to enable a feature you can supply no value:

E { font-feature-settings: "liga"; }

As before, you can give multiple values in a comma-separated list:

E { font-feature-settings: "dlig", "kern" 0, "liga"; }

The new syntax will be introduced in Firefox 15 (still with the –moz– prefix), is available in Chrome (Linux and Windows only, with the –webkit– prefix) and unprefixed in IE10.

The support tables in Chapter 5 and Example 05-08_09 have been updated with the new syntax.

The syntax for radial-gradient has changed dramatically since publication of the book. The new syntax looks like this:

div { background: radial-gradient(10em circle at right,#000,#FFF); }

The first value sets the size of the gradient; it can be a unit value, or a keyword such as closest-side. The next value is the shape; a radial gradient can be either a circle or an ellipse. Next is an optional position for the centre of the gradient; in this example, the gradient will start on the centre of the right side of the box. The color-stop values remain as before.

There’s a fuller explanation of the new radial-gradient syntax at Broken-Links.com.

All of the support tables and examples in Chapter 11 have been updated to reflect these new developments.

The -moz-skew() function has been removed from Firefox 14, and Example 12–05 has been updated to show this.

The background-position property now accepts up to four values to give more flexibility in positioning. Previously all positioning was measured from the top left corner, but with the updated syntax you can change that by using a keyword before each value; for example, to position the background image 20px from the right and 10px from the bottom, you would use this:

e { background-position: right 20px bottom 10px; }

You can also use three values, which must be in the format keyword-keyword-length or keyword-length-keyword:

e { background-position: left top 20px; }
f { background-position: left 20px top; }

This is equivalent to:

e { background-position: left 0 top 20px; }

You can see a few examples of this in Figure 8–12 — as I write this, only Opera, IE9 and Firefox Nightly will display this correctly.

The other change is to the background-repeat property. This now accepts two values, which are equivalent to background-repeat-x and background-repeat-y:

e { background-repeat: repeat no-repeat; }

This is demonstrated in Figure 8–13, but although Firefox 13 should have support for this syntax, these examples use the background-repeat values space and round so as of this writing you’ll need Opera or IE9 to view them.

The browser support tables in Chapter 8 have been updated to show these changes.

First, a color-stop now accepts length values or percentages, so this is valid:

div { background-image: linear-gradient(black 10px, white); }

Second, percentages are no longer permitted for the point value, which now allows only keywords and angles. So this is no longer valid:

div { background-image: linear-gradient(100% 50%, black, white); }

And you should use this instead:

div { background-image: linear-gradient(right, black, white); }

However, the very latest version of the module changes this further, so instead of the keyword being the origin point, it’s now used with the to keyword to be the end point; for example, a left to right gradient used to be this:

div { background-image: linear-gradient(left, black, white); }

But is now this:

div { background-image: linear-gradient(to right, black, white); }

And a diagonal bottom-left to top-right used to be this:

div { background-image: linear-gradient(left bottom, black, white); }

But is now this:

div { background-image: linear-gradient(to right top, black, white); }

Firefox 10 should be the first browser to implement these on the linear-gradient and repeating-linear-gradient values, with the –moz– prefix. I’ve updated the support table and examples in Chapter 11 and you can test these now if you have a copy of Firefox Beta, Aurora, or Nightly.