CSS 真的有必要引用 url() 的值吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2168855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is quoting the value of url() really necessary?
提问by Poru
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?
W3C 指定的正确方法是什么？
回答by Pekka
The W3C says quotes are optional, all three of your ways are legal.
W3C 说引号是可选的，您的所有三种方式都是合法的。
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).
如果 URL 中有特殊字符，则应使用引号或对字符进行转义（见下文）。
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.
URI 值的格式是 'url(' 后跟可选的空格，后跟可选的单引号 (') 或双引号 (") 字符，后跟 URI 本身，后跟可选的单引号 (') 或双引号(") 字符后跟可选的空格，后跟 ')'。两个引号字符必须相同。
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: '\(', '\)'.
出现在未加引号的 URI 中的某些字符，例如括号、空格字符、单引号 (') 和双引号 (")，必须使用反斜杠进行转义，以便生成的 URI 值是一个 URI 标记：'\(', '\)'。
回答by sodatea
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)
根据CSS Values and Modules Level 3的最新编辑草案（2015 年 12 月 18 日）
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>* )
URL 是指向资源的指针，是用 表示的功能符号
<url>。a 的语法<url>是：<url> = url( <string> <url-modifier>* )
The unquoted version is only supported for legacy reasonsand needs special parsing rules (for escape sequences, etc.), thus being cumbersome and not supporting url-modifiers.
未加引号的版本仅出于遗留原因支持，并且需要特殊的解析规则（用于转义序列等），因此很麻烦且不支持 url 修饰符。
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.
这意味着，url(...)语法应该是一个函数符号，它接受一个字符串和一个 url 修饰符作为参数。使用引号表示法（产生字符串标记）将更符合标准并引入更少的复杂性。
@SimonMourier's comment in the top answer is wrong, because he looked for the wrong spec. The url-tokentype is only introduced for the legacy special parsing rules, so that's why it does not have anything to do with quotes.
@SimonMourier 在最佳答案中的评论是错误的，因为他寻找了错误的规范。该url-token类型仅针对遗留的特殊解析规则引入，因此它与引号没有任何关系。
回答by Andrea Zilio
Here is what the W3 CSS 2.1 specification says:
这是 W3 CSS 2.1 规范所说的：
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.
URI 值的格式是 'url(' 后跟可选的空格，后跟可选的单引号 (') 或双引号 (") 字符，后跟 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.
因此，您提出的所有 3 个示例都是正确的，但我会选择第一个示例，因为您使用的字符较少，因此生成的 CSS 文件会更小，从而减少带宽使用。
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.
这可能感觉不重要，但高流量网站更喜欢节省带宽和大量 css 文件，并且其中的 url 引用选择使文件更小的选项是有意义的......即使因为没有优势在不这样做。
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).
注意：如果 url 包含括号、逗号、空格字符、单引号或双引号，您可能需要转义字符。这可能会使 url 比仅使用引号更长（需要更少的转义）。因此，您可能希望仅在转义的开销不会使 url 比仅使用引号（这非常罕见）更长时才使用不带引号的 url 提供 Css 文件。
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)
然而，我不希望任何人甚至考虑这些边缘情况......一个 Css 优化器会为你处理这个......（但如果你真的在写一个 css 优化器，你肯定需要了解所有这些：P）
回答by Y. Shoham
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.
根据 W3C，三种方式是合法的。如果名称中有特殊字符（如空格），则应使用第二个或第三个。
回答by Nick Craver
Example 2 or 3 are best:
示例 2 或 3 最好：
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.
来自 W3C：URI 值的格式是 'url(' 后跟可选的空格，后跟可选的单引号 (') 或双引号 (") 字符，后跟 URI 本身，后跟可选的单引号 (')或双引号 (") 字符后跟可选的空格，后跟 ')'。两个引号字符必须相同。
Note from the same explanation, Example 1 is acceptable, if appropriate characters are escaped.
从相同的解释中注意，如果适当的字符被转义，示例 1 是可以接受的。
回答by TechNyquist
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.
所以它不是强制性的，但是，即使旧浏览器不太理解引用，它也可以为您在相当复杂的动态生成页面中省去一些麻烦。
回答by Junhao
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.
不要在 URI 值 (url()) 中使用引号。
例外：如果确实需要使用@charset 规则，请使用双引号——不允许使用单引号。
