Support the OFFICIAL syntax for gradients

[chriseppstein]

Here's a good article on the topic.

http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx

[webbower]

The new syntax basically makes the direction opposite or what it used to be, so "bottom" becomes "to top" and "top left" becomes "to bottom right". It's going to take some string interpretation and mapping one direction to its opposite. There's only 2 supported ways to specify the angle: degrees and directions. You'll obviously need to parse the angle value, alter it if it's the directional syntax, and pass it through if it's the degree syntax. Plus supporting all the people who wrote it the old way. My Ruby-Fu is poor, but something like (psuedo-code. I may be missing old syntax as my knowledge is not quite as great on this as yours):

# def linear-gradient(angle, color_stops)
#   if angle starts with "to"
#     crazy magic for owg
#     strips off "to" and swaps the opposites for each keyword for vendor-prefixes (top <-> bottom, left <-> right)
#     passes through for un-prefixed syntax
#   else if angle =~ \d+deg
#     crazy magic for owg
#     pass-through for vendor-prefixes (I never use degrees so I don't know what the old support was for them)
#     passes through for un-prefixed syntax
#   else # assume old directional keywords
#     crazy magic for owg
#     pass-through for vendor-prefixes
#     swaps the opposites for each keyword and prepends "to" for un-prefixed syntax (top <-> bottom, left <-> right)
#   end
# end

[webbower]

Also, obviously you want to encourage the proper syntax going forward and roll in deprecated syntax alerts while maintaining backwards compatibility.

(Not trying to be a know-it-all. Just trying to provide ideas for how to work out the support since I can't write Ruby to save my life.)

[chriseppstein]

#982 was marked as a duplicate of this issue.

[mirisuzanne]

Looks like the meaning of an angle has also changed (from east to north). That change is reflected in the current Firefox Beta - so sites are about to start breaking. We need to fix this asap.

https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

[webbower]

The MSDN article earlier shows the formula for converting old angles to new ones. It's in the caption of the right column under Angle Direction:

Old angles can be converted to new angles using the formula new = abs(old−450) mod 360

In the meantime, I've been manually overriding Compass output:

@include background(linear-gradient(top, #FFF, #000));
background: linear-gradient(to bottom, #FFF, #000);

[mirisuzanne]

I wrote up these quick helpers to help with the manual override:

// Return the modulo of two numbers
@function mod($dividend,$divisor) {
  @return $dividend - (floor($dividend/$divisor)*$divisor);
}

// Return the corrected angle or position for a css gradient
@function angle($deg) {
  @if type-of($deg) == 'number' {
    @return mod(abs($deg - 450), 360deg);
  } @else {
    $position: to + " ";
    @each $pos in $deg {
      $position: $position + opposite-position($pos) + " ";
    }
    @return $position;
  }
}

// Return fixed linear gradient
@function fix-linear($angle, $details...) {
  @return linear-gradient(angle($angle), $details...);
}

Clearly we need a better fix soon.

[rdj]

@ericam Good show. Note this requires tracking sass master for varargs support. I went ahead and packaged it up into one mixin that worked well for my envrionment:

@mixin background-image-linear-gradient-with-fix( $angle, $details... ) {
  @include background-image( linear-gradient( $angle, $details... ) );
  background-image: fix-linear( $angle, $details... );
}

With Firefox 16 released, then pulled, and now released again, it was time for me to get something in production to fix this. Presumably some people are going to end up running IE10 Real Soon Now as well.

[designerdean]

I'm having issues with compass radial gradients in Firefox—could it be the same problem?

[webbower]

Very likely. Read the article linked at the beginning of this thread.

[domenic]

+1

[jamelt]

Radial gradients not working in Firefox

[benfrain]

So... I'm aware and understand the issue, but could anyone clarify what the best way to proceed is? Until the next pre-release is 'released' does it make more sense to just 'hand-write' the gradients Old Skool style? Or is it best to drop in Ericam's function to sort the issue in the interim?

[mirisuzanne]

I'm using these functions and mixins: convert-gradient-angle(), convert-gradient(), and gradient-background-image().

Unless you need multiple-backgrounds, the use is simple and dry:

// pass any gradient, using the new syntax:
.thing {
  gradient-background-image(to bottom, red, yellow, blue);
}

If you need layers, you'll have to use the convert-gradient() function instead. convert-gradient() is agnostic about which syntax you start with - it will convert in either direction. Just make sure the old syntax is used first (inside a compass-images mixin), and the new syntax is used second (outside):

// using the new syntax:
.new {
  @include background-image(convert-gradient(to bottom, red, yellow, blue), image-url('another-layer.png'));
  background-image: linear-gradient(to bottom, red, yellow, blue), image-url('another-layer.png');
}

// using the old syntax:
.old {
  @include background-image(linear-gradient(top, red, yellow, blue), image-url('another-layer.png'));
  background-image: convert-gradient(top, red, yellow, blue), image-url('another-layer.png');
}

You can simplify that duplication by dropping your gradient into a variable, and then passing in the variable with varargs:

// using the new syntax:
$gradient: to bottom, red, yellow, blue;
.new {
  @include background-image(convert-gradient($gradient...), image-url('another-layer.png'));
  background-image: linear-gradient($gradient...), image-url('another-layer.png');
}

[benfrain]

As ever Eric, many thanks.

[scottdavis]

Try this branch https://github.com/chriseppstein/compass/tree/gradients

[benfrain]

Just to advise, I'm having great success on that branch. Linear gradients are working perfectly in IE10, Safari, iOS 5/6, Android 4, Chrome and Firefox using the existing @include background(linear-gradient()); syntax. Great work people.

[scottdavis]

@LaurentGoderre does that branch fix that issue?

[rdj]

Very cool. Just pointed at this head, and re-shimmed my temp fix from above:

@mixin background-image-linear-gradient-with-fix( $angle, $details... ) {
  $use-legacy-gradient-syntax: true;
  @include background-image( linear-gradient( $angle, $details... ) );
}

Everything seems to be working great. When can we expect to see this in a released version of the gem?

[scottdavis]

When I get around to doing radial gradients

[jaikdean]

Has there been any movement on this?

[mirisuzanne]

Linear gradients are working on the master branch. Radial gradients have not been updated yet.

[pauvos]

Possible workaround: Instead of "left" or "to right" you can also use "-90deg" as direction (see http://dev.w3.org/csswg/css-images-3/#linear-gradients)... which fixes the bug for me in IE10 without touching the compass source.

[xi]

Old angles can be converted to new angles using the formula new = abs(old−450) mod 360

This formula is not completely right. The right one should be (90-old) mod 360 which of course is the same if old is less than 450deg.

[JoernBerkefeld]

as mentioned in #1449 :
The SVG module does not understand the new syntax either.

The console shows the typical error: "Cannot determine the opposite position of: to"
The result is that it seems to default back to "left" / "to right" / a gradient from left to right for the SVG.

tested in compass 0.13.alpha.10

[mstoltenburg]

Is it true that the current stable compass version (0.12.6) ist still not supporting the standard syntax (using the to keyword and 0deg pointing to the top)? It's still using the same angle-or-direction for the prefixed and unprefixed statements. This is wrong one way or another.

[chriseppstein]

This is fixed on master. If something thinks otherwise please post exact syntax that is broken so I can reproduce.