CSS の名前付きグリッド領域に引用符が必要ないのはなぜですか?

CSS の名前付きグリッド領域は引用符で囲まれていないのはなぜですか?

CSS グリッド仕様に従って、grid-area の値はグリッド線として定義されます。カスタムidentタイプを利用します。ただし、MDN ドキュメントによると、識別子を引用符で囲むと文字列値が返されるため、引用符で囲むことはできません。これにより、なぜ名前付きグリッド領域に引用符なしの ID を使用してアクセスする必要があるのか​​という疑問が生じます。

この問題を説明するために、次の例を考えてみましょう。

.grid {
  display: grid;
  grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
  /* This works as expected, assigning the element to area 'b' in the upper right corner */
  grid-area: b;
}

.bar {
  /* Quoting the area name fails to resolve correctly */
  grid-area: "c";
}

<div class="grid">
  <span class="foo">foo</span>
  <span class="bar">bar</span>
  <span class="hello">hello</span>
</div>

この例では、 foo 要素は、引用符で囲まれていないグリッド領域を使用して b 領域に割り当てられます。ただし、引用符で囲まれたgrid-area: "c"を使用してc領域にbarを割り当てようとすると、正しく解決されません。

この一見直感に反する動作は、文字列ではなくカスタム識別子を使用するという決定から生じます。 – 名前付きグリッド領域を表すため。通常、CSS プロパティはその値に識別子を使用しますが、引用符で囲まれた文字列を使用するフォント ファミリ、コンテンツ、グリッド テンプレート エリアなどは例外です。

選択の理由

CSS グリッド仕様の開発者は、主に CSS 仕様の残りの部分との一貫性を保つために、名前付きグリッド領域に対して文字列ではなく識別子を選択しました。仕様作成者間の 2013 年の議論から:

[識別子の使用] には次の利点があります:

• 残りの CSS と一貫した識別子の使用
• 同じものを識別する名前を視覚的にグループ化するlocation
• 名前付きグリッド領域テンプレート構文 (文字列を使用) が、グリッド テンプレート短縮表現の名前付き行と共存できるようにします。

さらに、別の説明として、 2013 年のハイライト:

named を宣言するための現在の構文を確認するグリッド定義の行/列にグリッド線があるため、現在の構文はひどいという結論に達しました:

• ユーザー ID を表すために文字列を使用していますが、これは矛盾しています。 CSS の他のすべて。

結論

名前付きグリッド領域に特化した識別子を優先する強力な技術的根拠があるため、仕様作成者は CSS の一般的なアプローチとの一貫性を目指しました。識別子を使用することで、名前付きグリッド領域が大部分の CSS プロパティと一致し、一貫したユーザー エクスペリエンスを提供します。

以上がCSS の名前付きグリッド領域に引用符が必要ないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。