Могу ли я использовать числовое значение для grid-template-rows / grid-template-columns? - PullRequest
Новая
       5

Могу ли я использовать числовое значение для grid-template-rows / grid-template-columns?

0 голосов
/ 30 апреля 2018

Я программно создаю сетку со строками и столбцами из моих данных.

Однако, когда данные являются числом (например, 0900), стиль не может быть установлен для элемента.

Это потому, что цифры нельзя использовать или ошибка?

Пример кода: 

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.

1 Ответ

0 голосов
/ 30 апреля 2018

Да, пока значение не начинается с цифры.

Именованные линии сетки используют синтаксис <custom-ident> (пользовательский идентификатор) 1 .

Согласно правилам этого синтаксиса, <custom-ident> "представляет любой допустимый идентификатор CSS, который не будет неверно истолкован как предопределенное ключевое слово в определении значения этого свойства" 2 .

Ключевым термином в вышеприведенной фразе является «любой действительный идентификатор CSS» . Итак, каковы действительные идентификаторы CSS?

Вот ответ:

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторы) могут содержать только символы [a-zA-Z0-9] и ISO 10646 символы U + 0080 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефиса цифрой. 3

Обратите внимание на часть: они не могут начинаться с цифры ...

Технические характеристики:

1 Модуль CSS Grid Layout Уровень 1, & sect; 7.2.1 Именованные линии сетки .

2 Значения и единицы измерения CSS Модуль Уровень 3, & sect; 3.2 Определенные автором идентификаторы

3 CSS Level 2 Revision 2 (CSS 2.2), & sect; 4.1.3 Символы и регистр

...