https://bugzilla.wikimedia.org/show_bug.cgi?id=35336

--- Comment #3 from Pau Giner <[email protected]> ---
My proposed technique is slightly different than the one proposed in the
patchset. This one is based in the fact that all the browsers that support CSS
gradients[1] support also SVG[2].

So this is really cross-browser safe: 
background: transparent url(fallback-image.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent),
url(vector-image.svg);

With the above rule, only the following browsers will consider the SVG version:
IE 10, Firefox 16+, Chrome 26, Opera 12+, Opera Mobile 12.1, Firefox fr android
18.0. All of them supporting SVG.

You can even add -webkit prefix version (only with the new syntax) for the
gradients and you still be safe with a wider browser support: Crome 10+, iOs
safari 5.0+, Android browser 4.0+, and Blackberry browser 10.0

We tested this with crossbrowsertesting.com and used this technique for the
graphics on the language selector at http://translatewiki.net/ without
problems.


[1] http://caniuse.com/css-gradients
[2] http://caniuse.com/svg

-- 
You are receiving this mail because:
You are the assignee for the bug.
You are watching all bug changes.
_______________________________________________
Wikibugs-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikibugs-l

Reply via email to