This is relatively easy to do, but it breaks Vector in IE6-9 even more where Vector uses the mixin to generate the background gradient. (Bug 60991)
Version: 1.23.0
Severity: enhancement
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=60991
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | Feature | None | T53912 Make Wikipedia distinct by styling of a prominent UI feature differently than the default | ||
| Resolved | Jdlrobson | T62317 Implement reasonably usable skin modification user interface in MediaWiki core | |||
| Resolved | Volker_E | T63099 Vector: Remove use of raster graphics in the layout styles | |||
| Declined | None | T63010 Add IE7-9 support to .vertical-gradient mixin | |||
| Invalid | None | T63008 ResourceLoader should make it possible to automatically expand #fff-style colours to #ffffff-style |
This (luckily, because implementing this looks like it won't be very pleasant) doesn't block nor depend on bug 60991, but it's related.
Also setting the severity to 'enhancement' unless someone can convince me we really unconditionally need this. :)
This is simple to add, and should be unless/until we truly are dropping support for IE6-9. But for now at least 9 is on the A list for compatibility.
This does depend on bug 60991, since without bug 60991 being fixed, Vector exploded in these browsers with this added. Fortunately Edokter seems to have done just that and fixed bug 60991, so Vector should now no longer explode with this is added.
It's progressive enhancement though, a plain fallback color should be acceptable.
But, if we can implement it relatively cheaply, I don't see why we wouldn't (as long as it doesn't inflate the stylesheet size significantly, and doesn't introduce technology that then requires a lot of maintenance).
Using filter: progid:DXImageTransform.Microsoft.gradient( .. ); /* IE6-9 */ we can probably do it. Need to make sure to expand color hex, and restrict or normalise values for the mixin to the lowest common denominator in terms of features (number of stops, direction, color syntax etc.)
Note that IE's share has been diminishing quite a lot for Wikimedia's traffic, and even within IE, IE10 is rising steadily.
Top 9:
Chrome 31.0 5,855 M 25.23%
Mozilla 5.0 1,375 M 5.93%
Firefox 25.0 1,400 M 6.03%
Safari 0.0 1,168 M 5.03%
MSIE 10.0 798 M 3.44%
MSIE 8.0 869 M 3.75%
Firefox 26.0 587 M 2.53%
MSIE 9.0 606 M 2.61%
MSIE 7.0 281 M 1.21%
I don't trust these much though, I think the user agent parser has become more unreliable over past year.
[1] http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm
Change 112066 had a related patch set uploaded by Isarra:
(bug 61010) Add IE support to vertical-gradient mixin.
I have to advice against using the IE filter; it produces some nasty side effect and does not support stops, so it will basically never be compatible with mixin.
Bug 60991 deals with a specific core Vector issue, so it is not related to general IE6-9 support. That bug now has a custom fallback related to that issue only.
In other situations, a solid background color fallback (already built in) is ususally sufficient, and a png fallback is always an option in CSS calling on mixin. So all in all, i don't really feel the need to add support.
Yeah, 60991 is a good example of something to do when things go wrong. But things won't always go wrong, and we won't know if they go wrong until after we try it, and if it's not in the mixin it's a lot harder to try. The default should be the base case - if the base case fails, that's when you add a workaround: an image or a solid colour or something else as the situation dictates.
Suggest WONTFIX, see my comment in bug 61099#c3.
(BTW. Oops for the see also mistake.)
Found more issues with the filter when working on the tabs in bug 61099.
The Vector tabs are constructed using background images only. One of them is the tab-break, which is 1px wide. This is easy to simulate with linear gradients using the background-size CSS property. The MS filter does not respect that however.
If the filter is included, the tab-break will always flood the entire tab, giving it the wrong color. Also, the filter does not accept 'transarent', which is essential for rendering the tab-break using linear-gradient.
In short: including the filter makes it impossible to render the tabs in IE.
The filters may not work for Vector, but Vector is a single skin, and can easily override and not use them if that is the case. Just because the filter does not work in one skin, and one that is not representative of normal gradient use, at that, does not mean the functionality should be blocked for all - this is, after all, a GLOBAL mixin.
A glogal mixin isn't much good if it keeps blowing up in IE; you're better off without it. Two things need to be done to make the filter behave:
That leaves only the stops, but that is minor. But the current patch is inadequate.
Change 112066 abandoned by Isarra:
(bug 61010) Add IE support to vertical-gradient mixin.
Reason:
Nobody cares about IE. Give it shinies and it just tries to melt its own face off.
IE 6 is end of life on all desktop browsers, and this is a classic progressive enhancement case.
Applying the MS filter has been proven to be agressively regressive, simply due to incompaticle parameter requirements. Unless that can be fixed within LESS, I don't see a solution.