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

Question

我应该在我的样式表中使用以下哪一项？

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

W3C 指定的正确方法是什么？

Answer 1

W3C 说引号是可选的，所有三种方式都是合法的。

开始和结束引号只需要是相同的字符。

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

语法和基本数据类型

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

转义特殊字符：

出现在不带引号的 URI 中的某些字符，例如括号、空格字符、单引号 (') 和双引号 (")，必须使用反斜杠进行转义，以便生成的 URI 值是 URI 标记：'\(', '\)'。

Answer 2

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

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

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

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

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

@SimonMourier 在最佳答案中的评论是错误的，因为他查找了错误的规范。 url-token类型只为遗留的特殊解析规则引入，所以它与引号没有任何关系。

Answer 3

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

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

来源： http ://www.w3.org/TR/CSS21/syndata.html#uri

因此，您提出的所有 3 个示例都是正确的，但我会选择第一个示例，因为您使用的字符更少，因此生成的 CSS 文件会更小，从而减少带宽使用。

这可能感觉不重要，但是高流量网站更喜欢节省带宽和大量 css 文件，并且其中的 url 引用选择使文件更小的选项是有意义的......即使没有优势在不这样做。

注意：如果 url 包含括号、逗号、空格字符、单引号或双引号，您可能需要转义字符。 这可能会使 url 比仅使用引号（需要更少的转义）更长。 因此，只有在转义开销不会使 url 比仅使用引号（这非常罕见）时，您可能希望使用不带引号的 url 提供 Css 文件。

但是我不希望任何人甚至考虑这些边缘情况......一个Css优化器会为你处理这个......（但如果你真的在写一个css优化器，你肯定需要知道所有这些：P）

Answer 4

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

Answer 5

2021 年更新（大多数答案来自 2015 年及更早的时间。）

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

来自 MDN：

URL，它是要包含的 Web 资源的相对或绝对地址或指针，或数据 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()

Answer 6

示例 2 或 3 是最好的：

来自 W3C： URI 值的格式是 'url(' 后跟可选的空格，后跟可选的单引号 (') 或双引号 (") 字符，后跟 URI 本身，后跟可选的单引号 (')或双引号 (") 字符后跟可选的空格，后跟 ')'。 两个引号字符必须相同。

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

Answer 7

根据谷歌 CSS 编码风格

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

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

Answer 8

我有：

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

我花了一段时间才明白，文件名的右括号违反了规则。

所以它不是强制性的，但是，即使旧浏览器不那么理解引用，它也可以在相当复杂的动态生成页面中为您省去一些麻烦。