為什麼 CSS 命名的網格區域不需要在 `grid-area` 中加引號？

為什麼CSS 命名的網格區域不包含在引號中

根據CSS 網格規範，網格區域值被分類為網格線，而網格線又是使用自訂標識。 MDN 文件強調 ID 不能包含在引號內，因為這會將它們轉換為字串。然而，當組合這些概念時，很明顯，命名網格區域應該透過不帶引號的 ID 來存取。

下面的範例說明了這種區別：

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

.foo {
    grid-area: b;
}

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

在分配值時" b" 到網格區域按預期工作，將區域名稱括在引號中（例如「c ”）會導致錯誤識別。這種行為可能看起來不直觀，因為網格區域名稱在定義時通常會用引號括起來（例如 grid: "area1 area2" / 1fr 1fr;）。然而，在這種情況下，它們被視為標識符，類似於變數名稱。

設計原理

CSS 網格規範背後的開發人員選擇在命名網格區域中使用標識符而不是字串，主要是因為與更廣泛的 CSS 框架保持一致。絕大多數 CSS 屬性都使用識別符而不是字串作為其值。值得注意的例外包括字體系列、內容和網格模板區域，它們允許兩者。

在2013 年的討論中，規範編寫者強調了使用標識符的以下好處：

• 與流行的CSS 約定保持一致
• 標識相同名稱的清晰視覺分組location
• 命名網格區域模板語法（使用字串）與grid-template速記中的命名行之間的相容性

實作細節

CSS 網格定義命名使用grid-area 屬性的網格區域，可以在grid-template-areas 中引用。考慮以下範例：

.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;
}

在第二個範例中，速記符號轉換為：

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

在grid-template-areas 中，命名的網格區域封裝在字串中。相反，grid-area 將它們分配為標識符 ()。

CSS 中的識別符和字串

CSS 值和單位模組規範將標識符定義為：

"...符合 語法的字元序列。屬性接受兩類識別碼：預先定義的關鍵字和作者定義的識別碼。並且由用雙引號或單引號括起來的字元組成。

網格區域中標識符使用的基本原理

根據規範編寫者的說法，在網格區域值中使用標識符而不是字符串的決定是基於對一致性的渴望。標識符是 CSS 中的主要值類型，網格區域也會效仿。

以上是為什麼 CSS 命名的網格區域不需要在 `grid-area` 中加引號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！