From 502fffe3bf2cb6a8fccb8059436a038e21153596 Mon Sep 17 00:00:00 2001 From: paladox Date: Thu, 4 Sep 2014 22:13:53 +0200 Subject: [PATCH] Add support for svg in .list-style-image * You can now use .list-style-image-svg for support for svg. * Please see I5196952088e584d3121600e9e829647e8c195bbb for it being used on vector. Note: This has been tested by me. Change-Id: Iffff2bc52e1572e661930242ad15937bc83abace --- .../src/mediawiki.less/mediawiki.mixins.less | 38 ++++++++++++++++--- 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less index 8c288840db..7963533272 100644 --- a/resources/src/mediawiki.less/mediawiki.mixins.less +++ b/resources/src/mediawiki.less/mediawiki.mixins.less @@ -19,6 +19,17 @@ background-image: url(@url); } +/* Caution: Does not support localisable images */ + +.list-style-image(@url) when (embeddable(@url)) { + list-style-image: embed(@url); + list-style-image: url(@url)!ie; +} + +.list-style-image(@url) when not (embeddable(@url)) { + list-style-image: url(@url); +} + .vertical-gradient(@startColor: gray, @endColor: white, @startPos: 0, @endPos: 100%) { background-color: @endColor; background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+ @@ -50,14 +61,29 @@ background-image: linear-gradient(transparent, transparent), url(@svg); } -/* Caution: Does not support localisable images */ -.list-style-image(@url) when (embeddable(@url)) { - list-style-image: embed(@url); - list-style-image: url(@url)!ie; +/* + * Caution: Does not support localisable images + * + * SVG support using a transparent gradient to guarantee cross-browser + * compatibility (browsers able to understand gradient syntax support also SVG). + * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique + * + * We use gzip compression, which means that it is okay to embed twice. + * + * We do not embed the fallback image on the assumption that the gain for old browsers + * is not worth the harm done to modern ones. + */ +.list-style-image-svg(@svg, @fallback) when (embeddable(@svg)) { + list-style-image: url(@fallback); + /* We don't need the !ie hack because this old IE uses the fallback already */ + list-style-image: -webkit-linear-gradient(transparent, transparent), embed(@svg); + list-style-image: linear-gradient(transparent, transparent), embed(@svg); } -.list-style-image(@url) when not (embeddable(@url)) { - list-style-image: url(@url); +.list-style-image-svg(@svg, @fallback) when not (embeddable(@svg)) { + list-style-image: url(@fallback); + list-style-image: -webkit-linear-gradient(transparent, transparent), url(@svg); + list-style-image: linear-gradient(transparent, transparent), url(@svg); } .transition(@value) { -- 2.20.1