W3C home > Mailing lists > Public > www-style@w3.org > July 2011

[css3-images] remaining gradient issues

From: Brad Kemper <brad.kemper@gmail.com>
Date: Tue, 26 Jul 2011 11:30:44 -0700
Message-Id: <58D0A086-B481-4355-A092-EDDE99A617D0@gmail.com>
To: www-style list <www-style@w3.org>
It seems to me that there are not too many issues remaining for linear gradients. I'm not sure about radial-gradients. But if we look at linear-gradients, I think it is just the following:

1) pre-multiplied or not: the WG  resolved yesterday that we do want pre-multiplied. IIRC, Webkit (or just Safari?) might be slow to implement that, because of the libraries they use, but we have at least two implementations that will.

2) In corner to corner gradients, having a midpoint that stretches between the other corners, and a gradient path angle that is perpendicular to that [1]: There seems to be general agreement so far that it looks better that way (it better fills the image box, with half the gradient being one half-box triangle and the other half another), but not a lot of comment from implementors about changing to that. If there is not a lot of disagreement, and if it can be resolved, then it does not appear to be a hard change to make. I'd hope for rapid adoption.

3) keyword confusion: there is still disagreement about what is the best keywords to use, to be as intuitive as possible. Many, including myself, think it is most natural to start with the starting edge, then list the color stops to end with the last one. But it is ambiguous enough to be unintuitive for some, and the 'Ndeg' form leads them to think of a destination edge/corner instead of a beginning edge/corner. I think, therefore, that the best compromise (to remove ambiguity, but maintain a natural ordering of arguments and meaning) if to add 'from' to the beginning of the keyword, e.g. 'from bottom left'. I realize that we will probably never agree on what the perfect way is, but isn't this acceptable? From an author's point of view, where I will most assuredly be using a list of prefixed versions, I'd rather not have to turn my point of view from the meaning of keywords in earlier versions just because someone didn't think it was quite perfect the way it was. Just picking less ambiguous keywords would resolve the issue without unnecessarily changing the mental model. 

4) dropping keywords in order to advance spec: this was discussed in F2F meeting yesterday, with no resolution. I would hate to see this happen. There is currently interoperable implementations of the current keywords, and changing the words required would be trivial. But #2 above could slow that down. If so, then it could make sense to drop just the corner-to-corner functionality (for now), or mark it "at risk", if we can agree on #3 above, and I am OK with that. One reason in particular that I am scared to see keywords go away altogether is because the meaning of degrees has changed, and if, say, Gecko changes that in their prefixed implementation (while also dropping keyword support), then authors will be unable to create gradients with reasonable fallback like they can today (unless they want '45deg', '225deg', or '-135deg'). The most common gradients are horizontal or vertical, which require either a keyword or a stable degree notation. From a practical point of view for authors, is not a good thing to force us to give up using the prefixed versions that would allow us to support vastly more users (if the prefixed version of degree direction can mean two very different gradients in different versions of browsers, and keywords are no longer available). If it is only non-horizontal and non-vertical gradients that are affected, then that is a much smaller impact.

Here is the kind of thing authors can do today (and are doing) for widespread support of vertical and horizontal gradients (add more lines for keyword changes that make it into prefixed implementations):

background: url(black-to-white-vertical-gradient.gif) white repeat-x 0 0; /* Old browsers */
background: -moz-linear-gradient(top, #000000 1em, #ffffff 2em); /* FF3.6 - 5 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(33%,#000000), color-stop(66%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 1em,#ffffff 2em); /* Chrome10-11,Safari5.1 */
background: -o-linear-gradient(top, #000000 1em,#ffffff 2em); /* Opera11.10? */
background: -ms-linear-gradient(top, #000000 1em,#ffffff 2em); /* IE10? */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 (I can leave this line out if I don't like the results in IE) */
background: linear-gradient(top, #000000 1em,#ffffff 2em); /* W3C (update this as needed) */

The fallback goes away if keywords go away AND degree meaning is changed in the same prefixed version of the same software version. 

Did I miss any other issues?

[1] http://lists.w3.org/Archives/Public/www-style/2011Jul/0416.html
Received on Tuesday, 26 July 2011 18:31:23 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:02 UTC