From 4f961cfaa7985296acf59f4ef944db6de3e48433 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Wed, 19 Mar 2014 12:34:27 +0100 Subject: [PATCH] shared.css: Canonicalize and simplify background image rules * Use the same form as in the LESS mixin: * Don't embed the PNG version * Do embed the SVG version * Use the -webkit- form too * Add a descriptive comment * Don't use quotes inside url() syntax Change-Id: I044a04a321f0dbba7687c2ce1681028ed5cf0ea4 --- skins/common/shared.css | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/skins/common/shared.css b/skins/common/shared.css index 1657d97817..942cbac421 100644 --- a/skins/common/shared.css +++ b/skins/common/shared.css @@ -221,15 +221,15 @@ td.mw-label { } .mw-icon-question { - /* @embed */ - background: url('images/question-small.png') no-repeat; /* SVG support using a transparent gradient to guarantee cross-browser - * compatibility (browsers able to understand gradient syntax support also SVG) - * lifted from #pt-login css rule in skins/vector/screen.css */ + * compatibility (browsers able to understand gradient syntax support also SVG). + * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */ + background-image: url(images/question-small.png); /* @embed */ - background: -webkit-linear-gradient(transparent, transparent), url('images/question.svg') no-repeat; + background-image: -webkit-linear-gradient(transparent, transparent), url(images/question.svg); /* @embed */ - background: linear-gradient(transparent, transparent), url('images/question.svg') no-repeat; + background-image: linear-gradient(transparent, transparent), url(images/question.svg); + background-repeat: no-repeat; background-size: 13px 13px; display: inline-block; height: 13px; @@ -484,8 +484,13 @@ a.new { /* feed links */ a.feedlink { - /* @embed */ + /* 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 */ background-image: url(images/feed-icon.png); + /* @embed */ + background-image: -webkit-linear-gradient(transparent, transparent), url(images/feed-icon.svg); + /* @embed */ background-image: linear-gradient(transparent, transparent), url(images/feed-icon.svg); background-position: center left; background-repeat: no-repeat; @@ -1046,7 +1051,7 @@ ol:lang(or) li { margin-bottom: -8px; padding: 0 0 0 15px; /* @embed */ - background-image: url('images/help-question.gif'); + background-image: url(images/help-question.gif); background-position: left center; background-repeat: no-repeat; cursor: pointer; @@ -1056,7 +1061,7 @@ ol:lang(or) li { } .mw-help-field-hint:hover { /* @embed */ - background-image: url('images/help-question-hover.gif'); + background-image: url(images/help-question-hover.gif); } .mw-help-field-data { display: block; -- 2.20.1