Question

I use a mixin for linear-gradient like this:

.linear-gradient (@color1:#ccc, @color2:#fff, @stop1:0, @stop2:100%, @dir:top) {
    background-color: @color2;
    background: -webkit-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:    -moz-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:     -ms-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:      -o-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:         linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    filter: e(%       ("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @color1, @color2));
}

It’s worked well so far.. but after w3c publish a new correct direction for gradients and Mozilla update FireFox to 16.0.1 – I can’t use this mixin because FireFox 16 use linear-gradients without prefix -moz.

Now I can’t use .linear-gradient(#ffffff, #000000, 0, 100%, top) because top – not correct direction, now correct linear gradient from top to bottom is to bottom.

0deg, 90deg — doesn’t work cross browsers, because in all browsers 90deg it’s direction from bottom to top, but in FireFox 16 it’s from right to left.

About new directions https://hacks.mozilla.org/2012/07/aurora-16-is-out/

Got any ideas?

Answer 1

Using a local variable and adding 90 degrees for browsers that do not yet support the new orientation should do the trick:

(It was only in jsFiddle that the operation on degrees didn’t work).

.linear-gradient(@color1:#ccc, @color2:#fff, @stop1:0, @stop2:100%, @deg:0deg) {
  @old-deg: @deg + 90deg;
  background-color: @color2;
  background: -webkit-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:    -moz-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:     -ms-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:      -o-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:         linear-gradient(@deg, @color1 @stop1, @color2 @stop2);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";
}

.test {
  width:100px;
  height:100px;
  .linear-gradient(#000, #ff0, 0, 100%, 0deg);
}

(Note that I changed the escape syntax on the IE line).