jfs.world (109) [Avatar] Offline
#1
I'm finding it hard to follow along with the text when it comes to "prefixed" versions.

Eg. in the last version of the MEAP (v11), when it starts talking about CSS gradients (and i'm sure elsewhere as well!) in section 10.5. The book is written as if the "prefixed" version is as simple as using the browser-specific prefix (otherwise special attention would have been made to give us the exact rules?)

I have a number of problems with this.

1. are the prefixes specifically made clear in the book? not exactly. They are mentioned on page 317 of the pdf - but not in a place where you'd expect it. And then this mention makes reference to the "browser support section".. which really doesnt mention the prefixes at all?

2. (And this is what is causing a big problem for me right now) "Prefixing" is not as simple as merely adding the browser-specific prefix!

Try the following:

background: -webkit-linear-gradient(left 315deg, #000, #fff);

(Just adding the '-webkit-' prefix to the example given on page 373)

Doesnt work, unfortunately....
robert.crowther (59) [Avatar] Offline
#2
Re: css rules - give us the exact "prefixed" versions!

Yeah the gradients stuff is a bit of an adventure, there are at least three different versions supported across the various current browsers:



  • The original Apple/WebKit syntax

  • The proposed Mozilla syntax

  • The current W3C syntax


The code in the chapter in the current MEAP uses is outdated following the change in the W3C syntax earlier this year, though I did recently go through and update everything for the final publication process so the examples (when you get them!) all correspond to the current W3C spec, and the browser support section has a full cross browser example.


In the current W3C version the syntax you're quoting would be invalid, you could have the left to right gradient or the angle but not both:


background: linear-gradient(to right, #000, #fff);


Or


background: linear-gradient(315deg, #000, #fff);


A cross browser rule for that last one would look something like this:


#gradient {

background: -moz-linear-gradient(to bottom right, #000, #fff);

background: -webkit-linear-gradient(315deg, #000, #fff);

background: -o-linear-gradient(to bottom right, #000, #fff);

background: linear-gradient(to bottom right, #000, #fff);

}


Different browsers have different levels of support, for instance Firefox currently has support for the new W3C syntax for linear gradients but not radial ones, and will also support the old Mozilla syntax in -moz- versions. IE10 will support the W3C syntax un-prefixed, Opera supports it unprefixed, and Chrome/Safari support the old WebKit syntax and the old Mozilla syntax with the -webkit-


This is a pain for authors as well as readers in the short term, but in book timescales I'm anticipating that by the time the book has gone through all the proof-reading and typesetting and printing to actually be available from bookshops, everyone will be using the new W3C syntax. In the meantime if you need any specific help with making the examples work in current browsers please post here.


Rob