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

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
270

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

./01/dewaseo.com_0185a497910f92c960feadd416f18440.html.txt: 
background:#ffffff url('')    ;
./01/thenet.ng_01df0cb1e137fe3b5c9b27872609d184.html.txt:footer 
{background:#ffffff url('')    ;}
./06/showbizdaily.ru_06b336e5ee3d3f76e71ca9034ef9d680.html.txt: 
                 background:#ccc8bc url('')    ;
./0a/thenetng.net_0a0466f68ca06cb15dbdb4a79a59b15d.html.txt:footer 
{background:#ffffff url('')    ;}
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: 
background-image:url('');
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: #horiz_m_bg 
{background-color:#ffffff; background-image:url(''); background-repeat:; 
background-position:;}
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: 
background-image:url('');
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: 
background-image:url('');
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: 
background-image:url('');
./0b/aspkin.com_0b9adcc5056799d617f2f8927b554321.html.txt: 
background-image:url('');
./0b/falamundo.com.br_0b8e8fb6696333d641f203f5568cfd17.html.txt:background: 
url("") repeat center top;
./0b/falamundo.com.br_0b8e8fb6696333d641f203f5568cfd17.html.txt:#sidebar-wrapper 
.widget-content {background: url("") repeat-x top left;margin: 0;}
./0b/falamundo.com.br_0b8e8fb6696333d641f203f5568cfd17.html.txt:#sidebar-wrapper 
.widget-content {background: url("") repeat-x top left;margin: 0;}
./0b/falamundo.com.br_0b8e8fb6696333d641f203f5568cfd17.html.txt:.post-author 
{background: url("") no-repeat scroll 0 0 transparent;padding-left: 20px;}
./0c/tehranmusic268.com_0c76defc16f1e4e79c2dcc3f0b0f9b40.html.txt:background: 
url("") no-repeat scroll left top transparent;
./0d/viralol.com_0dc1dc85d49b1a94fc9f7d9cbf01cfb3.html.txt:<a 
href="http://viralol.com/fails/" title="7 Hilarious &#8220;Fails&#8221; 
Photos"><img 
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('') 
no-repeat;"></div>

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