W3C home > Mailing lists > Public > www-style@w3.org > June 2013

Re: Treat background-image: url("") as background-image: none; in CSS proposal.

From: Simon Pieters <simonp@opera.com>
Date: Mon, 24 Jun 2013 10:35:38 +0200
Message-ID: <51C804DA.4080302@opera.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Bjoern Hoehrmann <derhoermi@gmx.net>, Daniel Glazman <daniel.glazman@disruptive-innovations.com>, www-style list <www-style@w3.org>
On 6/21/13 6:28 PM, Tab Atkins Jr. wrote:
>> Since text/css resources
>> are not images, there is no background image that could be rendered. If
>> the declaration is in a HTML or SVG document, you would have a cyclic
>> dependency (the document has to be rendered to render its background),
>> and if CSS does not define how to break the cycle, there is nothing to
>> render either. See <http://tools.ietf.org/html/rfc3986#section-4.4>.
> CSS doesn't allow you to render HTML documents as images, but the SVG
> case is definitely interesting.
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 
-1 2 2"><style>svg { background:url("") } </style><circle r="1"/></svg>

It seems like WebKit/Blink supports it but Presto/Gecko don't. Dunno 
about IE10, it didn't want to load my data: URL.

On 6/21/13 9:43 AM, Tab Atkins Jr. wrote:
> I'm not sure the HTML precedent really extends to CSS well.  In HTML
> it's much easier to accidentally leave an empty href or src attribute
> around, particularly with badly-written templating languages.  The
> same sort of thing doesn't really apply to CSS.
Let's see. http://webdevdata.org/ data-June13

$ grep -rEioh --exclude=\.hdr\.txt$ 
"background(-image)?\s*:\s*(#?[a-z0-9]+\s+)?url\((\"\"|'')\)" . | wc -l

Let's have a closer look at the first few matches.

background:#ffffff url('')    ;
{background:#ffffff url('')    ;}
                 background:#ccc8bc url('')    ;
{background:#ffffff url('')    ;}
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: #horiz_m_bg 
{background-color:#ffffff; background-image:url(''); background-repeat:; 
url("") repeat center top;
.widget-content {background: url("") repeat-x top left;margin: 0;}
.widget-content {background: url("") repeat-x top left;margin: 0;}
{background: url("") no-repeat scroll 0 0 transparent;padding-left: 20px;}
url("") no-repeat scroll left top transparent;
href="http://viralol.com/fails/" title="7 Hilarious &#8220;Fails&#8221; 
src="http://viralol.com/wp-content/uploads/2013/03/ouch_oven-150x150.jpg" alt="7 
Hilarious &#8220;Fails&#8221; Photos" class="Thumbnail thumbnail " 
width="220" height="250" /></a><div style="background: url('') 

I opened some of these URLs. They don't use content negotiation to serve 
an image. They just don't want an image there and think saying url("") 
means no image. I would expect this to be the case for basically all 
instances in the data.

So my conclusion here is the same as for <img src>: it is better for 
browsers to not fetch anything for the empty reference since fetching it 
will only have the result of making the page load slower.

I support the original suggestion to change the spec to not fetch images 
in CSS declared with the empty URL reference.

Simon Pieters
Opera Software
Received on Monday, 24 June 2013 08:34:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:31 UTC