Не удалось заставить переменные CSS работать в Chrome 34

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

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

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

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

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

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


google-chrome css css-variables
person Arthur Weborg    schedule 29.04.2014    source источник
comment
Кажется, этот вопрос касается конкретного приложения/программного обеспечения, а не кодирования в целом. Он слишком стар для переноса, но для дальнейшего использования подобные вопросы следует задавать на SuperUser.SE.   -  person chharvey    schedule 05.10.2016
comment
Когда вы принимаете во внимание контекст окончательного ответа, я полагаю, что отчасти согласен с вами. Однако я не согласен с тем, был ли вопрос о кодировании в целом. Во время вопроса, как использовать синтаксис css-переменной (в то время Chrome оказался единственным поддерживающим браузером...). Я не знал, был ли мой синтаксис правильным или нет, учитывая обновление спецификации и браузера. Я не вижу ничего принципиально неправильного в том, чтобы спрашивать об этом здесь, как в соответствии с спрашивать по теме в этом контексте.   -  person Arthur Weborg    schedule 05.10.2016
comment
Я полагаю, это зависит от точки зрения. Если вы спрашиваете о синтаксисе CSS в целом, то я бы сказал, что на этом сайте все в порядке. Но если вы спрашиваете о конкретном синтаксисе CSS в контексте Chrome 34, то я бы сказал, что это проблема программного обеспечения.   -  person chharvey    schedule 05.10.2016

Ответы (2)


arrow_upward
20
arrow_downward

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

за исключением IE11, который не планируется внедрять

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

Исходный ответ:

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

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

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

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

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

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

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

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

В новой реализации обнаружена ошибка.

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

person Arthur Weborg    schedule 07.05.2014

arrow_upward
1
arrow_downward

Начиная с Chrome 49 переменные CSS включены по умолчанию, и вы можете использовать их, как указано в вопросе.

https://www.chromestatus.com/features/6401356696911872

person shock_one    schedule 05.02.2016