Невозможно получить переменные CSS, работающие в Chrome 34

Я ранее задал очень аналогичный вопрос для более старой версии Chrome. Тем не менее, мне снова трудно заставить переменные CSS работать, на этот раз в Chrome 34 (версия 34.0.1847.131 м) в Windows 7. (Не пытались использовать другие ОС.)

Я вижу, что синтаксис был изменен (для старого, см. вопрос, связанный выше), а новый - это то, что в настоящее время находится в CSS Спецификация переменных:

:root {
  --main-color: #06c;
  --accent-color: #006;
}

/* The rest of the CSS file */
h1#foo {
  color: var(--main-color);
}

Также важно отметить, что у меня есть флаг Включить экспериментальную веб-платформу. Однако, если вы посмотрите на эту скрипту, я не могу получить более старый синтаксис или новый синтаксис, работающий в Chrome 34.

В Google-Google не появилось никаких известных ошибок Chrome. Мне любопытно, есть ли что-то новое, что я должен сделать, чтобы заставить его работать? Я сделал что-то не так? Кто-нибудь еще столкнулся с этим?

ОТВЕТЫ

Ответ 1

Переменные CSS теперь поддерживаются во всех современных браузерах

кроме IE11, который не имеет намерения реализовать

Синтаксис, о котором идет речь, был верным, а содержание ниже, вероятно, по-прежнему ценно для исторических целей. См. Этот скрипт для рабочего примера

Оригинальный ответ:

Я кое-что сделал и дошел до конца. Chrome временно удалил реализацию CSS-переменных. (См. комментарий 5 в билете Chrome, о котором я сообщил для проверки.) Однако, хотя мне был предоставлен ответ, остался вопрос о том, почему - поэтому я сделал больше копания.

Я слышал, что WebKit (Safari) удалил реализацию CSS-переменных, и это было подтверждено следующими двумя сообщениями email/page и Функция webkit.bugs.org удалила переменные CSS - это было связано с плохой начальной реализацией/кодом, а также с CSS-переменными. Разработчики WebKit больше внимания уделяли Google Производительность вспышки.

Chrome 33 удалил префикс поставщика для переменных CSS. Похоже, что Blink унаследовал реализацию бедных CSS-переменных и недавний патч удалил унаследованный код WebKit. Ниже приводятся примечания ведущего разработчика из Билет Chrome по этому вопросу (февраль 2014 года)

Удалить переменные CSS

Этот патч удаляет текущую реализацию переменных CSS Variables из WebKit.

В нашей реализации переменных CSS в текущем состоянии требуется переписать прежде чем он будет готов к отправке. Наш Bison CSS Parser намечен переписанный с нуля, это приведет к другой перезаписи переменные. Переменные CSS должны быть удалены на время чтобы предотвратить битот.

В том же билете Chrome было высказано мнение, что разработчики хотят повысить производительность Blink перед переписыванием переменных CSS:

Если бы мы отправляли переменные CSS с нашим текущим синтаксическим анализатором, мы бы увидели небольшую выгоду от использования платформы JavaScript для выполнения того же самого. Наш приоритет для Blink в этом году - производительность на мобильных устройствах, переменные CSS будут повторно рассмотрены после устранения наших недостатков производительности.

Существует ошибка отслеживающая новую реализацию.

Тем временем, если вы хотите поиграть с переменными CSS, у Firefox есть рабочая реализация - она ​​отправлена ​​по умолчанию с Firefox 31, для Firefox 29 вы должны активировать layout.css.variables.enabled в about:config (ввести в адресную строку).