我可以为网格模板行/网格模板列使用数值吗?
Can I use a number value for grid-template-rows / grid-template-columns?
我正在以编程方式创建一个包含来自我的数据的行和列的网格。
但是,当数据为数字(例如0900)时,元素上的样式设置失败。
这是因为数字无法使用,还是bug?
代码示例:
this.myElement.style.gridTemplateRows = "[xHeader] 2fr [0900] 1fr [0930] 1fr
[1000] 1fr [1030] 1fr [1100] 1fr [1130] 1fr [1200] 1fr"
然后,检查值:
console.log(this.myElement.style.gridTemplateRows)
.
它在 devtools 中显示空白结果。
可以,只要值不以数字开头。
命名网格线使用 <custom-ident>
(自定义标识符)语法1.
根据此语法的规则,<custom-ident>
"represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property's value definition" 2.
以上短语中的关键词是"any valid CSS identifier"。那么什么是有效的 CSS 标识符呢?
答案如下:
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+0080 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, two hyphens, or a hyphen followed
by a digit.3
注意部分:它们不能以数字开头...
规范参考:
1 CSS 网格布局模块级别 1,§ 7.2.1 Named Grid Lines。
2 CSS 值和单位模块级别 3,§ 3.2 Author-defined Identifiers
3 CSS 级别 2 修订版 2 (CSS 2.2), § 4.1.3 Characters and case
我正在以编程方式创建一个包含来自我的数据的行和列的网格。
但是,当数据为数字(例如0900)时,元素上的样式设置失败。
这是因为数字无法使用,还是bug?
代码示例:
this.myElement.style.gridTemplateRows = "[xHeader] 2fr [0900] 1fr [0930] 1fr
[1000] 1fr [1030] 1fr [1100] 1fr [1130] 1fr [1200] 1fr"
然后,检查值:
console.log(this.myElement.style.gridTemplateRows)
.
它在 devtools 中显示空白结果。
可以,只要值不以数字开头。
命名网格线使用 <custom-ident>
(自定义标识符)语法1.
根据此语法的规则,<custom-ident>
"represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property's value definition" 2.
以上短语中的关键词是"any valid CSS identifier"。那么什么是有效的 CSS 标识符呢?
答案如下:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+0080 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.3
注意部分:它们不能以数字开头...
规范参考:
1 CSS 网格布局模块级别 1,§ 7.2.1 Named Grid Lines。
2 CSS 值和单位模块级别 3,§ 3.2 Author-defined Identifiers
3 CSS 级别 2 修订版 2 (CSS 2.2), § 4.1.3 Characters and case