CSS: url() - what's better?

Question

What should I use in my CSS:

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

What says the W3C? What's really the "right solution" from the W3C?

Answer 1

Three ways are legal according to the W3C. If you have special characters in the name (as space) you should use the second or the third.

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, commas, 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

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 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 better one is the first one because you use less characters and so the resulting CSS file will be more lightweight.

Answer 5

W3 says the following about using URI data type:

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.

With regard to quotes: just be consistent throughout the CSS and you're forced to use them when the path contains spaces.