Return the support of legacy webkit syntax for gradients

[dr-nafanya]

When attempting to migrate from nib 0.9.2 to 1.0.0 I noticed that nib stopped generating legacy webkit syntax for gradients (like -webkit-gradient(linear, ...)).

This has broken the compatibility with old Androids (up to v2.3 and 3.x) which still have a considerable market share.

Would it be possible to return the old syntax? What complexities are related to that?

[notslang]

see: https://github.com/visionmedia/nib/issues/94#issuecomment-19504293

I don't think you need to worry about those old androids. So long as you have a decent fallback (which you will need for the larger section of very old browsers) they'll be all right. It's not worth the effort to set up gradients for such a small (and diminishing) section of the market. But if any of my stats are wrong, please tell me.

[dr-nafanya]

@slang800 yeah, but in the world of mobile browsers (according to http://caniuse.com/usage_table.php) Android 2.x stock browsers market share is ~11% of all versions of the most popular mobile browsers (included Safari on iOS, Android, Blackberry, IE10, Opera Mini/Mobile, Chrome for Android, FF for Android). In mobile web this looks as enough amount to worry about.

[notslang]

Where are you getting 11% from? The stock android browser only has a 5.78% total market share, and most of that is from the 4.x series, which supports the standard gradient syntax. So, there's less than 2% of users who still have a stock android that doesn't support the standard gradient syntax.

This doesn't mean that 2% of users aren't able to use your site - that would be bad. This does mean that 2% of users don't get fancy gradients, and are forced to see the same fallback that people with old browsers end up seeing. I don't think that dealing with the legacy syntax is worth such a small improvement in the experience of only 2% of users. But if you really do, I'd be happy to review a PR for adding them... it's just not something I'd spend time on.

[dr-nafanya]

I've considered only mobile browsers when got these 11%.

PR makes sense, but I also wanted to figure out what were the reasons to retire the legacy syntax (besides the fact that it is legacy and affecting relatively small portion of users). Anything preventing from fixing issues/implementing new features, etc.? Is there anything special to consider when getting the legacy syntax back?

[notslang]

ok that explains it, though I find it strange to consider only the mobile browsers when your users can be on any device.

And yeah - the webkit syntax doesn't map easily to the official syntax, especially for more complex cases. You'd be best off making it just add the legacy syntax when it's a really simple gradient. If you can make it work with more, then go right ahead, but from what I saw in the old implementation, it was really messy.

[igor10k]

another bug related to this is that when you try to use the old syntax like

background-image -webkit-gradient(linear, left top, left bottom, from(#7497dd), to(#658cd9))

it renders

background-image: -webkit-gradient(linear, left top, left bottom, from(#7497dd), to(#658cd9));
background-image: -webkit-gradient(linear, left top, left bottom, from(#7497dd), to(#658cd9));
background-image: -webkit-gradient(linear, left top, left bottom, from(#7497dd), to(#658cd9));
background-image: -webkit-gradient(linear, left top, left bottom, from(#7497dd), to(#658cd9));
background-image: -webkit-gradient(linear, left top, left bottom, from(#7497dd), to(#658cd9));

It's all about the word "gradient", because changing it to anything else stops the duplication. The old trick with unquote('') is of no help here.

[BYODKM]

I am a person who also hope to return the legacy gradient syntax support into nib. I made a mixin called "legacy-gradient.styl" after upgrade nib 1.x. But, it would be nice there is no need to add extra mixin file to fill the gaps between browsers. I think this is what CSS preprocessors do for.

[notslang]

@BYODKM - if you added some test cases in there & made it into a PR I'd be happy to look at including it.