為什麼 CSS 命名網格區域不需要引號？

為什麼 CSS 命名的網格區域不加引號？

根據 CSS 網格規範，網格區域的值被定義為網格線，即使用自訂識別類型。然而，根據 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 區域：b 。然而，當嘗試使用引號的網格區域：「c」將 bar 分配給 c 區域時，它無法正確解析。

這種看似違反直覺的行為是由於決定使用自訂標識符而不是字串而引起的– 表示命名的網格區域。通常，CSS 屬性使用識別碼作為其值，但 font-family、content 和 grid-template-areas 等例外使用帶引號的字串。

選擇背後的原因

CSS 網格規範開發人員選擇在命名網格區域中使用標識符而不是字串，主要是為了與 CSS 規範的其餘部分保持一致。來自規範編寫者 2013 年的討論：

[使用識別符] 具有以下好處：

• 使用標識符，與 CSS的其餘部分一致
• 提供標識相同位置的名稱的視覺分組
• 允許命名網格區域模板語法（使用字串）與網格模板速記中的命名行共存。

此外，2013 年的另一次討論強調：

查看當前在 grid-definition-rows/columns中聲明命名網格線的語法，我們得出的結論是，當前語法太糟糕了：

• 我們使用字串來表示用戶身份，這與 CSS 中的其他所有內容不一致。

結論

雖然可能沒有強有力的技術理由來優先選擇專門用於命名網格區域的標識符，但規範作者的目標是與CSS 中的通用方法保持一致。透過使用標識符，命名網格區域與大多數 CSS 屬性保持一致，並提供一致的使用者體驗。

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