Autoprefixer: Do autoprefixer support gradient?

[qcgm1978]

I have a style like this:

#header{
    position: absolute;
    z-index: 9999;
    height: 40px;
    width: 100%;
    top: -40px;
    overflow: hidden;
    transform: translate(0px, 40px);
    background: gradient(linear,0 0,0 100%,from(#E6E6E6),to(#D1D5D6));
    box-shadow: 0 2px 1px 0 #A3A5A8;
}

but after autoprefixer, css like this:

#header {
  position: absolute;
  z-index: 9999;
  height: 40px;
  width: 100%;
  top: -40px;
  overflow: hidden;
  -webkit-transform: translate(0px, 40px);
  -ms-transform: translate(0px, 40px);
  -o-transform: translate(0px, 40px);
  transform: translate(0px, 40px);
  background: gradient(linear,0 0,0 100%,from(#E6E6E6),to(#D1D5D6));
  box-shadow: 0 2px 1px 0 #A3A5A8;
}

so the background: gradient(linear,0 0,0 100%,from(#E6E6E6),to(#D1D5D6));
is invalid in chrome, I've expected a vendor prefix -webkit would be added, but didn't.

Do the tool support gradient? Or Do I set error?

Best Regards

[porada]

This is incorrect syntax. I believe this is what you wanted:

#header {
   background: linear-gradient(to bottom, #e6e6e6 50%, #d1d5d6 100%);
}

[qcgm1978]

You are great. The code now perfect by autoprefixer.Thank you.
Best Regards

[porada]

No problem. Please close the issue.

[qcgm1978]

I have another problem, How do I match android browser? I have a android phone which 'navigator.useAgent' as following:

"Mozilla/5.0 (Linux; U; Android 2.3.3; zh-cn; HTCA510e/1.0 Android/2.4 release/02.25.2011 Browser/WAP 2.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

The linear-gradient has no effect, i.e. it doesn't support the following code:

background: -webkit-linear-gradient(top, #e6e6e6 50%, #d1d5d6 100%);
  background: -o-linear-gradient(top, #e6e6e6 50%, #d1d5d6 100%);
  background: linear-gradient(to bottom, #e6e6e6 50%, #d1d5d6 100%);

It only supports the following:

background: -webkit-gradient(linear,0 0,0 100%,from(#E6E6E6),to(#D1D5D6));

even I set options as following:

options: {
                browsers: ['> 0.1%']
            }

How can I do ?

[ai]

Yeap, Autoprefixer doesn’t support so old gradient syntax, Android 2.3 was released about 3 years ago.

You can now write old syntax by your hand nad I try to add this old syntax in next version.

[porada]

Won’t Autoprefixer assume it’s incorrect and remove it?

[ai]

Nope, if you use -webkit- prefix.

[qcgm1978]

No, it don't remove it.
if I set like this:

background: linear-gradient(to bottom, #e6e6e6 50%, #d1d5d6 100%);
    /*compatible AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1*/
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#E6E6E6), to(#D1D5D6));

It will conver it correctly

background: -webkit-linear-gradient(top, #e6e6e6 50%, #d1d5d6 100%);
  background: -moz-linear-gradient(top, #e6e6e6 50%, #d1d5d6 100%);
  background: linear-gradient(to bottom, #e6e6e6 50%, #d1d5d6 100%);
    /*compatible AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1*/
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#E6E6E6), to(#D1D5D6));
···

[ai]

Not all modern gradients can be converted to old WebKit syntax. What should we do in this cases? Ignore or throw issue?

[porada]

Silently ignore.

[ai]

I hate Android 2.x :D

[ai]

@qcgm1978 do you need something more that top/left/right/bottom direction and 2 colors? ^_^

[ai]

I think, maybe we should add the simplest convertor and expand it on demand? :)

[qcgm1978]

@ai I think autoprefixer would prompt me if it can't convert some css and leave the deprecated code not delete it. I remember it deletes my code when it meets some deprecated css properties.

[ai]

I add basic support for old gradient syntaxes: 303d436949bafc148d7f6bbb8eb0155e9adc92de

Degrees in gradient direction isn’t supported: only to top, to left, to bottom and to right.

[ai]

It will be in next 0.8 release.

[qcgm1978]

Thank you ver much. I think autoprefixer should progressive enhancement and not change the ui of page if possible.

[ai]

I release new 0.8 version with this fix