web-dev-qa-db-ja.com

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

スタイルシートで使用する必要があるのは次のうちどれですか？

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

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

cssw3c
226
Poru

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

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

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

構文および基本データ型

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

特殊文字のエスケープ：

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

237
Pekka 웃

引用符は最新の標準で推奨されており、Edgeのケースが少ないため、引用符を使用する方が適切です。

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

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

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

つまり、url(...)構文は、文字列とURL修飾子をパラメーターとしてとる関数表記法であると想定されています。引用表記（文字列トークンを生成する）を使用すると、より標準に準拠し、複雑さが軽減されます。

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

30
sodatea

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オプティマイザーがあなたのためにこれを処理します...

10
Andrea Zilio

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

6
Y. Shoham

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

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

同じ説明から、適切な文字がエスケープされている場合、例1が受け入れられることに注意してください。

3
Nick Craver

私が持っていた：

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

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

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

1
TechNyquist

Google CSS Coding Style

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

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

0
Junhao