我应该在样式表中使用下列哪个?

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

W3C将什么指定为正确的方式?


当前回答

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

根据最新的CSS价值和模块第3级编辑草案(2015年12月18日)

URL是一个指向资源的指针,是一个函数符号,用< URL >表示。<url>的语法是: <url> = url(<string> <url-modifier>*)

不带引号的版本仅在遗留原因下得到支持,并且需要特殊的解析规则(用于转义序列等),因此很麻烦,不支持url修饰符。

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

@SimonMourier在顶部答案中的评论是错误的,因为他寻找了错误的规范。url-token类型仅为遗留的特殊解析规则引入,所以这就是为什么它与引号没有任何关系。

其他回答

W3C说引号是可选的,你的三种方式都是合法的。

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

如果你的URL中有特殊字符,你应该使用引号或转义字符(见下文)。

语法和基本数据类型

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

转义特殊字符:

一些出现在非引号URI中的字符,如圆括号、空格字符、单引号(')和双引号("),必须用反斜杠转义,这样得到的URI值就是一个URI令牌:'\(','\)'。

根据W3C的规定,有三种方法是合法的。如果名称中有特殊字符(如空格),则应该使用第二个或第三个字符。

根据谷歌CSS编码风格

不要在URI值中使用引号(url())。 例外:如果你确实需要使用@charset规则,使用双引号-单引号是不允许的。

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

根据最新的CSS价值和模块第3级编辑草案(2015年12月18日)

URL是一个指向资源的指针,是一个函数符号,用< URL >表示。<url>的语法是: <url> = url(<string> <url-modifier>*)

不带引号的版本仅在遗留原因下得到支持,并且需要特殊的解析规则(用于转义序列等),因此很麻烦,不支持url修饰符。

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

@SimonMourier在顶部答案中的评论是错误的,因为他寻找了错误的规范。url-token类型仅为遗留的特殊解析规则引入,所以这就是为什么它与引号没有任何关系。

2021年更新(大多数答案来自2015年及更早)

引号是可选的,但是某些字符(如果使用)需要转义。

中数:

一个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中不使用引号,在任何圆括号、空格字符、单引号(')和双引号(")之前使用反斜杠()。

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