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 data 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 ~~
Update: CodePen with an OOUI derived, progressive, frameless button and a normal one with CSS filter and same icon:
https://codepen.io/Volker_E/pen/pxPRLM?editors=1100
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
[ ] 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.
```lang=css
// progressive is default
.mw-ui-icon-minerva-clock: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=mobile.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 {
// must be a progressive icon
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:before {
filter: brightness(0);
}
.mw-ui-icon-minerva-clock-gray:before {
filter: contrast(0.05);
}
.mw-ui-icon-minerva-clock-invert:before {
filter: invert(1);
}
}
```
= Developer notes
Next steps - we should setup a code pen for one icon and test in the problematic browsers.
A patch was written: https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/463380/
but it wasn't clear what we should do for older browsers.