247

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

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

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

4

8 に答える 8

255

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

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

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

構文と基本データ型

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

特殊文字のエスケープ:

かっこ、空白文字、一重引用符 (')、二重引用符 (") など、引用符で囲まれていない URI に現れる一部の文字は、バックスラッシュでエスケープして、結果の URI 値が URI トークン: '\(', '\)'.

于 2010-01-30T18:13:23.730 に答える
36

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

CSS 値とモジュール レベル 3の最新のエディターズ ドラフト (2015 年 12 月 18 日) によると、

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

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

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

一番上の回答の@SimonMourierのコメントは間違っています。彼は間違った仕様を探していたからです。このurl-token型は、従来の特別な解析規則に対してのみ導入されているため、引用符とは何の関係もありません。

于 2015-12-20T16:31:51.323 に答える
11

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 を含む Css ファイルを提供することをお勧めします (これは非常にまれです)。

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

于 2010-01-30T18:14:28.847 に答える
8

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

于 2010-01-30T18:12:38.257 に答える
3

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

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

同じ説明から、適切な文字がエスケープされている場合、例 1 は許容されます。

于 2010-01-30T18:14:11.343 に答える
2

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

URI 値 (url()) で引用符を使用しないでください。

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

于 2015-03-07T06:14:13.680 に答える
1

私が持っていた：

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

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

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

于 2017-03-28T14:50:17.970 に答える