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

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

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

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

72821 次浏览
小开

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

小开
最佳答案

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

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

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

语法和基本数据类型

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

转义特殊字符:

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

小开

例子2或3是最好的:

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

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

小开

下面是W3 CSS 2.1规范说的:

URI的格式是'url(' 后面跟着可选的空白 后面跟着可选的单引号 (')或双引号(")字符 后面跟着URI本身 通过可选的单引号(')或 双引号(")字符后跟 可选空格后跟')'。 两个引号必须是 相同。< / p >

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

所以你提出的3个例子都是正确的，但我选择的是第一个，因为你使用更少的字符，因此产生的CSS文件将更小，导致更少的带宽使用。

这可能感觉不重要，但高流量的网站更喜欢节省带宽和大量的css文件，其中的url引用选择使文件更小的选项是有意义的… 甚至因为有不这样做没有任何好处.

.

注意:如果url包含圆括号，逗号，空格字符，单引号或双引号，则可能需要转义字符。这可能会使url比仅使用引号(需要较少转义)更长。因此，只有当转义的开销不会使url比仅使用引号(这是非常罕见的)更长时，你可能想要提供一个不带引号的url的Css文件。

然而，我不希望任何人考虑这些边缘情况……一个Css优化器会为你处理这个…(但是如果你真的在写css优化器，你肯定需要知道所有这些:P)

小开

根据谷歌CSS编码风格

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

例外:如果你确实需要使用@charset规则，使用双引号-单引号是不允许的。

小开

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

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

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

未引用的版本仅因遗留原因而受到支持，需要特殊的解析规则(用于转义序列等)，因此很麻烦，不支持url修饰符。

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

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

小开

我有:

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

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

因此，它不是强制性的，但是，即使旧的浏览器不能很好地理解引号，它也可以在相当复杂的动态生成页面中为您省去一些麻烦。

小开

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，在任何括号、空格字符、单引号(')和双引号(")之前使用反斜杠()作为URL的一部分。

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

提交答案