CSS переменные в Firefox 29

На протяжении многих лет одной из самых частых просьб к рабочей группе CSS была реализация хоть какой-то поддержки объявления и использования переменных в таблицах стилей. После долгих обсуждений, в спецификации CSS Custom Properties for Cascading Variables был принят подход, позволяющий автору устанавливать пользовательские свойства в стилевых правилах, которые каскадируются и наследуются, как и другие наследуемые свойства. Обращения к переменным могут быть выполнены в определениях значений свойства, с использованием синтаксиса var().

Пользовательские свойства, объявляющие переменные, должны именоваться начиная с var-. Значения этих пользовательских свойств практически произвольны. Они могут принимать почти любую вереницу символов, при условии что она сбалансирована.

Например, автор может объявить какие-то общие значения в стилевых правилах для корневого элемента, таким образом они будут доступны для каждого элемента документа:
:root {
  var-theme-colour-1: #009EE0; 
  var-theme-colour-2: #FFED00; 
  var-theme-colour-3: #E2007A; 
  var-spacing: 24px;
}

Обращаться к переменным можно в любом месте внутри значения другого свойства, включая остальные пользовательские свойства. Переменные из вышеуказанной таблицы стилей могут быть использованы, например, следующим образом:
h1, h2 {
  color: var(theme-colour-1);
}
h1, h2, p {
  margin-top: var(spacing);
}
em {
  background-color: var(theme-colour-2);
}
blockquote {
  margin: var(spacing) calc(var(spacing) * 2);
  padding: calc(var(spacing) / 2) 0;
  border-top: 2px solid var(theme-colour-3);
  border-bottom: 1px dotted var(theme-colour-3);
  font-style: italic;
}

Если их применить к этому документу:
<!DOCTYPE html>
<h1>The title of the document</h1>
<h2>A witty subtitle</h2>
<p><em>Please</em> consider the following quote:</p>
<blockquote>Text of the quote goes here.</blockquote>

результат будет выглядеть как-то так:

Переменные вычисляются на основании значения переменной того элемента к которому применяется свойство со ссылкой на переменную. Если элемент h2 содержит атрибут style="var-theme-colour-1: black", тогда правило h2 { color: var(theme-colour-1); } будет вычислено с использованием этого значения, а не того, что определено в правиле :root

Ссылки на переменные так же могут включать в себя запасные значения, которые используются в случае, если переменная не определена или недействительна (из-за участия в цикле обращений к переменной). Первое правило в таблице стилей с использованием переменных можно переписать в виде:
h1, h2 {
  color: var(theme-colour-1, rgb(14, 14, 14));
}

что в результате приведет к установке темно-серого цвета, если переменная theme-colour-1 не определена в одном из заголовочных элементов.

Поскольку ссылки на переменные раскрываются используя значение переменной в конкретном элементе, этот процесс должен быть выполнен во время определения вычисленного значения свойства. Всякий раз, когда возникает ошибка в процессе подстановки переменной, свойство становиться «недопустимым во время вычисления значения» (“invalid at computed-value time”). Ошибки могут возникать из-за обращения к не объявленной переменной, не имеющей запасного значения, или потому, что подставляемое в свойство значение не было распарсено (например, если мы указали для переменной theme-colour-1 не цветовое значение и затем применили его для свойства color). Если свойство недопустимо во время вычисления значения, само объявление этого свойства парсится успешно, и его можно увидеть, если изучить объект CSSStyleDeclaration в дереве DOM. Однако вычисленное значение этого свойства примет значение по умолчанию. Для наследуемых свойств, таких как color, значением по умолчанию будет inherit. Для не наследуемых свойств, initial.

Реализация


Начальная реализация CSS переменных только что добавлена в Firefox Nightly, актуальной является 29 версия. Этот функционал пока не доступен в релизных сборках (таких как, Firefox Beta и релизная версия Firefox), так как прежде чем сделать его широкодоступным, мы ждем решения некоторых проблем в спецификации и для этого шагаем чуть дальше на ниве W3C Process. Однако все это и дальше будет доступно в Nightly, а после 3 февраля перейдет и в Firefox Aurora.

Единственная не реализованная на данный момент часть спецификации — это CSSVariableMap, представляющая объект, который напоминает ECMAScript Map с методами get, set и другими методами для получения значений переменных на основании CSSStyleDeclaration. Однако, помните, что вы все еще можете добраться до них в DOM-дереве, используя методы getPropertyValue и setProperty, при условии, что вы используете полные названия свойств, как например var-theme-colour-1.

Работа над этой функцией была выполнена в рамках решения бага 773296, и я благодарю Дэвида Барона за обзоры и Эманнуэля Басси, который выполнил кое-какие стартовые работы по реализации. Если вы столкнетесь с какими-либо проблемами, используя эту функцию, пожалуйста, сообщите об ошибке!

Оригинал: CSS Variables in Firefox 29

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 153

    –8
    Это как-то связано с реалиями W3?
    И еще, было бы великолепно — браузер работает с SASS/LESS!
      +4
      нет, не великолепно. зачем вам это? less умеет компилироваться через less.js. sass, к сожалению, в браузере не рендерится, так что его можно просто компилировать или отдавать через asset pipeline.

      Вы бы еще кофескрипт предложили внедрить в браузеры. А потом через шесть лет бы все плакались «ааа, ie13 поддерживает кофескрипт только 1.7.2, а там даже не поддерживаются let, const и генераторы».
        –1
        «Вы бы еще кофескрипт предложили внедрить в браузеры.»
        ммм а Dart не в счет?
          +2
          а что дарт? он работает только в сборке dartium, которая предназначена в первую очередь для разработчиков.

          У них самих стоит даже:
          Note: The Dartium binary expires within a month. When that happens, you'll need to download a new copy if you want to continue using Dartium.
        0
        Браузер рендерит страницу по мере её загрузки, а LESS/SASS не могут быть преобразованы в css пока все файлы, участвующие в генерации не будут загружены.

        Тут уж либо отказываться от концепции, что контент отображается по мере загрузки страницы, либо LESS/SASS и куча CSS вкусностей вроде селекторов "<".

        Лично моё мнение, что разумно сделать выбор режима отображения HTML, так как рендер по мере загрузки для современных SPA не нужен.
        • UFO just landed and posted this here
          +8
          Ну и сдались эти переменные сейчас, когда уже есть толковые препроцессоры. Бесполезная фича. А потом удивляемся, почему это рендеринг так тормозит
            +3
            Думаю препроцессоры используются намного реже, чем написание сразу чистого CSS.
              +7
              Разработка на чистом CSS не стала лучше ни на йоту. Препроцессоры не только переменные умеют. Вместо того, чтобы по-человечески все делать, какие-то костыли придумывают.
              • UFO just landed and posted this here
                  0
                  А можно пример про наследование, а то я так не понимаю, о чем речь. Получать значение переменных препроцессора в яваскрипте нельзя по определению, но зачем это может понадобиться?
                  • UFO just landed and posted this here
                      0
                      К сожалению, ссылки у меня не открываются. Переопределение переменных действительно кое-где может быть довольно полезным, но это очень узкий круг задач, скажем для какого-нибудь конструктора сайтов. И то выкрутиться можно с помощью классов. Для абсолютного большинства случаев стилизация через классы гораздо более расширяемое и легко поддерживаемое решение.
                  0
                  >> Препроцессоры не только переменные умеют.
                  Там полезное только это и math. Остальное избыточный шлак, дублирующий то что и так есть в css.
                    +1
                    А как же nested rules, import/include, mixins? Если для вас это шлак, то вы очень многое теряете
                      0
                      Все это можно делать без препроцессора. Поймите меня правильно. Я просто могу делать это лучше на простом css. И применение препроцессора никак не привидет к увеличению производительности для меня. А вот переменных и математики в css попросту нет. А они ой как нужны.
                  +4
                  Думаю те, кто не используют препроцессоры попусту теряют время. А один раз попробовав любой препроцессор уже ни за что не захочется обратно на Pure CSS.
                    0
                    Хотеться может что угодно, но набор инструментария может быть ограничен «сверху».
                      0
                      приведите пример, когда вас могут «сверху» ограничить в использовании LESS в угоду Pure CSS?
                        0
                        сss-файл лежит в репозитории и правят его несколько человек, из которых LESS использую только я. Не, есть конечно варианты синхронизации, но, имхо, главное преимущество использование LESS — упрощение и ускорение разработки — они нивелируют.
                          0
                          искусственное ограничение. Если захотите перейти, то точно так же кладётся LESS-файл в репозитарий и рутинёры продолжают писать уже в нём на Pure CSS, а новаторы на LESS и, при желании, переносить куски Pure CSS в LESS.
                            0
                            Как они будут писать, если не знают и не хотят знать синтаксис LESS?
                              0
                              LESS позволяет писать на Pure CSS.

                              PS. Когда не знают, то это решается путём показания основ — дальше сами, а когда «не хотят», то «метла» решает, т.к. перейти с Pure CSS на LESS хотя бы в базовом виде не составляет проблемы для желающих
                                0
                                Писать-то позволяет, но вот смешение ни к чему хорошему не приведет. Простой пример: вы написали тему для странички, задав цвета в переменных, чтобы менять сразу во всей теме. Я дописал один блочок и задал цвет литералом (less не знаю и знать не хочу). Вы захотели сменить цвета — теперь будете вынуждены просматривать весь код, а не просто изменить одну переменную как задумывали. А начальник я, а не вы.
                                  0
                                  а как сейчас вы в этом CSS задаёте этот цвет? и как решаете проблему, когда один и тот же цвет используется во множестве мест?
                                    0
                                    А просто копипащу из других мест.
                                      0
                                      что тогда поменяется при использовании смешанной записи?..
                                        0
                                        Для меня — ничего. Я скопипащу цвет из вашего кода. А вам придется менять в двух местах, потом в трех, потом где-то возникнет неоднозначность…
                      –1
                      Я думаю те кто использую препроцессоры, не слишком то много использовали Pure CSS. Вернее я это знаю.
                        0
                        Я вас умоляю. Я был адептом Pure CSS очень долго, придумывал способы систематизации стилей, писал фреймворки и чертыхался от препроцессоров, как от чего-то чумного. Но потом, в новом проекте пришлось использовать LESS, и вот тут я познал дзен (потом пробовал Stylus, SASS, но все же вернулся к LESS).
                        Вот ниже я приведу код, который не разу не показателен, но все же:

                        @media only screen{
                            @media (max-width: 900px){
                        
                                @media (min-height: 500px){
                                    .wrapper{
                                        /* Что эквивалентно: @media only screen
                                        and (max-width: 900px) and (min-height: 500px) { .wrapper{} } */
                                    }
                                }
                            }
                        }
                        
                        /* Или даже такое */
                        .wrapper{
                            @media only screen and (max-width: 900px){
                        
                            }
                        }
                        
                        .rows{
                            .column{
                                .collapsed &{
                                    width: 222px;
                                    /* .collapsed .rows .column {width: 222px;} */
                                }
                            }
                        }
                        
                        0
                        За пару лет несколько раз пытался пересесть на препроцессоры и агитировал за них. Но не нашел качественных инспекторов элементов для браузеров, удобно показывающих, например, строку, из которой в исходном файле назначается свойство этого элемента: image
                        А теперь, задумываюсь, а достаточно ли велики приемущества less/sass перед css с «нативными» переменными или наоборот?
                          +1
                          LESS с версии 1.5 умеет генерировать приличный Source Map, а Хром с тех же пор умеет его подхватывать.
                          Смотрите как оно у меня:

                            0
                            Для less+chrome видел, но не нашел вариантов для ie, на этом отчаялся. По крайней мере год назад.
                              0
                              Кскузи муа, но если вам для разработки, то зачем вас оно же для ИЕ?
                                0
                                но если вам для разработки, то зачем вас оно же для ИЕ?

                                Пока отвечал, уяснил что не понял вашего вопроса.
                                После значительных изменений css/html, желательно посмотреть на результат в ie. И если видно несоответствие, то удобней инспектировать несоответствие в инспекторе ie, чем скакать из одного инспектора к другому, восстанавливая картину бедствия.
                                  +1
                                  Возможно. Просто мне не случалось ступать на подобные грабли к счастью. Но я вам положа руку на сердце скажу, что проблема эта перекрывается всем удобством препроцессинга, да вы и сами понимаете.
                            0
                            Fireless для лисы.
                        0
                        Не до конца согласен, так как еще есть узкие места, где для различных лейаутов (mobile, table, desktop) бывает ой как не хватает реальных переменных, а не препроцессорных.
                          +5
                          Не-не-не. Значения CSS-переменных вы можете задавать через JS или mediaquery. И это очень вкусная возможность, недоступная никаким препроцессорам.
                            0
                            Ничто не мешает использовать CSS-переменные в препроцессорах.
                              0
                              Ничто не мешает, никто не спорит.
                              Если вам нужно сделать лейаут под 6 диапазонов разрешений, вы можете:
                              а) сделать препроцессором 6 мелких CSS-файлов под каждый случай
                              б) сделать универсальный, но большой CSS файл с шестью директивами media
                              в) сделать один мелкий CSS файл с CSS-переменными
                                0
                                г) сделать один мелкий less (например) файл с css-переменными. Не?
                                  0
                                  и? Как пользователь будет это грузить? Перевернул планшет из портретного положения в альбомное и повис?
                                    0
                                    Что? Вы о чем вообще? Почему повис? Я говорю о том, что ничего не мешает использовать css-переменные в препроцессорах, а вы мне про «повис». Разумеется, в конечном счете-то используются уже обработанные css-файлы, а не .less+ less.js

                                    Просто я не могу понять, почему это вдруг я должен для использования css-переменных отказываться от всяких прелестей типа миксинов для кроссбраузерности и автоматической генерации сетки.
                                      0
                                      Хорошо, повторяем по второму кругу.
                                      Итак, у вас есть набор less-файлов с переменными. Вы их можете
                                      а) скомпилировать в один большой CSS, в котором будут медиа-блоки под все разрешения, который все будут вынуждены грузить целиком;
                                      или б) скомпилировать несколько CSS-файлов под каждое разрешение и подключать их в зависимости от этого разрешения.
                                      В этом случае, если юзер поворачивает планшет, разрешение по ширине изменяется, и браузеру нужно загрузить свежий CSS, что может быть долго.
                                        0
                                        Или в) в скомпилированном CSS-файле используются CSS-переменные. Вы издеваетесь?
                                          +1
                                          Ну то есть вот грубый пример: что мне мешает сделать в less так:
                                          .size (@height, @width) {
                                          	height: @height;
                                          	width: @width;
                                          }
                                          
                                          :root {
                                            var-theme-colour-1: #009EE0; 
                                          }
                                          
                                          div {
                                          	.size(60px, 50px);
                                          	background: var(theme-colour-2);
                                          }
                                          


                                          И получить вот это:
                                          :root {
                                            var-theme-colour-1: #009EE0; 
                                          }
                                          
                                          div {
                                          	height: 60px;
                                          	width: 50px;
                                          	background: var(theme-colour-2);
                                          }
                                          


                                          Нет, нет никакой проблемы в том, чтобы использовать в препроцессорах переменные CSS.
                          +1
                          так недалеко и до «серверная часть на CSS» =)
                            +3
                            ну, игры уже на нем начали писать %)
                            +2
                            Это ж как нужно начать думать, чтоб придумать такой синтаксис?
                            Не, на самом деле ок, особенно задание значений по умолчанию.
                            • UFO just landed and posted this here
                              • UFO just landed and posted this here
                              0
                              Демонстрация работы CSS переменных от Кристиана Хейлмана.

                                +2
                                На мой взгляд, ошибка называть их переменными, это скорее константы, что более подходит декларативному языку, которым является CSS. И потом впервые их реализовывали в Вебките, но потом почему-то выпилили. Интересно, в чём причина?
                                • UFO just landed and posted this here
                                    0
                                    Типичные константы. Я не могу сделать var = var + 1 на том же уровне, могу перекрыть только уровнем выше. Это и есть константы.
                                    • UFO just landed and posted this here
                                        +3
                                        Например, чтобы для каждого следующего элемента, который затрагивается этим правилом, было другое значений того же свойства. Вот тогда это была бы переменная. Сейчас же это — константа. В том блоке где она используется, у неё всегда то же самое значение.
                                        • UFO just landed and posted this here
                                            0
                                            Именно. И не более того. Это и есть константы.
                                            • UFO just landed and posted this here
                                                +1
                                                Константы всегда именно так и работают: это имя + зона видимости и значение, которое им соответствует. В CSS — типичные константы. Имени, в этой зоне видимости, всегда соответствует одно и то же значение в CSS, это и есть константа.
                                                • UFO just landed and posted this here
                                                  • UFO just landed and posted this here
                                                    • UFO just landed and posted this here
                                                        +1
                                                        Мне пришлось её «выдумать» потому что мне приходится объяснять вам очевидные вещи — в чём разница между переменными и константами.

                                                        Ну и в JS есть константы: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const, недавно появились в явном виде. Кроме того, там же есть readonly-свойства, а поскольку переменные в JS это свойства, то можно считать, что «переменные» которые нельзя менять (т.е. константы) в JS уже много лет как есть.
                                                        • UFO just landed and posted this here
                                                            0
                                                            Похвастаться чем? Я не понимаю. Это очевидные константы. А выбор В3 продиктован коммерческими соображениями — такое название проще «продать».
                                                            • UFO just landed and posted this here
                                                              • UFO just landed and posted this here
                                                                • UFO just landed and posted this here
                                                                  • UFO just landed and posted this here
                                                                    • UFO just landed and posted this here
                                                                      • UFO just landed and posted this here
                                                                        • UFO just landed and posted this here
                                                                          • UFO just landed and posted this here
                                                                            • UFO just landed and posted this here
                                                                              • UFO just landed and posted this here
                                                                                • UFO just landed and posted this here
                                                                                  • UFO just landed and posted this here
                                                          • UFO just landed and posted this here
                                                              0
                                                              Я понял, что речь о текущем результате каскада-наследования, для текущих media-параметров. Термин, да, неудачный, но смысл, имхо, есть.
                                                              Да, именно про это я и говорил.
                                                              • UFO just landed and posted this here
                                                                • UFO just landed and posted this here
                                                                  • UFO just landed and posted this here
                                                                    • UFO just landed and posted this here
                                                                      • UFO just landed and posted this here
                                                                        • UFO just landed and posted this here
                                                                          • UFO just landed and posted this here
                                                                            • UFO just landed and posted this here
                                                                              • UFO just landed and posted this here
                                                                                • UFO just landed and posted this here
                                                                                  • UFO just landed and posted this here
                                                                                    • UFO just landed and posted this here
                                                                                      • UFO just landed and posted this here
                                                                                        • UFO just landed and posted this here
                                                                                    +2
                                                                                    header {
                                                                                    var-color: black;
                                                                                    }
                                                                                    footer {
                                                                                    var-color: grey;
                                                                                    }
                                                                                    — и имеем два разных значения в хедере и футере. Прямое противоречие определению константы: «неизменяемая».

                                                                                    А что собственно вас не устраивает здесь? Вот вам пример из php:

                                                                                    class Foo
                                                                                    {
                                                                                        const SOME_CONST = 1;
                                                                                    }
                                                                                    
                                                                                    class Bar
                                                                                    {
                                                                                        const SOME_CONST = 2;
                                                                                    }
                                                                                    


                                                                                    2 константы с одинаковыми именами в 2 разных областях видимости
                                                                                    • UFO just landed and posted this here
                                                                                      • UFO just landed and posted this here
                                                                                        • UFO just landed and posted this here
                                                            0
                                                            Традиционно, переменной считают некий именованный указатель на область памяти. Константой же именованное значение. Тут, по-моему, уместнее именно переменная, потому что её значение хранится где-то не как деталь реализации, а семантически — это не просто подстановка значения вместо имени, а обращение именно к памяти, где записано какое-то значение.
                                                              0
                                                              Такое определение отлично годится для вузов, но совсем не подходит для реальной жизни. В реальной же жизни компилятор (Си, например) может раскрыть ваш цикл for (i = 0; i<2;i++) в пару повторений внутренностей цикла, а переменную, которая нигде не меняет своего значения сунуть во все места по значению.

                                                              И что, эти переменные от этого становятся константами что ли?

                                                              Или почитайте как устроены константы в Перле (пятой версии), как ваше определение на него распространить?

                                                              Как ни крути, а единственное отличие переменной от константы — что константу нельзя, невозможно изменить в своей зоне видимости.
                                                              • UFO just landed and posted this here
                                                                  0
                                                                  Нет, это так не называется.
                                                                  • UFO just landed and posted this here
                                                                      +2
                                                                      Вы просто невежда. И не спорьте, со стороны виднее.
                                                                      • UFO just landed and posted this here
                                                                        • UFO just landed and posted this here
                                                                            +1
                                                                            Не передёргивайте мои слова. Дело не в том меняются или нет, а в том можно ли их менять, есть ли возможность. В CSS — нету.
                                                                            • UFO just landed and posted this here
                                                                                +1
                                                                                Да что же мне, вам второй раз разжёвывать?

                                                                                Это разные зоны видимости. Почти во всяком языке в разных зонах видимости могут иметься константы с одним именем, но разным значением.
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    Это попытка упростить тему для вас. Вижу всё ещё очень сложно. Продолжать не буду, надоело.
                                                                                    • UFO just landed and posted this here
                                                                                      • UFO just landed and posted this here
                                                                                        • UFO just landed and posted this here
                                                                                          • UFO just landed and posted this here
                                                                                            • UFO just landed and posted this here
                                                                                              • UFO just landed and posted this here
                                                                                  • UFO just landed and posted this here
                                                                                    • UFO just landed and posted this here
                                                                                      • UFO just landed and posted this here
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    покажите пример того, как поменять «переменную» в пределах одного класса CSS, объявленную в том же классе и тогда да, она будет переменной.
                                                                                    А до тех пор bolk правильно говорит — это константа.
                                                                                    • UFO just landed and posted this here
                                                                                        0
                                                                                        простите, но «.active + .active» и «.active:last-child» это уже другие классы. вы ООП знаете?
                                                                                        Вам на это SelenIT2 намекнул в своём комментарии.
                                                                                        • UFO just landed and posted this here
                                                                                          • UFO just landed and posted this here
                                                                                            • UFO just landed and posted this here
                                                                                              • UFO just landed and posted this here
                                                                                                • UFO just landed and posted this here
                                                                                                  • UFO just landed and posted this here
                                                                                                  • UFO just landed and posted this here
                                                                                                  0
                                                                                                  вы таки хотите продолжить «биться об стенку»? :)
                                                                                              • UFO just landed and posted this here
                                                                              0
                                                                              То, что он запихнет по значению — низкоуровневая деталь внутренней реализации, я же говорю про семантические абстракции на уровне языка.
                                                                                0
                                                                                Да откуда вообще в декларативном языке переменные и зачем они там?
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    Не функциональный же.
                                                                          • UFO just landed and posted this here
                                                              +1
                                                              :root {
                                                                  var-base64-logo: "data:image/png;base64,....";
                                                              }
                                                              
                                                              header .site_logo { background-image: url( $var-base64-logo ); }
                                                              
                                                              @media ... {
                                                                footer .something other { background-image: url( $var-base64-logo ); }
                                                              }


                                                              Приятная новость. Я повсеместно использую встроенные в CSS base64 изображения (data-uri). Главная проблема с которой мне пришлось столкнуться — объединение селекторов. Это довольно обширная проблема, но ключевой её частью, занозой, оказалась невозможность объединения некоторых селекторов, например, находящихся в разных @ media разделах. Если же использовать переменные, как я написал выше, то селекторы объединять вообще не потребуется.
                                                                +1
                                                                Помимо прочего пропадёт необходимость дубляжа одной и той же base64-картинки в таком коде:
                                                                .selector {
                                                                  list-style-image: url( ... );
                                                                }
                                                                .selector_2 {
                                                                  background-image: url( ... );
                                                                }
                                                                .selector_3 {
                                                                  border-image: url( ... );
                                                                }
                                                                
                                                                0
                                                                Мало что это «тот же lesscss, только вид сбоку», так еще и вид сбоку какой-то недоделанный и (пока) мало кем поддерживаемый.

                                                                Я лучше на lesscss останусь: он «просто работает» (хотел написать «в любом браузере», но я-то про компиляцию в css и выкладывание на сайт уже css — так что работать будет без проблем, не глядя на браузер), с его использованием не получим, что в несовместимом браузере будет не то чтобы анимация не работать (как в случае неподдержки свойств из css3), а элемент может вообще не так отрисоваться либо не отрисоваться вовсе (если его размеры или свойство видимости задано через переменную, а работать с переменными подопытный браузер не умеет; для совместимости придется все равно держать css без переменных — так что отличий от lesscss особо нет).

                                                                Но больше всего убил синтаксис. Могли бы из lesscss или sass взять запись переменных — всяко было бы людям привычнее. Нет, придумали свое: все дружно встали и пошли еще третий язык учить.
                                                                  0
                                                                  Да ну, «третий язык» — это dart, например. А синтаксис задания переменных — разве это проблема? Думаю, за один вечер привыкнуть можно, css все тот же… Другое дело, что пока это все внедрят и в других браузерах (и если внедрят), и сам синтаксис, и возможности могут еще много раз поменяться.
                                                                  А если все так и останется, то уверен, что появится уйма предложений типа «подключи эту js-библиотеку — и ваши нативные css-переменные будут работать как less». Или делать то же самое на уровне сборщиков типа grunt
                                                                    0
                                                                    > появится уйма предложений типа «подключи эту js-библиотеку — и ваши нативные css-переменные будут работать как less».

                                                                    И Вы мне таки поясните популярно, чем такого рода костыль лучше LESS или SASS, к которым все привыкли, и которые, если уж лень компилировать на сервере либо машине разработчика, можно запросто на клиенте точно такой же js-библиотекой ввести в игру.

                                                                    Синтаксис тут не при чем, просто поддержка этой фичи приводит нас к тому, что у нас уже есть — так зачем себе плодить лишние сущности?
                                                                    • UFO just landed and posted this here
                                                                        0
                                                                        (вздыхает)… значит, еще один костыль…

                                                                        Будем ждать!
                                                                        0
                                                                        Скорее это LESS и SASS костыли, компенсирующие недостатки CSS, и привыкли к ним далеко не все. А теперь у CSS одним недостатком стало меньше. С одной стороны и надобности в костылях теперь меньше, а с другой — теперь LESS и SASS могут (или должны?) измениться.
                                                                          0
                                                                          Дело в том, что CSS не просто так обладает этими недостатками. Да уже давно могли бы все эти фичи внедрить в CSS, но это убьет производительность CSS на порядок. У меня бывают десятки файлов SASS, которые при компиляции соединяются и ужимаются в 1. А если еще посчитать всякие Компасы и Бурбоны, так там вообще ой-ёй-ёй сколько будет. Как вы это себе на CSS представляете, даже если бы это было возможно?
                                                                            0
                                                                            Ну как-то же браузеры работают с SASS без компиляции на дев-машине или билд-сервере? Или это LESS?
                                                                      0
                                                                      Очевидно, что если у CSS-переменных будет какое-то явное преимущество, не составит труда использовать их в препроцессорах.
                                                                      0
                                                                      Вот так абстрактные стандарты становятся используемыми приемами…
                                                                        0
                                                                        Это все классно конечно, но пока «стандарт» не примут остальные «браузеры» — грош ему цена.
                                                                        Ну хорошо уже то, что начали об «этом» думать

                                                                        Only users with full accounts can post comments. Log in, please.