引用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值和模块3级草案(2015年12月18日)

URL是指向资源的指针,是由...表示的功能表示法<url>.a的语法<url>是:
<url> = url( <string> <url-modifier>* )

不带引号的版本仅受遗留原因支持,并且需要特殊的解析规则(对于转义序列等),因此很麻烦且不支持url-modifiers.

这意味着,url(...)语法应该是一个功能表示法,它将字符串和url-modifier作为参数.使用引号表示法(产生字符串标记)将更符合标准并且引入更少的复杂性.

@ 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来提供Css文件.

但是我不希望任何人甚至考虑这些边缘情况...... Css优化器会为你处理这个...(但是如果你实际上正在编写一个css优化器,你肯定需要知道所有这些:P)

Answer 4

根据W3C,有三种方式合法.如果名称中有特殊字符(作为空格),则应使用第二个或第三个字符.