Revert "Add support for svg in .list-style-image"
authorBartosz Dziewoński <matma.rex@gmail.com>
Sat, 13 Sep 2014 13:11:08 +0000 (13:11 +0000)
committerBartosz Dziewoński <matma.rex@gmail.com>
Sat, 13 Sep 2014 13:11:08 +0000 (13:11 +0000)
The generated CSS is invalid, as you can't have multiple
list-style-images (unlike background-images). Browsers
either ignore the invalid properties with linear-gradient
and use non-embedded PNG fallback (Chrome, Firefox, modern
IE), or accept the properties but ignore everything after
the comma, using the fully transparent gradient (Opera).

This reverts commit 502fffe3bf2cb6a8fccb8059436a038e21153596.

Change-Id: I87f8142b5e718f96ca8ee74578224b4db7dedce9

resources/src/mediawiki.less/mediawiki.mixins.less

index 7963533..8c28884 100644 (file)
        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+
        background-image: linear-gradient(transparent, transparent), url(@svg);
 }
 
-/*
- * 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);
+/* 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-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);
+.list-style-image(@url) when not (embeddable(@url)) {
+       list-style-image: url(@url);
 }
 
 .transition(@value) {