stylus / nib

Stylus mixins, utilities, components, and gradient image generation
http://stylus.github.io/nib
MIT License
1.9k stars 250 forks source link

Unprefixed *-gradient properties need to use newer spec #111

Closed passcod closed 9 years ago

passcod commented 12 years ago

Firefox 16+ (and soon other, newer browsers that aren't really out yet, like IE10 or Chrome 20-something) implements the definitive gradient spec which changes the way the direction argument is defined and handled:

The linear gradient syntax is:

<linear-gradient> = linear-gradient(
  [ [ <angle> | to <side-or-corner> ] ,]? 
  <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

The first argument to the function specifies the gradient line, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to ‘to bottom’.

The gradient line's direction may be specified in two ways:

  • using angles For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.
  • using keywords If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.

    If the argument instead specifies a corner of the box such as ‘to top left’, the gradient line must be angled such that it points into the same quadrant as the specified corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners.

The <color-stop> syntax is unchanged.

kizu commented 12 years ago

I'll do it in #94, thanks.

However, the line

If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.

is wrong, read this article by Eric Meyer.

passcod commented 12 years ago

That's straight from the spec. So you mean the spec is wrong ...?

I think you'll find that the bottom paragraph addresses the semantics expressed in Meyer's article, which concerns the corners, i.e. to top left, to top right, to bottom right, and to bottom left. For the cardinal directions to top, to right, to bottom, to left, the angle is constant and indeed as spec'd, according to the new angle model for the new syntax.

kizu commented 12 years ago

Ah, misread it, you're right, nevermind, I'm stupid at the mornings sometimes :)

I would convert top to to bottom for the prefix-free property and to top to bottom for all the prefixed ones, also would do the degree calculating for prefixed variants.

passcod commented 12 years ago

Yep, that sounds right. As a side note, the current version works for FF16+ as there's no support for degrees, which means the non-to syntax triggers the -prefixed-, old, behaviour :smile:

kizu commented 12 years ago

The absence of degrees support in current nib is actually cool 'cause there won't be compatibility problems — we could make the new gradients use the new syntax and just convert it to older for prefixed props without fear of breaking something for someone :)

passcod commented 9 years ago

Fixed in #94.