url（）の値を引用することは本当に必要ですか？

スタイルシートで次のどれを使用すればよいですか？

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

W3Cは正しい方法として何を指定していますか？

W3Cは、引用はオプションであり、3つの方法はすべて合法であると述べています。

引用符の開始と終了は同じ文字である必要があります。

URLに特殊文字が含まれている場合は、引用符を使用するか、文字をエスケープする必要があります（以下を参照）。

構文と基本的なデータ型

URI値の形式は、「url（」、オプションの空白、オプションの単一引用符（ '）または二重引用符（ "）文字、URI自体の順に続き、その後にオプションの単一引用符（'）または二重引用符が続きます。 （ "）文字の後にオプションの空白が続き、その後に '）'が続きます。2つの引用文字は同じでなければなりません。

特殊文字のエスケープ：

括弧、空白文字、一重引用符（ '）、二重引用符（ "）など、引用符で囲まれていないURIに表示される一部の文字は、結果のURI値がURIトークンになるように円記号でエスケープする必要があります：' \（ '、 '\）'。

最新の標準で推奨されており、エッジケースが少ないため、引用符を使用することをお勧めします。

最新の編集者によるCSSの値とモジュールのドラフトレベル3（2015年12月18日）によると

URLはリソースへのポインタであり、で示される機能表記<url>です。aの構文は次のとおり<url>です。
<url> = url( <string> <url-modifier>* )

引用符で囲まれていないバージョンは、従来の理由でのみサポートされていますおり、特別な解析ルール（エスケープシーケンスなど）が必要であるため、扱いにくく、URL修飾子をサポートしていません。

つまり、 url(...)構文は関数表記であり、文字列とurl-modifierをパラメーターとして受け取ります。（文字列トークンを生成する）引用符表記を使用すると、より標準に準拠し、複雑さが軽減されます。

トップの回答における@SimonMourierのコメントは間違っています。なぜなら、彼は間違った仕様を探したからです。このurl-token型は、従来の特別な解析ルールでのみ導入されているため、引用符とは関係ありません。

W3 CSS 2.1仕様の内容は次のとおりです。

URI値の形式は、「url（」、オプションの空白、オプションの単一引用符（ '）または二重引用符（ "）文字、URI自体の順に続き、その後にオプションの単一引用符（'）または二重引用符が続きます。 （ "）文字の後にオプションの空白が続き、その後に '）'が続きます。2つの引用文字は同じでなければなりません。

出典：http : //www.w3.org/TR/CSS21/syndata.html#uri

したがって、提案した3つの例はすべて正しいですが、使用する文字が少ないため、結果のCSSファイルが小さくなり、帯域幅の使用量が少なくなるため、最初に選択した例を選択します。

これは重要ではないように思えるかもしれませんが、トラフィックの多いWebサイトは帯域幅と多くのCSSファイルを節約することを好み、その中のURL参照はファイルを小さくするオプションを選択することには意味があります... 利点がないのにそうしないで。

注：URLに括弧、コンマ、空白文字、一重引用符、または二重引用符が含まれている場合は、文字をエスケープする必要がある場合があります。これにより、引用符を使用するよりもURLが長くなる可能性があります（エスケープの必要性が少なくなります）。したがって、エスケープのオーバーヘッドによってURLが引用符を使用するよりも長くならない場合にのみ、引用符のないURLでCssファイルを提供することができます（これは非常にまれです）。

しかし、私は人間がこれらのエッジケースを考慮することを期待しません... Cssオプティマイザがこれを処理します...（しかし、実際にcssオプティマイザ：Pを作成している場合は、これらすべてについて知っておく必要があります）

W3Cによれば、3つの方法が合法です。名前に特殊文字が含まれている場合（スペースとして）、2番目または3番目を使用する必要があります。

例2または3が最適です。

W3Cから： URI値の形式は、 'url（'、オプションの空白、オプションの単一引用符（ '）、または二重引用符（ "）文字、URI自体、オプションの単一引用符（'）の順になります。または、二重引用符（ "）文字の後にオプションの空白が続き、その後に '）'が続きます。2つの引用文字は同じでなければなりません。

同じ説明から、適切な文字がエスケープされていれば、例1でも問題ありません。

私が持っていた：

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

ファイル名の閉じ括弧が規則に違反していることを理解するのにしばらく時間がかかりました。

したがって、これは必須ではありませんが、引用が古いブラウザであまりよく理解されていなくても、かなり複雑な動的に生成されたページでいくつかの頭痛を軽減できます。

Google CSSコーディングスタイルによると

URI値には引用符を使用しないでください（url（））。

例外：@charsetルールを使用する必要がある場合は、二重引用符を使用してください。単一引用符は使用できません。