Updates

In the past few months IE10, Firefox 16 and Opera 12.1 have all been released, and all have removed the vendor pre­fix from the four gradi­ent prop­er­ties: linear-gradient, repeating-linear-gradient, radial-gradient, and repeating-radial-gradient. As a res­ult, all of the examples in Chapter 11 now use the new syn­tax. Only the WebKit-based browsers are yet to imple­ment the final syntax.

— 23 November, 2012

Firefox 15 should see changes to the border-image syn­tax to keep it in line with the latest ver­sion of the spec. There are four key changes: first, all of the indi­vidual border-image-* prop­er­ties are sup­por­ted. They are: border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. The border-image prop­erty is now a short­hand for all of those.

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, spe­cificity of the border prop­erty is now import­ant; if the border prop­erty is set to none and has higher spe­cificity, border-image won’t apply.

Fourth and finally, all of the prop­er­ties 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 indi­vidual prop­er­ties, and also the fill keyword noted above.

— 20 July, 2012

The font-feature-settings prop­erty intro­duced in Chapter 5 has changed slightly since pub­lic­a­tion of the book, and is now imple­men­ted in more browsers. The tweaked syn­tax now looks like this:

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

The fea­ture value is the four-letter code for each OpenType fea­ture; dlig, kern, liga, etc. The flag is a num­ber, 0 or 1, to show whether the fea­ture is enabled or dis­abled. So to dis­able kern­ing, the new rule is this:

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

As the flag is Boolean, to enable a fea­ture you can sup­ply no value:

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

As before, you can give mul­tiple val­ues in a comma-separated list:

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

The new syn­tax will be intro­duced in Firefox 15 (still with the –moz– pre­fix), is avail­able in Chrome (Linux and Windows only, with the –web­kit– pre­fix) and unpre­fixed in IE10.

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

— 8 July, 2012

The latest pre­view release of IE10 has the most up to date linear-gradient and radial-gradient syn­taxes, and has removed pre­fixes from them both.

The syn­tax for radial-gradient has changed dra­mat­ic­ally since pub­lic­a­tion of the book. The new syn­tax looks like this:

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

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

There’s a fuller explan­a­tion of the new radial-gradient syn­tax at Broken​-Links​.com.

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

— 26 June, 2012

The CSS 2D Transforms and 3D Transforms mod­ules have been merged into a single mod­ule: CSS Transforms. The only prac­tical change this has res­ul­ted in so far is the removal of the skew() func­tion — skewX() and skewY() remain unchanged.

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

— 25 June, 2012

Some updates to exist­ing back­ground prop­er­ties have landed in browsers since the pub­lic­a­tion of the book.

The background-position prop­erty now accepts up to four val­ues to give more flex­ib­il­ity in pos­i­tion­ing. Previously all pos­i­tion­ing was meas­ured from the top left corner, but with the updated syn­tax you can change that by using a keyword before each value; for example, to pos­i­tion the back­ground image 20px from the right and 10px from the bot­tom, you would use this:

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

You can also use three val­ues, 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 equi­val­ent 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 dis­play this correctly.

The other change is to the background-repeat prop­erty. This now accepts two val­ues, which are equi­val­ent to background-repeat-x and background-repeat-y:

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

This is demon­strated in Figure 8–13, but although Firefox 13 should have sup­port for this syn­tax, these examples use the background-repeat val­ues space and round so as of this writ­ing you’ll need Opera or IE9 to view them.

The browser sup­port tables in Chapter 8 have been updated to show these changes.

— 28 February, 2012

Some updates to the Text prop­er­ties in Chapter 6: Firefox 12 is sched­uled to sup­port the text-align-last prop­erty, although it will be pre­fixed as -moz-text-align-last; and WebKit browsers have imple­men­ted text-rendering, without pre­fix, in Safari 5+ and Chrome. The browser sup­port tables have been updated accordingly.

— 28 February, 2012

Support for 3D Transforms has landed in the beta release of Firefox 10, so seems very likely to ship with that browser. The table in Chapter 14 has been updated to reflect this.

— 17 January, 2012

Some changes have been made to the CSS Gradients syn­tax since the pub­lic­a­tion of the book.

First, a color-stop now accepts length val­ues or per­cent­ages, so this is valid:

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

Second, per­cent­ages are no longer per­mit­ted 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 ver­sion of the mod­ule changes this fur­ther, so instead of the keyword being the ori­gin point, it’s now used with the to keyword to be the end point; for example, a left to right gradi­ent 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 diag­onal 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 imple­ment these on the linear-gradient and repeating-linear-gradient val­ues, with the –moz– pre­fix. I’ve updated the sup­port table and examples in Chapter 11 and you can test these now if you have a copy of Firefox Beta, Aurora, or Nightly.

— 8 January, 2012