引用 url() 的值真的有必要吗？

Question

Which of the following should I use in my stylesheets?

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

What does the W3C specify as the correct way ?

Answer 1

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 2

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.

Answer 3

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 4

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 5

Update for 2021 (most answers are from 2015 and earlier.)

Quotes are optional, however some characters (if used) will need to be escaped.

From MDN:

A URL, which is a relative or absolute address, or pointer, to the web resource to be included, or a data URI, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:

<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

If you choose to write the URL without quotes, use a backslash () before any parentheses, whitespace characters, single quotes ( ' ) and double quotes ( " ) that are part of the URL.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/url()

Answer 6

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 7

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 8

I had:

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

It took me a while to understand that the in-filename's closing parenthesis 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.