Gradient plugin for IE9

[DASPRiD]

Since IE9 does not support native gradients, and also struggles with filters depending on the rendering mode, it'd be useful to have a plugin which takes the gradient and creates an SVG out of it, which is then embedded via a data-URI. This rule should come before all other background/background-image rules, so other browsers use their native gradient syntax.

Optionally it could be useful to save the SVGs somewhere and just reference it in the CSS (at least for a non-dev compile). This way, only IE9 has to load all the SVG data, but this is not a must-have. Thinking about it again, this shouldn't make much of a difference with the webserver gzipping the CSS.

[peteboere]

This is a nice idea.

Though it's also quite niche given it only applies to IE9.

The main problem I see with implementing it is the need to store the generated svgs somewhere. Simply outputting data-uris would (in my opinion) be an unacceptable hike in filesize just to cater for one version of IE.

A writable folder for storing the svgs is a stumbling block since the existing write permissions for css crush is one of the main problems users seem to have with integrating it into their projects, so I'd be reluctant to have a plugin that required writable cache storage.

Technically to write an adapter to convert say linear-gradient(top, red 20%, blue 100%) to an svg file that recreated that is certainly possible, but a significant amount of work and testing.

So I'll push back on this for now, if there are other use cases other that IE9 for a svg-gradient function I'd certainly be interested in picking it up.

[DASPRiD]

I have actually implemented that myself in my own prefix compiler (which is very rudimentary). How I solved the problem with writable directories there is the following:

For development, the pre-compiler is directly included vie and generates prefixes and SVGs on-the-fly as data-URIs included in the returned CSS. When doing the production build, the pre-compiler is called from the build script, producing a "just-prefixed" CSS file with the SVGs in an external file. I haven't looked enough into css-crush yet, so I don't know if it supports on-the-fly generation/build-script inclusion like that. I'd certainly contribute my own implementation of the SVG generator as a plugin.

Also, IE9 is the most current IE version right now, which has to be supported for clients, so I think this is a very valid use-case. Eventually, not only that SVG solution but prefixes itself are just a temporary thing.