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

CSS の名前付きグリッド領域が引用符で囲まれない理由

CSS グリッド仕様によれば、グリッド領域の値はグリッド線として分類されます。カスタムIDを利用します。 MDN ドキュメントでは、ID を引用符で囲むと文字列に変換されてしまうため、ID を引用符で囲むことはできないと強調しています。ただし、これらの概念を組み合わせると、名前付きグリッド領域には引用符なしの ID を使用してアクセスする必要があることが明らかになります。

以下の例は、この区別を示しています。

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

.foo {
    grid-area: b;
}

.bar {
    grid-area: "c";
}

値 " を割り当てている間b" を Grid-area に指定すると期待どおりに動作しますが、領域名を引用符で囲むと (例: "c")、誤った認識が発生します。グリッド領域名は通常、定義時に引用符で囲まれるため、この動作は直感的ではないように見えるかもしれません (例: Grid: "area1 area2" / 1fr 1fr;)。ただし、このコンテキストでは、これらは変数名と同様の識別子として扱われます。

設計理論

CSS グリッド仕様の開発者は、名前付きグリッド領域に対して文字列ではなく識別子を選択しました。主な理由は、より広範な CSS フレームワークとの一貫性を確保します。 CSS プロパティの大部分は、値に文字列ではなく識別子を使用します。注目すべき例外には、両方を許可するフォント ファミリ、コンテンツ、およびグリッド テンプレート領域が含まれます。

2013 年の議論で、仕様作成者は、識別子を使用する次の利点を強調しました:

• 一般的な CSS 規約との調整
• 同じものを識別する名前の明確な視覚的なグループ化location
• 名前付きグリッド領域のテンプレート構文 (文字列を使用) とグリッド テンプレート短縮表現の名前付き行との互換性

実装の詳細

CSS グリッドは名前付きを定義しますグリッド領域プロパティを使用してグリッド領域を作成します。このプロパティは、grid-template-area 内で参照できます。次の例を考えてみましょう:

.grid {
    display: grid;
    grid-template-areas: "   logo    nav     nav   "
                         " content content content "
                         " footer  footer   footer " ;
}

.logo  { grid-area: logo;    }
nav    { grid-area: nav;     }
main   { grid-area: content; }
footer { grid-area: footer;  }

コンテナの短縮グリッド プロパティを使用する別の例:

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

.foo {
    grid-area: b;
}

この 2 番目の例では、短縮表記は次のように変換されます:

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b"
                     "c d";

グリッド テンプレート エリアでは、名前付きグリッド エリアが文字列にカプセル化されます。対照的に、grid-area はそれらを識別子 () として割り当てます。

CSS の識別子と文字列

CSS Values and Units Module 仕様では、識別子を次のように定義しています。

"... 文法に準拠した文字のシーケンス。識別子は引用符で囲むことができません。引用符で囲まないと、文字列として解釈されます。CSS プロパティは、事前定義されたキーワードと作成者定義の識別子の 2 つのクラスを受け入れます。一方、文字列は

グリッド領域での識別子の使用の根拠

仕様作成者によると、グリッド領域の値に文字列の代わりに識別子を使用するという決定は、一貫性を求めることに基づいていました。 CSS では識別子が主な値タイプであり、grid-area も単純にこれに従うことになります。

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