mediawiki.skinning.content.externallinks: Code quality tweaks

* Use the standard SVG+PNG background-image method, used throughout
  MediaWiki. The one used previously was very similar, but did not
  support Android 2.3 (neither PNG nor SVG displayed) which is
  allegedly still big on mobile devices. The current one supports
  every browser in existence, but sometimes serves PNG to browsers
  that understand SVG (e.g. IE 9).
* Add a note about why we can't just use LESS mixins for that.
* Remove incorrect code comments and tweak whitespace.

Change-Id: I2bedfd3901b35c1cc1a7b37db8f4af6bb5e4cc80

diff --git a/resources/src/mediawiki.skinning/content.externallinks.css b/resources/src/mediawiki.skinning/content.externallinks.css
index b03ef35..d23540d 100755 (executable)
--- a/resources/src/mediawiki.skinning/content.externallinks.css
+++ b/resources/src/mediawiki.skinning/content.externallinks.css
@@ -1,82 +1,92 @@
-/*
-** keep the whitespace in front of the ^=, hides rule from Konqueror
-** this is CSS3, the validator doesn't like it when validating as CSS2
-*/
+/*!
+ * Icons and colors for external links.
+ */
+
+/* Bug 66091 is blocking is from converting this file to LESS
+ * and using the .background-image-svg mixin. */
+
+/* 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 */
+
 .mw-body a.external,
 .link-https {
-       /* @embed */
        background: url(images/external-ltr.png) center right no-repeat;
-       /**
-        * Sucks to be using Android 2.3 or older.
-        * See http://css-tricks.com/svg-fallbacks/ for details.
-        */
        /* @embed */
-       background-image: url(images/external-ltr.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/external-ltr.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/external-ltr.svg);
        padding-right: 15px;
 }
 
-.mw-body a.external[href ^="mailto:"],
+.mw-body a.external[href^="mailto:"],
 .link-mailto {
-       /* @embed */
        background: url(images/mail.png) center right no-repeat;
        /* @embed */
-       background-image: url(images/mail.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/mail.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/mail.svg);
        padding-right: 15px;
 }
 
-.mw-body a.external[href ^="ftp://"],
+.mw-body a.external[href^="ftp://"],
 .link-ftp {
-       /* @embed */
        background: url(images/ftp-ltr.png) center right no-repeat;
        /* @embed */
-       background-image: url(images/ftp-ltr.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/ftp-ltr.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/ftp-ltr.svg);
        padding-right: 15px;
 }
 
-.mw-body a.external[href ^="irc://"],
-.mw-body a.external[href ^="ircs://"],
+.mw-body a.external[href^="irc://"],
+.mw-body a.external[href^="ircs://"],
 .link-irc {
-       /* @embed */
        background: url(images/chat-ltr.png) center right no-repeat;
        /* @embed */
-       background-image: url(images/chat-ltr.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/chat-ltr.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/chat-ltr.svg);
        padding-right: 15px;
 }
 
-.mw-body a.external[href $=".ogg"], .mw-body a.external[href $=".OGG"],
-.mw-body a.external[href $=".mid"], .mw-body a.external[href $=".MID"],
-.mw-body a.external[href $=".midi"], .mw-body a.external[href $=".MIDI"],
-.mw-body a.external[href $=".mp3"], .mw-body a.external[href $=".MP3"],
-.mw-body a.external[href $=".wav"], .mw-body a.external[href $=".WAV"],
-.mw-body a.external[href $=".wma"], .mw-body a.external[href $=".WMA"],
+.mw-body a.external[href$=".ogg"], .mw-body a.external[href$=".OGG"],
+.mw-body a.external[href$=".mid"], .mw-body a.external[href$=".MID"],
+.mw-body a.external[href$=".midi"], .mw-body a.external[href$=".MIDI"],
+.mw-body a.external[href$=".mp3"], .mw-body a.external[href$=".MP3"],
+.mw-body a.external[href$=".wav"], .mw-body a.external[href$=".WAV"],
+.mw-body a.external[href$=".wma"], .mw-body a.external[href$=".WMA"],
 .link-audio {
-       /* @embed */
        background: url(images/audio-ltr.png) center right no-repeat;
        /* @embed */
-       background-image: url(images/audio-ltr.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/audio-ltr.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/audio-ltr.svg);
        padding-right: 15px;
 }
 
-.mw-body a.external[href $=".ogm"], .mw-body a.external[href $=".OGM"],
-.mw-body a.external[href $=".avi"], .mw-body a.external[href $=".AVI"],
-.mw-body a.external[href $=".mpeg"], .mw-body a.external[href $=".MPEG"],
-.mw-body a.external[href $=".mpg"], .mw-body a.external[href $=".MPG"],
+.mw-body a.external[href$=".ogm"], .mw-body a.external[href$=".OGM"],
+.mw-body a.external[href$=".avi"], .mw-body a.external[href$=".AVI"],
+.mw-body a.external[href$=".mpeg"], .mw-body a.external[href$=".MPEG"],
+.mw-body a.external[href$=".mpg"], .mw-body a.external[href$=".MPG"],
 .link-video {
-       /* @embed */
        background: url(images/video.png) center right no-repeat;
        /* @embed */
-       background-image: url(images/video.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/video.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/video.svg);
        padding-right: 15px;
 }
 
-.mw-body a.external[href $=".pdf"], .mw-body a.external[href $=".PDF"],
-.mw-body a.external[href *=".pdf#"], .mw-body a.external[href *=".PDF#"],
-.mw-body a.external[href *=".pdf?"], .mw-body a.external[href *=".PDF?"],
+.mw-body a.external[href$=".pdf"], .mw-body a.external[href$=".PDF"],
+.mw-body a.external[href*=".pdf#"], .mw-body a.external[href*=".PDF#"],
+.mw-body a.external[href*=".pdf?"], .mw-body a.external[href*=".PDF?"],
 .link-document {
-       /* @embed */
        background: url(images/document-ltr.png) center right no-repeat;
        /* @embed */
-       background-image: url(images/document-ltr.svg), none;
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/document-ltr.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/document-ltr.svg);
        padding-right: 15px;
 }
 
@@ -89,4 +99,4 @@
 /* External link color */
 .mw-body a.external {
        color: #36b;
-}
\ No newline at end of file
+}