CSS filters (not to be confused with svg filters) are quite widely supported now (exceptions: Edge 12, IE11 and Opera Mini)
https://caniuse.com/#search=css%20filter
Luckily feature queries are supported by Opera Mini and all browsers that support SVG filters (https://caniuse.com/#search=feature%20queries)
Thus we can provide icon variants for free with CSS filters using PNG (uri) fallbacks.
Currently 3 icon variants require 3 base64 uris which can be quite large.
I propose we go back to 1, and use css filters to color icons accordingly
https://codepen.io/anon/pen/VdNWGy
Note: For this to work, an SVG must be added to the HTML either via JS or HTML which defines the available variant filters. The required matrixes for these filters can be derived from rgb values.
== acceptance criteria
[ ] PNGs are generated for all icons
[ ] Move all SVG background image declarations into a feature query
Sample CSS output for 1 icon and 3 variants
[ ] Add support for a progressive variant.
Icons would need to be progressive by default (blue) to support conversion to all 4 variants.
Sample CSS output for 1 icon and 4 variants.
```
.mw-ui-icon-minerva-clock:before,// progressive is default
.mw-ui-icon-minerva-clock-gray:before,:before {
background-image: url(/w/load.php?modules=mobile.startup.images.variants&image=clock&format=rasterized&lang=en&skin=minerva&version=1s9zh6w);
}
.mw-ui-icon-minerva-clock-black:before {
background-image: url(/w/load.php?modules=mobile.startup.images.variants&image=clock&variant=black&format=rasterized&lang=en&skin=minerva&version=1s9zh6w);
}
.mw-ui-icon-minerva-clock-gray:before {
background-image: url(/w/load.php?modules=mobile.startup.images.variants&image=clock&variant=gray&format=rasterized&lang=en&skin=minerva&version=1s9zh6w);
}
.mw-ui-icon-minerva-clock-invert:before {
background-image: url(/w/load.php?modules=skins.minerva.iconsmobile.startup.images.variants&image=clock&variant=invert&format=rasterized&lang=en&skin=minerva&version=1s9zh6w);
}
@supports ( filter: invert(0) ) {
.mw-ui-icon-minerva-clock-black:before,
.mw-ui-icon-minerva-clock:before,
.mw-ui-icon-minerva-clock-gray:before,
.mw-ui-icon-minerva-clock-invert:before {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222…0zm-1.037 5v4.524l3.904 2.298.66-1.1-3.192-1.877V5H10.39z%22/%3E%3C/svg%3E);
}
.mw-ui-icon-minerva-clock-gray:before {
filter: contrast(0.05);
}
.mw-ui-icon-minerva-clock-invert:before {
filter: invert(1);
}
.mw-ui-icon-minerva-clock-black:before {
filter: brightness() invert(1);
}
}
```
= Developer notes
Next steps - we should setup a code pen for one icon and test in the problematic browsers.