Ошибки в CSS переменных и вычисления: как получить вывод ошибок? - PullRequest
Новая
       7

Ошибки в CSS переменных и вычисления: как получить вывод ошибок?

1 голос
/ 16 апреля 2020

Я начал работать с CSS переменными, чтобы попробовать создать модульную шкалу размеров. Но я быстро столкнулся с проблемами, когда значения CSS были проигнорированы, но я не увидел никаких признаков того, что было не так.

Давайте посмотрим минимальное воспроизведение проблемы: 

:root {
  --ratio: 1.25;
  --font-size-medium-heading: calc(var(--ratio) * 1rem);
  --font-size-large-heading: calc(var(--font-medium-heading) * var(--ratio)); /* note the typo in the var */
}

h1 {
  font-size: var(--font-size-large-heading);
}

I специально сделал опечатку, чтобы увидеть, что произойдет (я пропустил -size из имени переменной). Поскольку мой заголовок стал мини, я попытался запросить значение моей новой переменной CSS:

getComputedStyle(document.documentElement).getPropertyValue('--font-size-large-heading') === ''

Она вернула пустую строку.

Давайте перейдем к Chrome инспектор стиля и посмотреть, получу ли я предупреждающий знак ⚠️: font-size-large-heading shows up as a valid property, no warning sign

MDN советует использовать CSS валидатор. Итак, давайте попробуем это: https://jigsaw.w3.org/css-validator/validator Well it really was not updated recently

Я предполагаю, что этот валидатор не очень актуален (если кто-то использует его до сих пор ).

Обновление Я понял, что согласно спецификации c это допустимое утверждение , но значение его вычисленного времени недопустимо. Я хочу знать об этом, поскольку он просто скрывает истинную проблему в очень частой ошибке (если вы когда-нибудь потратили день на то, чтобы узнать, что Angular ожидал "'thing'" вместо "thing" в шаблоне, вы будете понять, как плохо не выводить недопустимые значения).

Есть ли способ получить сообщение об ошибке о недействительных значениях CSS var s и calc вычисленного времени?

1 Ответ

1 голос
/ 16 апреля 2020

Сначала spe c

Если свойство содержит одну или несколько var() функций, и эти функции синтаксически допустимы, грамматика всего свойства должна быть принята во время анализа. После замены функций var () проверяется только синтаксис во время вычисленного значения.

Вот почему вы не видите желтый треугольник в chrome devtool, потому что синтаксис мудрый действительный.

Из spe c сосредоточиться на четвертом правиле

В противном случае свойство, содержащее функцию var (), является недопустимым во время вычисления значения

Также

Объявление может быть недопустимым во время вычисляемого значения , если оно содержит var () , которое ссылается на пользовательское свойство с гарантировано-недействительным значением

Третья строка в вашем коде содержит var () , который ссылается на переменную css с гарантированным недопустимым значением

Почему?

Начальным значением пользовательского свойства является гарантированно-недействительное значение . Как определено в § 3 Использование каскадных переменных: нотация var () , использование var () для замены пользовательского свойства этим значением, так как свойство, ссылающееся на него, недопустимо во время вычисления значения.

Несуществующие css переменные в основном создают его, и его начальное значение является гарантированно-недействительным значением.

Чему вычисляется это начальное значение?

Это значение сериализуется как пустая строка, но фактически запись пустого значения в пользовательское свойство, например --foo: ;, является допустимым (пустым) значением, а не гарантированным-недействительным значением. Если по какой-либо причине кто-то хочет вручную сбросить переменную в гарантированно-недействительное значение, используйте ключевое слово initial:

Именно поэтому getComputedStyle(document.documentElement).getPropertyValue('--font-size-large-heading') возвращает "пустую строку" (гарантированное-недействительное значение)

...