Comments 24
Никогда не был связан с вэб-девом, но недавно сделал сайт и вэб-интерфейс своему пет-проекту. Так ради прогиба под IE я был вынужден даже параметры в CSS убрать и заменить захардкоренными константами… Не представляю, как на фронте сражаются с IE. Мне вообще посоветовали не учитывать его при разработке, а уделить внимание только троице Фокс/Хром/Опера ну и Сафари может еще и мобильные варианты. Это общая тенденция? IE все игнорируют за его плохое поведение? :)
Переменные в css сейчас можно спокойно использовать, если не нужна поддержка IE. Все остальные браузеры (в том числе Edge) поддерживают данный функционал. И, исходя из этого, а также из того, что статус https://www.w3.org/TR/css-variables/ — Candidate Recommendation, можно сделать вывод, что спецификация больше меняться не будет (вернее, что вероятность этого крайне мала).
потому что их так и не утвердили окончательно
Когда W3C что-нибудь «утверждает окончательно» (дает статус Recommendation), как правило, это значит, что это что-то изрядно устарело. И совершенно не значит, что это что-то не поменяется (классика — CSS2.1 стал рекомендацией лишь в 2011-м, а через год обнаружили, что в нем «забыли упомянуть» целый новый контекст форматирования, табличный:). Статус Recommendation актуален разве что для юристов-патентоведов.
Использовать что-либо на практике W3C советует начиная со статуса кандидата в рекомендации. У CSS-переменных статус именно такой.
Пардон, но кто именно из актуальных мобильных браузеров не понимает @supports? Blackberry Browser да всё тот же осёл, только мобильный? Даже Опер-в-Мини и UC Browser, с которыми обычно больше всего проблем, как минимум в этом проблем не доставляют...
По-моему, в мобильном царстве, с поголовным доминированием вебкита-блинка, уже довольно давно дела с поддержкой новинок в целом гораздо лучше, чем на десктопах — именно потому, что не надо учитывать старых ослов.
Кастомные css-свойства и css-переменные всё-таки разные понятия.
И замечательно все используют, PostCSS в помощь (postcss-custom-properties), с соответствующими ограничениями, конечно. Маловероятно, что спека со статусом с 2015 года "Candidate Recommendation" изменится. А с выходом Edge 15 переменные и кастомные свойства стали реализованными во всех основных браузерах без всяких флагов.
Глобальная поддержка у них (судя по caniuse) 69%, а на проектах нашей компании значительно выше (порядка 85%) из-за отличий в аудитории. Как только поддержка станет достаточной, можно будет включить опцию "preserve" и получить полность работоспособные динамические кастомные css-свойства.
Цель использования кастомных css-свойств у нас — темизация общей библиотеки компонентов для разных проектов компании.
P.S. надеюсь мой коммент не сильно устареет, прежде чем будет одобрен))
И замечательно все используют, PostCSS в помощь (postcss-custom-properties), с соответствующими ограничениями, конечно.Это не просто ограничения. Зафолбеченные кастомные свойства просто-напросто теряют смысл до нуля. Получается просто подстановка статических значений, которая гораздо логичнее и удобнее решается средствами CSS-препроцессоров. Использовать для этого новые спецификации плюс postcss-костыли к ним — это тонкая разновидность мазохизма, по-моему. Вся польза там именно в динамике и увы, это возможно только когда есть нативная поддержка.
Кастомные css-свойства и css-переменные всё-таки разные понятия.
Немного неожиданно… Или имеется в виду формальное определение, что переменные — это тип значения, а кастомные свойства — способ его задания?
Всю статью ожидал getComputedStyle, а его там нет.
У меня был вариант вставить эту функцию, но там что-то не получалось и я на это плюнул.
В Firefox стили вычисляются сразу же после их установки, поэтому можно обойтись без этого, а вот в других браузерах обязательно вставлять.
Кстати, точно таким же образом можно вычислять соотношение разных CSS-единиц (сколько px в em, например), т.к. часть величин непостоянные и зависят от разрешения экрана.
Выходит, можно при первом визите пользователя провести все тесты при помощи JS, затем отправить результат на сервер, сохранить его в cookie, и сервер сможет выдавать правильные сгенерированные стили под именно этот браузер, исходя из уровня актуальной поддержки.
К сожалению, пока новинки только приживаются, нужно иметь в виду, что поддержка браузером свойства/значения и возможность его использовать — не одно и то же. Например, Хром с 57 версии поддерживал justify-content: space-evenly — и радостно рапортовал об этом в @supports() — но… до 61-й версии оно там работало только в гридах, но не во флексбоксах. Или @supports (display: grid), который внезапно дает true в Edge, потому что какая-никакая реализация гридов там есть (а поддержку настоящих гридов надо проверять чем-то вроде @supports (grid-area: auto)).
Проверяем браузер на поддержку определённого CSS свойства