为什么 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中文网其他相关文章！