Подводные камни пользовательских CSS-свойств

[andreymal]

Согласно стандарту пользовательских свойств, в качестве значения можно использовать любое существующее корректное CSS-значение.

Фраза «корректное CSS-значение» как-то двояко интерпретируется. Не просто любое, а почти произвольный набор почти любых токенов. Тот же стандарт в качестве примера приводит --foo: if(x > 5) this.width = 10;, который валидный, хоть и в целом бесполезный

[mobi]

Я бы еще добавил, что свойства нельзя определить через самих себя, т.е. вот такое задание значения по умолчанию (если не унаследовалось) не работает:

--color: var(--color, #abcdef);

[smart_alex]

Так самый главный вопрос: насколько это применимо в реальной жизни, у каких пользователей и на каких платформах это НЕ будет работать? Каково реальное соотношение тех, у кого это будет работать и тех, у кого — нет?

[dsrk_dev]

caniuse.com/#feat=css-variables 87% юзеров

[smart_alex]

Спасибо за пояснение, тогда ещё один вопрос: в популярных проектах это уже используется в массовом порядке или разработчики пока этим не пользуются? Я бы с удовольствием перевёл свой проект

https://hi-lab.ru/arduino-mega-server

на эту технологию, но мне (как наверное и многим другим) важна максимальная совместимость.

[andreymal]

Популярные проекты используют webpack (с плагинами), который сконвертирует любой современный код хоть под IE9

[navix]

Данная фича должна быть реализована в браузере, не уверен, как вебпак может тут помочь.

[andreymal]

Если нет необходимости менять переменные на лету в браузере, то (почти) любые использования переменных можно заменить на конкретные значения

Или можно добавить конкретные значения как fallback для старых браузеров, а для новых переменные тоже оставить — так умеет делать postcss-custom-properties

[dom1n1k]

Именно в перемене на лету и заключен весь смысл нативных css-переменных. Только для динамики они и используются. Если достаточно статичных значений, все используют препроцессоры.

[andreymal]

Зачем плодить сущности? Я использую CSS-переменные только для статики и прекрасно живу без всяких препроцессоров, postcss более чем достаточно для моих задач.

[dom1n1k]

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

[andreymal]

Огласите весь список полезностей, пожалуйста? Абсолютно все фичи, которые мне нужны были от less и scss, я нашёл и использую в postcss — переменные в том числе. С тех пор нужность less, scss и прочих мне непонятна.

[dom1n1k]

Модульность, вложенность, переменные, вычисления, интерполяция, миксины, условия, циклы, функции (как стандартные, например для цветов, так и пользовательские).

[andreymal]

Ну, как минимум три четверти из этого есть в postcss и я это активно пользую. Цветами/функциями пользоваться не доводилось, но беглый гуглинг намекает, что и это есть

[dom1n1k]

Всё есть. В виде зоопарка плагинов от разных авторов, с нестандартным и неконсистентным синтаксисом. А можно просто использовать один цельный язык.

[andreymal]

Всё есть. В виде зоопарка плагинов от разных авторов, с нестандартным и неконсистентным синтаксисом

Как будто что-то плохое

[SelenIT3]

Отличная статья! Но глаз зацепился за досадную неточность: псевдокласс :root не «ввели в стандарте CSS Custom Properties», а был с самого начала в стандарте CSS-селекторов 3 уровня. Впрочем, для объявления глобальных переменных, действительно, он пришёлся как нельзя кстати)