Add support for svg in .list-style-image

[lhc/web/wiklou.git] / resources / src / mediawiki.less / mediawiki.mixins.less

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index b65a62b..7963533 100644 (file)
--- 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,30 +61,45 @@
        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) {
-       -webkit-transition: @value;
-       -moz-transition: @value;
-       -o-transition: @value;
-       transition: @value;
+       -webkit-transition: @value; // Safari 3.1-6.0, iOS 3.2-6.1, Android 2.1-4.3
+       -moz-transition: @value; // Firefox 4-15
+       -o-transition: @value; // Opera 10.5-12.0
+       transition: @value; // Chrome 26+, Firefox 16+, IE 10+, Safari 6.1+, Opera 12.1+, iOS 7+, Android 4.4+
 }
 
 .box-sizing(@value) {
-       -webkit-box-sizing: @value;
-       -moz-box-sizing: @value;
-       box-sizing: @value;
+       -webkit-box-sizing: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
+       -moz-box-sizing: @value; // Firefox 4-28,
+       box-sizing: @value; // Chrome 10+, Firefox 29+, IE 8+, Safari 5.1+, Opera 10+, iOS 5+, Android 4+
 }
 
 .box-shadow(@value) {
-       -webkit-box-shadow: @value; // Android 2.3+, iOS 4.0.2-4.2, Safari 3-4
-       box-shadow: @value; // Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+
+       -webkit-box-shadow: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
+       box-shadow: @value; // Chrome 10+, Firefox 4+, IE 9+, Safari 5.1+, Opera 11+, iOS 5+, Android 4+
 }