我应该在样式表中使用下列哪个?
/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');
W3C将什么指定为正确的方式?
我应该在样式表中使用下列哪个?
/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');
W3C将什么指定为正确的方式?
当前回答
下面是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)
其他回答
W3C说引号是可选的,你的三种方式都是合法的。
开头和结尾的引号只需要是相同的字符。
如果你的URL中有特殊字符,你应该使用引号或转义字符(见下文)。
语法和基本数据类型
URI值的格式是'url('后跟可选空格,后跟可选单引号(')或双引号(")字符,后跟URI本身,后跟可选单引号(')或双引号(")字符,后跟可选空格,后跟')'。两个引号字符必须相同。
转义特殊字符:
一些出现在非引号URI中的字符,如圆括号、空格字符、单引号(')和双引号("),必须用反斜杠转义,这样得到的URI值就是一个URI令牌:'\(','\)'。
我有:
a.pic{
background-image: url(images/img (1).jpg);
}
我花了一段时间才明白,内文件名的右括号违反了规则。
因此,它不是强制性的,但是,即使旧的浏览器不能很好地理解引号,它也可以在相当复杂的动态生成页面中为您省去一些麻烦。
例子2或3是最好的:
W3C: URI值的格式是'url('后跟可选空格,后跟可选单引号(')或双引号(")字符,后跟URI本身,后跟可选单引号(')或双引号(")字符,后跟可选空格,后跟')'。两个引号字符必须相同。
从同样的解释中注意到,如果有适当的字符转义,例1是可以接受的。
根据W3C的规定,有三种方法是合法的。如果名称中有特殊字符(如空格),则应该使用第二个或第三个字符。
最好使用引号,因为它是最新标准的推荐,并且有更少的边缘情况。
根据最新的CSS价值和模块第3级编辑草案(2015年12月18日)
URL是一个指向资源的指针,是一个函数符号,用< URL >表示。<url>的语法是: <url> = url(<string> <url-modifier>*)
不带引号的版本仅在遗留原因下得到支持,并且需要特殊的解析规则(用于转义序列等),因此很麻烦,不支持url修饰符。
这意味着,url(…)语法应该是一种函数符号,它接受字符串和url修饰符作为参数。使用引号表示法(它产生一个字符串令牌)将更符合标准,并引入更少的复杂性。
@SimonMourier在顶部答案中的评论是错误的,因为他寻找了错误的规范。url-token类型仅为遗留的特殊解析规则引入,所以这就是为什么它与引号没有任何关系。