Last modified: 2014-01-30 08:54:09 UTC
The file resources/images/cog-sprite.png in resources/css/ext.uls.css get embedded in line 12 but not in the lines 13 to 15: https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FUniversalLanguageSelector.git/8dc2816c779739610c00be7419da2888fa5a134c/resources%2Fcss%2Fext.uls.css#L10 10 #p-lang .uls-settings-trigger { 11 /* @embed */ 12 background: transparent url('../images/cog-sprite.png') right top no-repeat; 13 background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); 14 background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); 15 background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
I think this is per http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique. Would doing it differently result in the same, and is the invisible gradient technique documented incorrectly?
Embedding both png and svg version does increase the size of css somewhat. Embedding the same svg three times does not take significantly more space than just doing it once due to compression of the delivered css files.. The -moz-linear-gradient could also be dropped because it doesn't bring much benefit.
With the invisible gradient technique you make sure that all users are provided either the PNG and the SVG version of the image. * Adding browser-specific prefixes allows you to provide the SVG version to more browsers, at the cost of some redundancy at the SVG (e.g, to deliver the SVG to Safari and android browser instead of the PNG version). Not adding browser-specific prefixes is also fine because (a) at some point new versions will support the standard gradient syntax and then SVGs will be served to those, and (b) the CSS code becomes simpler. * Adding "embedded" allows to avoid extra requests for images but it increases the size of the CSS. Since we are providing alternative versions of an image, by embedding both versions we force browsers to download resources they are not going to use. If I had to choose, I would only embed the SVG and not the PNG, so modern browsers are not penalised because of old browsers. However, when Niklas made the numbers the differences in size were not meaningful.
