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

Question

在我的样式表中，下面哪个应该使用？

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

W3C规定的正确方式是什么？

- Poru

---

可能是CSS background-image - What is the correct usage?的重复问题。 - Robert MacLean

Answer 1

W3C表示引号是可选的，您三种方式都是合法的。

开头和结尾的引号只需要是相同的字符。

如果您的URL中有特殊字符，您应该使用引号或转义字符（见下文）。

语法和基本数据类型

URI值的格式为'url（'，后面跟随可选的空格，后面跟随一个可选的单引号（‘）或双引号（“）字符，然后是URI本身，最后跟随可选的单引号（‘）或双引号（“）字符，后面跟随可选的空格，最后是')'. 两个引号字符必须相同。

转义特殊字符:

一些出现在未引用URI中的字符（比如括号、空格字符、单引号（'）和双引号（“））必须使用反斜杠进行转义，以便生成的URI值成为URI标记：'\（'，'\）'。

- Pekka

---

一些旧的浏览器可能存在引用 URL 的问题，尤其是 IE Mac。 - mveerman

作为对bic72所说的内容的补充，一些旧版本的浏览器在处理CSS中包含引号的URL时会发出两次请求，首先是"myfile.png"，然后是myfile.png - 这就是我避免使用它们的原因。 - Pebbl

@pebbl -- 你说得对，旧版浏览器 包括 Mac 上的最新版本 Chrome。 - Daniel Beardsley

如前所述，如果您的文件名中有空格，则需要使用引号。 - James John McGuire 'Jahmic'

CSS 3最新的编辑草案（2015年5月）似乎不再允许使用引号：http://dev.w3.org/csswg/css-syntax/（检查`url-token`铁路图式），而当前的候选推荐（2014年2月）则允许使用引号：http://www.w3.org/TR/css-syntax-3/。我想他们希望促进转义序列的使用，而不是引号。 - Simon Mourier

Answer 2

最好使用引号，因为它是最新标准推荐的，并且有较少的边缘情况。

根据CSS Values and Modules Level 3 (2015年12月18日)的最新编辑草案

URL是指向资源的指针，是由<url>表示的函数符号。 <url>的语法是：
<url> = url( <string> <url-modifier>* )

非引号版本仅出于遗留原因而被支持，并需要特殊的解析规则（用于转义序列等），因此很繁琐且不支持url-modifiers。

这意味着，url(...)语法应该是一个函数符号，它以字符串和url-modifier作为参数。 使用引号符号（产生字符串标记）将更符合标准，并引入更少的复杂性。

@SimonMourier在顶部答案中的评论是错误的，因为他查找了错误的规范。 url-token类型仅针对传统特殊解析规则进行介绍，因此它与引号无关。请注意保留HTML标记。

- sodatea

---

来源？“未引用版本仅出于遗留原因而受支持[..]” - Semmel

注意：对于“遗留引号省略语法”<url>的特殊解析规则意味着... - Haoqun Jiang

我读了它，但可能错过了这部分 - 谢谢！无论如何 - 非常有价值的建议。在我看来，这应该是被接受的答案！ - Semmel

参考文档的2020版本似乎不再提到“未引用版本仅出于遗留原因而受支持”。 - James John McGuire 'Jahmic'

@Jahmic 在 CSS Values and Units Module Level 4 中，当前语言是“由于遗留原因，可以在 URL 周围不加引号地编写 'url()'。” - Anders Kaseorg

Answer 3

以下是W3 CSS 2.1规范的说明：

引用（URI）值的格式为'url('，后跟可选的空格，后跟可选的单引号（'）或双引号（"）字符，后跟URL本身，后跟可选的单引号（'）或双引号（"）字符，后跟可选的空格，最后跟')'. 两个引号字符必须相同。

来源：http://www.w3.org/TR/CSS21/syndata.html#uri 所以您提出的所有3个例子都是正确的，但我会选择第一个，因为您使用的字符更少，因此生成的CSS文件将更小，从而减少带宽使用量。

这可能感觉不重要，但高流量的网站更喜欢节省带宽和多个CSS文件中的url引用，选择使文件更小的选项是有意义的...甚至因为没有不这样做的优势。

注意：如果URL包含括号、逗号、空格字符、单引号或双引号，则可能需要转义字符。这可能会使URL比仅使用引号更长。因此，当转义开销不会使URL变得比仅使用引号更长时，您可能想要仅提供具有无引号URL的Css文件（这非常罕见）。

然而，我不指望任何人考虑这些边缘情况...一个CSS优化器会为您处理这个问题...(但是如果您真的在编写CSS优化器，当然需要了解所有这些:P)

- Andrea Zilio

---

不知道为什么这个被踩了；对于一个高流量的网站来说，像这样的想法在一年的时间内可以产生很大的影响。 - ThisGuyKnowsCode

我很怀疑这个。每个CSS文件中有多少个URL？不多。而你只是在每个URL中节省了两个字节（无论是ASCII还是UTF-8）。此外，你实际上可以将URL变得更长，因为你可能需要使用反斜杠。还有更好的方法来减小网页的大小... - kralyk

显然这不是什么大的节省，但Andrea和Joisey仍然是正确的。作为一个极端的例子，谷歌只需要从他们的主页中删除一个字节就可以节省相当多的带宽;) - Pebbl

@kralyk... 因此，最好的做法是在不需要引号时不使用引号...因此，当您有一个包含两个以上括号、逗号、空格字符、单引号或双引号的 URL 时，最好使用引号。然而，在 Css 文件中我从未遇到过这种情况...而且我很确定我永远也不会 :)（已更新答案） - Andrea Zilio

只关注源代码中单个字符的程序员完全错过了优化的实质，他们几乎永远不会真正进行优化。无论如何，我总是使用双引号。我是一个始终如一的人。 - ChaseMoskal

我的看法是：我认为去除空格和引号不应该由程序员完成，而应该由某个CSS最小化工具在部署之前完成。 - MC Emperor

Answer 4

根据W3C的规定，有三种合法的方式。如果名称中有特殊字符（如空格），则应使用第二种或第三种方式。

- Yaakov Shoham

Answer 5

2021年更新（大多数答案来自2015年及以前。）

引号是可选的，但某些字符（如果使用）需要转义。

来自MDN：

URL是一个相对或绝对地址，或指向要包含的网络资源或数据URI的指针，可以使用单引号或双引号。如果URL包含括号、空格或引号等这些字符，则需要使用引号，除非这些字符已经被转义，或者如果地址包含0x7e以上的控制字符。双引号不能出现在双引号内，单引号不能出现在单引号内，除非它们被转义过。以下所有内容都是有效且等效的：

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

如果您选择不使用引号编写URL，请在URL中任何括号、空白字符、单引号 (') 和双引号 (") 前使用反斜杠 (\)。

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

- KevinHJ

Answer 6

2或3的示例最佳：

来自W3C： URI值的格式为“url（”后跟可选的空格，后跟一个可选的单引号（'）或双引号（"）字符，后跟URI本身，后跟一个可选的单引号（'）或双引号（"）字符，后跟可选的空格和')。两个引号字符必须相同。

从相同的解释中注意到，如果转义适当的字符，则可以接受示例1。

- Nick Craver

Answer 7

我有：

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

花了我一段时间才明白文件名中的右括号破坏了规则。

所以这并非强制要求，但即使老旧浏览器对引用不太理解，使用引用也可以在相当复杂的动态生成页面中避免一些麻烦。

- Niki Romagnoli

Answer 8

根据Google CSS编码风格：

在URI值（url()）中不要使用引号。

例外情况：如果您确实需要使用@charset规则，则使用双引号——不允许使用单引号。

- Jameson

---

@DávidHorváth：我不是说你错了，但你指的是哪些不好的惯例？ - Sam Dutton