Browser implementations of linear-gradient() have evolved to support both top and to top as anchor values. Are they the same direction or opposites?
Asked
Active
Viewed 3,492 times
4
BoltClock
- 700,868
- 160
- 1,392
- 1,356
hurrymaplelad
- 26,645
- 10
- 56
- 76
2 Answers
4
They are opposites. to top uses the first color argument at the bottom of the element, while top uses the first color argument at the top.
Here's a fiddle. MDN has the full details and history.
hurrymaplelad
- 26,645
- 10
- 56
- 76
-
You should add the rest of the prefixes to your fiddle. – BoltClock Oct 21 '13 at 06:25
-
@BoltClock you caught me. Hoping I could slip that one through. There's a good variety in there now. Wasn't compelled to add the older webkit and ie incantations. – hurrymaplelad Oct 21 '13 at 06:34
-
Haha sorry, you'll want to avoid running into me then - I'm pretty picky about that sort of thing. I upvoted your answer because it's correct, but I added my own to expand on the topic. – BoltClock Oct 21 '13 at 07:02
4
They are not the same direction; they are opposites.
to top is an abbreviation for "bottom to top", whereas top means "start from the top".1 This is true not only for the other sides, but also for corners such as top right and bottom left.
Both directional keyword syntaxes were documented in the CSS Images level 3 module, which is why so many implementations made use of the legacy syntax early on. The last public working draft that made use of the legacy syntax is here; you can see a note acknowledging the sheer ambiguity around it, which eventually led to the use of the keyword to in subsequent revisions. The latest revision is here.
Some browsers support both syntaxes for indicating the direction of a linear gradient in their vendor-specific -*-linear-gradient() functions, however it should be noted that the standardized function linear-gradient() only accepts the new syntax with the to keyword. (If a browser accepts both syntaxes in the unprefixed function then it's either outdated or in violation of the spec, and should be reported.)
Note also that the default direction is top for the legacy syntax and to bottom for the current syntax. This means that the default direction is the same, and is unchanged.
Also worth mentioning is that if you use -prefix-free, it already accounts for this change, with the minor caveat that you need to include both syntaxes in separate declarations:
If you include both versions, the cascade does its job and ignores the latter version if it’s not supported:
background: linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black);
Both statements will be prefixed only in browsers that require the prefix, but regardless of that the browser will use the cascade to figure out which one it can use.
1 If there were a from keyword, then top and from top would be equivalent.
