Как заставить работать css переменные в старых браузерах?

Question

[claus_bor]

Не работают css переменные в реактовском приложении на ios 8 в сафари и ie10. Я использую css модули как подход во всем приложении. Заменить переменные на хардкод - самый худщий вариант, проект на стадии mvp, постоянно идет редизайн.
Какие есть варианты решения проблемы для старых браузеров, что бы нативные переменные заработали?

Comments

[sim3x]

А зачем вы их вообще испольуете даже в новых браузерах?

[Rustam Bainazarov]

Есть полифил, но только для root-переменных.

[claus_bor]

sim3x, что бы держать цвета, шрифты и размеры в одном месте, под одними названиями

[sim3x]

claus_bor, так для такого sass существует

[Rustam Bainazarov]

sim3x, CSS-переменные — это иной уровень.

И ими можно манипулировать с помощью JS прямо в браузере. Жаль, полифил хоть и есть, но в старых браузерах он поддерживается только на root-уровне.

P. S. Хотя переменные препроцессоров и CSS-переменные друг другу не мешают, а дополняют.

[sim3x]

SmthTo, я в курсе

Никогда не возникало таких задач

[Rustam Bainazarov]

sim3x, было прикольно делать layout. С помощью 10 переменных управлял им, переставлял grid-блоки, менял ширину элементов, отступы и т. п. Хорошая штука, жаль, полифил нужен, если нужны старые браузеры.

[sim3x]

SmthTo,
ненене

KISS

Не нужно делать ООП там где оно не подразумевалось

[Rustam Bainazarov]

sim3x, так наоборот получилось проще.

С помощью media-запросов меняю всего лишь 10 значений, и всё работает и автоматически пересчитывается. А так это бы заняло в сотни 3–4 больше CSS-манипуляции и кода.

[sim3x]

SmthTo,

Никто не использует чистый цсс

[Rustam Bainazarov]

sim3x, а при чем тут это?

Там весь проект на SASS. CSS-переменные для layout'а + для взаимодействия с JS.

[sim3x]

SmthTo,
Те смешиваем представление и логику - супер

[Rustam Bainazarov]

sim3x, как доп. функция — отличная штука. Пройдёт время, появятся новые функции, новые прикладные применения.

P. S. Плюс, темы приложения (скины) на переменных сделали.

[sim3x]

SmthTo,

Скины в большинстве случаев намного больше чем смена цвета в переменных
А чаще всего - полная перверстка

цсс и жс требуют кардинальных изменений, а не вот таких подсластителей

[Rustam Bainazarov]

sim3x, да, там не только цвета, но шрифты, отступы, фоны, размеры и расположение некоторых блоков.

Есть такой момент, согласен по крайней мере с CSS точно (JS, по сути, не знаю). Но сами понимаете, кардинально и внезапно не будет перемен, что логично. Это всё же эволюционные технологии с большой оглядкой на прошлое.

Answer 1

[Владислав Лысков]

https://github.com/jhildenbiddle/css-vars-ponyfill