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

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

CSS グリッドでは、名前付きグリッド領域は引用符なしの ID を介してアクセスされます。名前付きグリッド領域はグリッド内で引用符で指定されているため、奇妙に思えるかもしれません: "area1 area2" / 1fr 1fr;.

識別子の使用理由

CSS Grid の開発者が選択したものCSS の残りの部分との一貫性を保つために、文字列の代わりに識別子を使用します。 CSS プロパティの大部分は、display、font-weight、justify-content などの値の指定に識別子を使用します。名前付きグリッド領域に識別子を使用することで、CSS 仕様は均一性を維持します。

識別子と文字列

識別子は、キーワードとして誤って解釈されない、作成者が定義した文字のシーケンスです。これらは大文字と小文字が区別され、引用符で囲まない必要があります。一方、

文字列は、引用符 (一重または二重) で区切られた一連の文字です。これらは に対応します。

例

次の例では、.logo のグリッド領域は、領域名「logo」を識別子として割り当てます。 string:

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

.logo {
  grid-area: logo;
}

結論

名前付きグリッド領域の識別子の使用は、最初は直観に反しているように思えるかもしれませんが、CSS グリッド仕様の開発者によって目的のために選択されました。大部分の CSS プロパティとの一貫性。この決定により、統一された構文が維持され、開発者の学習曲線がよりスムーズになります。

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