Is quoting the value of url() really necessary?

Question

Which of the following should I use in my stylesheets?

/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url(\"image.pn         


        

Answer 1

According to Google CSS Coding Style

Do not use quotation marks in URI values (url()).

Exception: If you do need to use the @charset rule, use double quotation marks—single quotation marks are not permitted.

Answer 2

The W3C says quotes are optional, all three of your ways are legal.

Opening and closing quote just need to be the same character.

If you have special characters in your URL, you should use quotes or escape the characters (see below).

Syntax and basic data types

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Escaping special characters:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

Answer 3

I had:

a.pic{
    background-image: url(images/img (1).jpg);
}

It took me a while to understand that the filename closed brace was breaking the rule.

So it is not mandatory but, even if quoting is not-so-well understood by older browsers, it could save you some headache in fairly complex dynamically generated pages.

Answer 4

Here is what the W3 CSS 2.1 specification says:

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Source: http://www.w3.org/TR/CSS21/syndata.html#uri

So all of the 3 examples you proposed are correct, but the one that I would choose is the first one because you use less characters and hence the resulting CSS file will be smaller, resulting in less bandwidth usage.

This might feel like that is not important, but high traffic websites prefer to save bandwidth and over lots of css files, and url references in them it make sense to choose the option that make the file smaller... Even because there is no advantage in not doing so.

Note: you might have to escape characters if urls contain parentheses, commas, white space characters, single quotes or double quotes. This might make the url longer than just using quotes (which need less escaping). Hence you might want to serve a Css file with urls with no quotes only when the overhead of escaping does not make the url longer than just using quotes (which is very rare).

However I would not expect any human being to even consider these edge cases... A Css optimizer would handle this for you... (but sure you need to know about all of this if you are actually writing a css optimizer :P)

Answer 5

Example 2 or 3 are best:

From W3C: The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Note from the same explanation, Example 1 is acceptable, if appropriate characters are escaped.

Answer 6

Better use quotes because it's recommended by the newest standard and there're fewer edge cases.

According to the newest Editor's Draft of CSS Values and Modules Level 3 (18 December 2015)

A URL is a pointer to a resource and is a functional notation denoted by <url>. The syntax of a <url> is:
<url> = url( <string> <url-modifier>* )

The unquoted version is only supported for legacy reasons and needs special parsing rules (for escape sequences, etc.), thus being cumbersome and not supporting url-modifiers.

That means, the url(...) syntax is supposed to be a functional notation, which takes a string and a url-modifier as parameters. Use the quote notation (which produces a string token) would be more standard-compliant and introduce less complexity.

@SimonMourier's comment in the top answer is wrong, because he looked for the wrong spec. The url-token type is only introduced for the legacy special parsing rules, so that's why it does not have anything to do with quotes.