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
Share post

Similar posts

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 не стала лучше ни на йоту. Препроцессоры не только переменные умеют. Вместо того, чтобы по-человечески все делать, какие-то костыли придумывают.
                +3
                А препроцессоры умеют наследовать переменные (а вложен может быть другой элемент с другими классами и атрибутами) и получать их значение из яваскрипта?
                  0
                  А можно пример про наследование, а то я так не понимаю, о чем речь. Получать значение переменных препроцессора в яваскрипте нельзя по определению, но зачем это может понадобиться?
                    +1
                    В спецификации всё описано:
                    www.w3.org/TR/css-variables/

                    > Inherited: yes

                    API:
                    www.w3.org/TR/css-variables/#cssom

                    Пример:
                    el.style.var.get("foo")
                    el.style.var.set("Bar", "red")

                    Понадобиться это может для передачи данных. При установке нового значения, его действие автоматически распространяется на всё что её использует.
                      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. И потом впервые их реализовывали в Вебките, но потом почему-то выпилили. Интересно, в чём причина?
                                  0
                                  Это не константы, переменные обладают всеми свойствами CSS: каскадом, наследованием, и могут быть переопределены на вложенных элементах.
                                    0
                                    Типичные константы. Я не могу сделать var = var + 1 на том же уровне, могу перекрыть только уровнем выше. Это и есть константы.
                                      0
                                      На том же уровне чего? Переопределение в одном правиле не имеет смысла в CSS, так же как не имеет смысла два ключа с одним именем в одном хэше.
                                        +3
                                        Например, чтобы для каждого следующего элемента, который затрагивается этим правилом, было другое значений того же свойства. Вот тогда это была бы переменная. Сейчас же это — константа. В том блоке где она используется, у неё всегда то же самое значение.
                                          0
                                          > Например, чтобы для каждого следующего элемента, который затрагивается этим правилом, было другое значений того же свойства

                                          Это вполне возможно, если другое, более специфичное, правило задаёт другое значение той же переменной. Как и обычное свойство CSS.
                                            0
                                            Именно. И не более того. Это и есть константы.
                                              +1
                                              Константа — постоянная. Задана раз и навсегда. Являются ли переменные постоянными? Нет, они могут быть переопределены в любой момент. Другим css-файлом, другим правилом, из яваскрипта. Какая же это константа?! Они созданы для того, чтобы их меняли. Иначе можно просто прямым текстом писать как и раньше.

                                              Более того, в CSS можно задавать одному свойству, в том числе и переменным, разные значения в зависимости от вложенности с помощью toggle(): www.w3.org/TR/css3-values/#toggle
                                                +1
                                                Константы всегда именно так и работают: это имя + зона видимости и значение, которое им соответствует. В CSS — типичные константы. Имени, в этой зоне видимости, всегда соответствует одно и то же значение в CSS, это и есть константа.
                                                  0
                                                  el.style.var.set(«Bar», «red») // оп-па, значение поменялось!
                                                  • UFO just landed and posted this here
                                                      0
                                                      > Тогда все значения CSS-свойств можно называть переменными
                                                      Разумеется. Яваскрипт — вообще динамический язык и в нём всё меняется. Не приходило в голову, почему в нём нет констант?

                                                      А разве что-то мешает использовать calc() в var?

                                                      А bolk неправ с того момента как выдумал какую-то «область видимости» в CSS, не имеющую под собой никакого смысла.
                                                        +1
                                                        Мне пришлось её «выдумать» потому что мне приходится объяснять вам очевидные вещи — в чём разница между переменными и константами.

                                                        Ну и в JS есть константы: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const, недавно появились в явном виде. Кроме того, там же есть readonly-свойства, а поскольку переменные в JS это свойства, то можно считать, что «переменные» которые нельзя менять (т.е. константы) в JS уже много лет как есть.
                                                          0
                                                          Что же для вас не очевидно прямое свидетельство, что вы прибегаете к косвенному выдуманному подобию?

                                                          Напишите на рассылку www-style на w3.org или сразу редакторам спецификации, расскажите, какие они дураки, что выбрали неверное название. Или только на хабре способны похвастаться?
                                                            0
                                                            Похвастаться чем? Я не понимаю. Это очевидные константы. А выбор В3 продиктован коммерческими соображениями — такое название проще «продать».
                                                            • UFO just landed and posted this here
                                                                0
                                                                Это старая страница, 2008 год. Таб Аткинс по сути предложил новую спецификацию как раз после того как было отклонено на предыдущее предложение, в том числе, вероятно, и из-за этого отзыва.

                                                                Именно в новой спецификации появились каскадность, изменяемость и все прелести CSS. Берт Бос явно говорил о другом.
                                                                • UFO just landed and posted this here
                                                                    0
                                                                    Я вообще не вижу никакой разницы между переменными, скажем, в языке яваскрипт и в языке CSS. Конечно, в CSS переменные не меняют значение, пока его не поменяют. Но и в яваскрипте — внезапно! — переменные не меняют значения, пока его не поменяют. Те кто этого не понимают, не понимают всей специфики CSS.
                                                                    • UFO just landed and posted this here
                                                                        0
                                                                        То есть если я сделаю свою сборку V8 без унарных операторов, переменные станут константами? Нельзя же вторичные признаки трактовать как первичные!
                                                                        • UFO just landed and posted this here
                                                                            0
                                                                            А что тут приводить? Переменные не меняются, пока их не переопределят, что в JS, что в CSS. Унарные операторы — то же переопределение, эквивалент сложению и присваиванию нового значения.
                                                                            • UFO just landed and posted this here
                                                                                0
                                                                                В CSS каскад и наследование. Другая специфика.
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    Надо просто осознать специфику и всё станет на свои места.
                                                          • UFO just landed and posted this here
                                                              0
                                                              Я понял, что речь о текущем результате каскада-наследования, для текущих media-параметров. Термин, да, неудачный, но смысл, имхо, есть.
                                                              Да, именно про это я и говорил.
                                                                0
                                                                > А CSS? Обсуждаются-то переменные в нем, а не сторонние средства;)

                                                                Ничего стороннего. Всё в браузере, всё едино, и всё динамично. Это же очевидно.

                                                                > Я понял, что речь о текущем результате каскада-наследования…

                                                                Результат есть следствие. Судить по результату о причине, это как судить о том что мы едим по тому, что из нас, пардон, выходит.
                                                                • UFO just landed and posted this here
                                                                    0
                                                                    > Поставил себе NoScript, и внезапно уже нет:).

                                                                    API всё равно есть. А используется или нет — другой вопрос. А то я в яваскрипте не буду менять переменные и на основании этого говорить, что они константы.

                                                                    > А то зачем те же медиавыражения вводили, когда можно скриптом всё померить и поменять?

                                                                    Судя по изысканием ppk померять можно далеко не всё. Например, тот же device-aspect-ratio можно замерить только через API Media Queries.

                                                                    Ну и зачем CSS, если всё можно сделать через HTML 3.2 и javascript, если уж доводить до абсурда?

                                                                    > врачам такой прием часто помогает в диагностике пищевых отравлений и т.п.:)

                                                                    Именно, диагностике, а не: «вы ели навоз».
                                                                    • UFO just landed and posted this here
                                                                        0
                                                                        Хм-м, давайте-ка подумаем. Константа, которую можно менять… Переменная константа… Переменная… Переменная!</sarcasm>

                                                                        Ей-богу, странно видеть на хабре такое откровенное иезуитство.
                                                                        • UFO just landed and posted this here
                                                                            0
                                                                            Что значит нельзя поменять средствами CSS? Добавили новое правило, подействовало другое правило, переопределили на каком-то этапе — значение поменялось.
                                                                            • UFO just landed and posted this here
                                                                                0
                                                                                Что же это за константа такая, которая в разных местах может иметь разные значения? Это же очевидная глупость! Например:
                                                                                header {
                                                                                var-color: black;
                                                                                }
                                                                                footer {
                                                                                var-color: grey;
                                                                                }
                                                                                — и имеем два разных значения в хедере и футере. Прямое противоречие определению константы: «неизменяемая».
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    Единственная «область видимости» в обсуждении CSS, которая имеет «физический смысл» и подходит под «критерии применимости» — это документ.
                                                                                    • UFO just landed and posted this here
                                                                                        0
                                                                                        Это не область видимости, это определение свойств, попадаемых на элемент. Сменились media queries, например, — сменились свойства.
                                                                                        • 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 разных областях видимости
                                                                                      0
                                                                                      footer p {
                                                                                      var-color: grey
                                                                                      }
                                                                                      main p {
                                                                                      var-color: black
                                                                                      }

                                                                                      <main>
                                                                                      <p>black</p>
                                                                                      <footer>
                                                                                      <p>black — сюрприз!</p>
                                                                                      </footer>
                                                                                      </main>

                                                                                      <footer>
                                                                                      <p>grey</p>
                                                                                      </footer>

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

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

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

                                                              Как ни крути, а единственное отличие переменной от константы — что константу нельзя, невозможно изменить в своей зоне видимости.
                                                                0
                                                                Это называется: «ум за разум заходит».
                                                                  0
                                                                  Нет, это так не называется.
                                                                    0
                                                                    Со стороны лучше видно.
                                                                      +2
                                                                      Вы просто невежда. И не спорьте, со стороны виднее.
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          На самом деле, поразмышляв утром, я всё понял. Для bolk'а всё константа.

                                                                          Всё просто: по определению Евгения, константа — то, что не меняется в области видимости. Значит, все переменные являются константой, ведь не меняются, пока с ними что-то не сделать. А что-то сделав, мы меняем «область видимости».

                                                                          Время для bolk'а тоже является константой. Ведь время — это четвёртое измерение, и мы перемещаемся по нему, другими словами, просто меняем «область видимости».

                                                                          Тогда всё существующее в мире тоже константа. Потому что оно меняется со временем, которое, как мы уже выяснили, константа. А значит меняется только при смене «области видимости».

                                                                          Для него весь мир константа! Выходит, bolk, возможно сам того не подозревая, исповедует новое учение, назовём его «константианство». А в вопросах веры, действительно, спорить не стоит.
                                                                            +1
                                                                            Не передёргивайте мои слова. Дело не в том меняются или нет, а в том можно ли их менять, есть ли возможность. В CSS — нету.
                                                                              0
                                                                              body { var-color: red }
                                                                              body>footer { var-color: blue }

                                                                              > Дело не в том меняются или нет, а в том можно ли их менять, есть ли возможность. В CSS — нету.

                                                                              По вашим словам, вторая строчка не должна иметь действия, что противоречит спецификации. А главное, CSS не имеет смысла сам по себе. Он применяется к документам в браузерах. И там значения могут меняться как угодно.
                                                                                +1
                                                                                Да что же мне, вам второй раз разжёвывать?

                                                                                Это разные зоны видимости. Почти во всяком языке в разных зонах видимости могут иметься константы с одним именем, но разным значением.
                                                                                  0
                                                                                  Нет никакой «зоны видимости» — это всё ваши фантазии.
                                                                                    0
                                                                                    Это попытка упростить тему для вас. Вижу всё ещё очень сложно. Продолжать не буду, надоело.
                                                                                    • UFO just landed and posted this here
                                                                                        0
                                                                                        В CSS нет понятия «область видимости». Совокупность — всего лишь совокупность, и, как я говорил, она может меняться.
                                                                                        • UFO just landed and posted this here
                                                                                            0
                                                                                            > По-моему, это чисто вопрос терминологии.
                                                                                            О том и речь, нет такой терминологии. Можно придумать стопятьсот учений, но к реальности или обычному общепринятому соглашению они не будут иметь отношения.

                                                                                            > Кроме того, наткнулся вот на CSS3.info…
                                                                                            Ага, всё тот же 2008 год… Всё же не дураки после этого спецификацию писали.
                                                                                            • UFO just landed and posted this here
                                                                                                0
                                                                                                Все учения содержат в себе искажения. Как правило, в чью-то корыстную пользу. И это их фатальный недостаток.
                                                                                  • UFO just landed and posted this here
                                                                                      0
                                                                                      Why not?
                                                                                      body { var-color: red !important }
                                                                                      body>footer { var-color: blue }
                                                                                      • UFO just landed and posted this here
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    покажите пример того, как поменять «переменную» в пределах одного класса CSS, объявленную в том же классе и тогда да, она будет переменной.
                                                                                    А до тех пор bolk правильно говорит — это константа.
                                                                                      0
                                                                                      Вы CSS не знаете? Например:
                                                                                      .active { var-color: blue }
                                                                                      .active + .active { var-color: orange }
                                                                                      .active:last-child { var-color: green }
                                                                                        0
                                                                                        простите, но «.active + .active» и «.active:last-child» это уже другие классы. вы ООП знаете?
                                                                                        Вам на это SelenIT2 намекнул в своём комментарии.
                                                                                          0
                                                                                          Вас несёт куда-то не в ту степь. Это один и тот же класс active. В html (а CSS без HTML не имеет смысла) будет выглядеть так:
                                                                                          <span class="active"></span>
                                                                                          <span class="active"></span>
                                                                                          <span class="active"></span>
                                                                                          Три одинаковых элемента, у каждого из которых будет свой стиль.
                                                                                          • UFO just landed and posted this here
                                                                                              0
                                                                                              На то он и селектор.
                                                                                              • UFO just landed and posted this here
                                                                                                  0
                                                                                                  Вообще-то всегда можно переопределить, я же ниже написал:
                                                                                                  habrahabr.ru/post/206096/#comment_7105126
                                                                                                  Только в пределах одного блока объявлений это не имеет смысла. Но можно же :).
                                                                                                  • UFO just landed and posted this here
                                                                                                    0
                                                                                                    Вообще свойства в CSS тоже можно поменять на каждом шагу. Просто шаги здесь не такие как в других языках. Переменные здесь не исключение, поэтому они и переменные.
                                                                                                  0
                                                                                                  вы таки хотите продолжить «биться об стенку»? :)
                                                                                                0
                                                                                                Более того, если хотите можете и для одного объявления менять.
                                                                                                Например:
                                                                                                .foo { var-bar: 16 } /* скажем, в bootstrap.css */
                                                                                                .foo { var-bar: 42 } /* yousite.css */
                                                                              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.