From a0d00e73c5cf485dcf522a2a191f13f0f35dbfe8 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Thu, 28 Aug 2014 16:25:04 +0200 Subject: [PATCH] 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 --- .../content.externallinks.css | 90 ++++++++++--------- 1 file changed, 50 insertions(+), 40 deletions(-) diff --git a/resources/src/mediawiki.skinning/content.externallinks.css b/resources/src/mediawiki.skinning/content.externallinks.css index b03ef3505d..d23540dae4 100755 --- 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 +} -- 2.20.1