Статьи

Некоторые проблемы с черновиками переменных CSS

Январь 15, 2019

Благодаря Хольцшлаг в твиттере , я узнал , что был проект редактора из CSS переменных .

Позвольте мне сначала сказать, что я думаю, что это здорово, что W3C берет это на себя. Я думаю, что переменные в CSS в конечном итоге будут хорошей вещью. Это позволит легко использовать цвета и другие свойства CSS. Это сделает большое количество избыточности уйти. Это уменьшит размер CSS-файлов и, следовательно, уменьшит количество ошибок.

При этом у меня есть серьезная претензия к реализации — одним словом «данные».

Смотрите, вот как CSS-переменные должны работать в соответствии с проектом.

Я создаю свойство в корне с именем «data-header-color».

:root {
  data-header-color: #06c;
}

Затем, чтобы обратиться к этому цвету в другом месте, я использую конструкцию, которая выглядит как функция с именем «data ()», чтобы получить его следующим образом:

h1 { background-color: data(header-color); }

Насколько я могу судить, единственное объяснение в проекте, почему это так, это то, что он пытается соответствовать спецификации HTML для «данных» :

Присвоение имен здесь основано на форме пользовательских атрибутов данных в HTML5. Однако, как здесь определено, синтаксис для использования переменных отличается от синтаксиса для определения переменных (то есть data-foo для определения, data (foo) для использования). Некоторые считают, что синтаксис должен совпадать, используя функциональный синтаксис в обоих случаях. Другие предложили использовать префиксный символ вместо функционального синтаксиса (например, $ foo) как для свойства, так и для использования.

Ну, по крайней мере, они знают, что некоторые могут возразить против этого формата. Итак, позвольте мне добавить свой голос.  Я возражаю . Переменные — довольно стандартная конструкция, люди знают, как они работают. Заставьте их работать как переменные в других языках. У меня есть несколько причин здесь:

  • Два разных синтаксиса для создания и потребления кажется сбивающим с толку
  • Похоже, вы вызываете функцию, но это не так. Вы ссылаетесь на переменную. Это сбивает с толку.
  • CSS и HTML не имеют много совпадений в синтаксисе, почему добавление некоторых хорошо?

Я предпочитаю, чтобы я мог просто использовать простые старые слова в качестве переменной, а затем использовать их как простые старые слова. При этом я буду в порядке с префиксным символом, например, $, если речь идет о какой-то проблеме синтаксического анализа.

Это моя главная проблема с черновиком, но у меня есть еще одна проблема с поведением недопустимых переменных. Например, если вы установите поле на #FFFFFF. В основном, если у вас есть этот код:

p { background-color: red; }
p { background-color: "Behold I am not a valid color at ALL!!!!" }

Тогда p выходит красным, но если у вас есть этот код:

:root { data-not-a-color: "Behold I am not a valid color at ALL!!!!" }
p { background-color: red; }
p { background-color: data(not-a-color); }

Р выходит прозрачным.

Такое изменение поведения может быть довольно запутанным. Объяснение имеет некоторый смысл:

Недопустимая концепция времени вычисляемого значения существует, потому что переменные не могут «рано завершиться», как другие синтаксические ошибки, поэтому к тому времени, когда пользовательский агент понимает, что значение свойства недопустимо, оно уже выбрасывает другие каскадные значения. Я думаю, что «attr ()» также должен полагаться на него, так как его поведение почти идентично переменным.

Но я полагаю, что это то, что производители браузеров могут обрабатывать, контролируя поведение «отбрасывания других каскадных значений». Они могут удерживать каскадные значения, пока не будут выполнены вычислительные переменные. Но, может быть, я что-то здесь упускаю. Но также стоит подумать, не облегчит ли это недействительный CSS. Я сомневаюсь в этом, но пока браузер не реализует их, будет трудно определить, так ли это.

Так или иначе. Хорошая новость заключается в том, что это черновик редактора, а не рекомендация. Это означает, что сейчас самое время начать анализировать эту спецификацию и комментировать ее. Так что ты думаешь?

 

Помимо черновиков W3C

Важно отметить, что «Рабочий проект» является довольно ранней стадией процесса рекомендаций W3C.

W3C выполняет эти шаги при представлении технического отчета в Рекомендацию.

  1. Публикация первого общественного рабочего проекта.
  2. Объявление о последнем звонке.
  3. Призыв к реализации.
  4. Призыв к рассмотрению предлагаемой рекомендации.
  5. Публикация в качестве рекомендации.

Я считаю, что в данный момент мы находимся между шагами 1 и 2. Также актуально:

Цель: публикация первого общественного рабочего проекта является сигналом для сообщества, чтобы начать рассмотрение документа.

Чтобы было ясно, мы должны комментировать на этом этапе.

34
Share: