css - 为什么 CSS 命名的网格区域不在引号中？

Question

根据规范，the value for grid-area is grid-line , 其中 further uses custom-ident .然后MDN标识的状态不能放在引号之间，这将使它成为一个字符串值，这本身是合理的。

但是把这些加起来，named grid areas必须通过不带引号的 ID 访问。请参阅以下示例中的比较:

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

.foo {
/* this works just fine, putting it to area b in 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>

这似乎非常违反直觉。当使用类似 grid: "area1 area2" / 1fr 1fr; 的东西创建网格区域名称时，名称在引号中，感觉像值。但不知何故，它们变成了标识符，就像变量名一样。为什么选择这样的设计？

Answer 1

CSS Grid 规范开发人员决定在使用 grid-area 定义命名网格区域时使用标识符而不是字符串。属性(property), 为了与 CSS 的其余部分保持一致 .

绝大多数 CSS 属性使用标识符而不是字符串作为它们的值。 (此规则的显着异常(exception)包括 font-family 、 content 和 grid-template-areas ，它们都使用。)

来自 2013 年规范作者之间的讨论:

8. Named Lines Syntax

The previous named lines syntax was pretty awkward... It also used strings as CSS-internal identifiers, which we don't do anywhere else. Tab and I took the proposal from that thread, which was to switch to identifiers and use parentheses to group multiple names for the same position. This has the benefit of

• Using identifiers, consistent with the rest of CSS
• Providing visual grouping of names that identify the same location
• Allowing the named grid areas template syntax (which uses strings) to co-exist with named lines in the grid-template shorthand.

We think this is a dramatic improvement over the previous syntax, and hope that the rest of the WG agrees. :)

source: https://lists.w3.org/Archives/Public/www-style/2013Aug/0353.html

还有这个线程:

Looking over the current syntax for declaring named grid lines in grid-definition-rows/columns, we've come to the conclusion that the current syntax is terrible:

• We're using strings to represent a user-ident, which is inconsistent with everything else in CSS.

Our current suggestion for fixing this is to switch the line names to idents...

source: https://lists.w3.org/Archives/Public/www-style/2013Mar/0256.html

更多细节

在 CSS 网格中，named grid areas可以使用 grid-area 定义属性，然后在 grid-template-areas 中引用属性(property)。

下面是一个例子:

.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容器上的属性来自以下问题:

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

.foo {
    grid-area: b;
}

在这种情况下，grid属性分解为:

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

所以很明显，命名网格区域，当在 grid-template-areas 中引用时, 是 字符串 ，但是当它们在 grid-area 中定义时, 他们是 标识符 ( <custom-ident> )。

有什么不同？

根据CSS Values and Units Module规范:

§ 4.2. Author-defined Identifiers: the <custom-ident> type

Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property’s value definition. Such identifiers are fully case-sensitive (meaning they’re compared by codepoint), even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers).

什么是 CSS 标识符？

如 section 4 of the same spec 中所定义，它们是“...符合 <ident-token> 语法的字符序列。标识符不能被引用；否则它们将被解释为字符串。CSS 属性接受两类标识符:预定义的关键字和作者定义的标识符。 ”

§ 4.3. Quoted Strings: the <string> type

Strings are denoted by <string> and consist of a sequence of characters delimited by double quotes or single quotes. They correspond to the <string-token> production in the CSS Syntax Module.

那么为什么选择标识符而不是字符串作为 grid-area 中的值呢？属性(property)？

如答案的第一部分所述，没有明确的技术原因使用一个而不是另一个。决定归结为一致性:标识符代表了 CSS 中的绝大多数值，因此 grid-area values 也会做同样的事情来保持一致性。