253

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?

1

8 Answers 8

263

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: '\(', '\)'.

8
  • 10
    Some older browsers may have issues with quoted urls namely IE Mac.
    – mveerman
    Commented Jun 29, 2010 at 17:31
  • 5
    As an addition to what bic72 said, some older browsers also make dual requests when confronted with quoted URLs in CSS, first they request "myfile.png" then myfile.png - hence the reason I avoid using them.
    – Pebbl
    Commented Jun 29, 2012 at 14:49
  • FWIW the spec you link to seems to have been rewritten since you posted the second quote. Now commas don't seem to require escaping.
    – Ben
    Commented Jan 11, 2013 at 19:59
  • @pebbl -- You're right, and older browsers include the newest version of Chrome on mac. Commented Aug 27, 2013 at 21:30
  • 7
    CSS 3 latest Editor's draft (may 2015) does not seem to allow quotes any more: dev.w3.org/csswg/css-syntax (check the url-token railroad schema) while current candidate recommendation (feb 2014) does: w3.org/TR/css-syntax-3 I suppose they want to promote usage of escape sequence instead of quotes Commented Jul 16, 2015 at 9:02
40

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.

5
  • "The unquoted version is only supported for legacy reasons [..]" Source?
    – Semmel
    Commented Feb 22, 2017 at 14:25
  • 8
    drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Note: The special parsing rules for the legacy quotation-mark–less <url> syntax means that…" Commented Feb 22, 2017 at 17:55
  • I read it but must have missed this part - thanks! Either way - very valuable advice. Imho this should be the accepted answer!
    – Semmel
    Commented Feb 22, 2017 at 18:30
  • The 2020 version of the referenced document doesn't seem to mention 'unquoted version is only supported for legacy reasons' anymore. Commented Jun 2, 2020 at 9:29
  • 1
    @Jahmic The current language in CSS Values and Units Module Level 4 is “For legacy reasons, a ‘url()’ can be written without quotation marks around the URL itself”. Commented Oct 21, 2021 at 3:51
11

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)

6
  • 5
    Don't know why this got down-voted; for a high traffic site, ideas like this makes a big difference over the course of a year. Commented Nov 10, 2011 at 21:35
  • 8
    ↑ I really doubt that. How many urls are there per css? Not too much. And you just spared TWO bytes (in ascii or utf-8) in each. Plus, you could actually make the url longer, because you might need to use backslashes. There are much better ways to reduce web's size...
    – kralyk
    Commented Apr 18, 2012 at 13:23
  • 1
    Obviously it's not much of a saving, but Andrea and Joisey are still correct. As an extreme example, Google only needs to remove one byte from their homepage to save quite a bit of bandwidth ;)
    – Pebbl
    Commented Jun 29, 2012 at 14:45
  • 2
    @kralyk... Hence the best thing to do is to not use quotes when not needed... So it's better to use quotes when you have a url with more than two parentheses, commas, white space characters, single quotes or double quotes. Which however I never encountered in a Css file... And I'm pretty sure I never will :) (updated the answer) Commented Jun 30, 2012 at 21:23
  • 20
    Programmers who concern themselves with the optimization of individual characters from their source codes, are missing the boat entirely -- they'll hardly ever optimize anything at all. Anyways, I always use double-quotes. I'm a man of consistency. Commented Aug 16, 2013 at 22:59
8

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.

4

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()

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.

2

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.

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.

1
  • 2
    @DávidHorváth: I'm not saying you're wrong, but what bad conventions do you mean?
    – Sam Dutton
    Commented Nov 1, 2016 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.