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

[jil]

Это как-то связано с реалиями W3?
И еще, было бы великолепно — браузер работает с SASS/LESS!

[Jabher]

нет, не великолепно. зачем вам это? less умеет компилироваться через less.js. sass, к сожалению, в браузере не рендерится, так что его можно просто компилировать или отдавать через asset pipeline.

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

[Arks]

«Вы бы еще кофескрипт предложили внедрить в браузеры.»
ммм а Dart не в счет?

[Jabher]

а что дарт? он работает только в сборке 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.

[VikentiyR]

Браузер рендерит страницу по мере её загрузки, а LESS/SASS не могут быть преобразованы в css пока все файлы, участвующие в генерации не будут загружены.

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

Лично моё мнение, что разумно сделать выбор режима отображения HTML, так как рендер по мере загрузки для современных SPA не нужен.

[Blumfontein]

Ну и сдались эти переменные сейчас, когда уже есть толковые препроцессоры. Бесполезная фича. А потом удивляемся, почему это рендеринг так тормозит

[Skull]

Думаю препроцессоры используются намного реже, чем написание сразу чистого CSS.

[Blumfontein]

Разработка на чистом CSS не стала лучше ни на йоту. Препроцессоры не только переменные умеют. Вместо того, чтобы по-человечески все делать, какие-то костыли придумывают.

[Blumfontein]

А можно пример про наследование, а то я так не понимаю, о чем речь. Получать значение переменных препроцессора в яваскрипте нельзя по определению, но зачем это может понадобиться?

[Blumfontein]

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

[leMar]

>> Препроцессоры не только переменные умеют.
Там полезное только это и math. Остальное избыточный шлак, дублирующий то что и так есть в css.

[Blumfontein]

А как же nested rules, import/include, mixins? Если для вас это шлак, то вы очень многое теряете

[leMar]

Все это можно делать без препроцессора. Поймите меня правильно. Я просто могу делать это лучше на простом css. И применение препроцессора никак не привидет к увеличению производительности для меня. А вот переменных и математики в css попросту нет. А они ой как нужны.

[radist2s]

Думаю те, кто не используют препроцессоры попусту теряют время. А один раз попробовав любой препроцессор уже ни за что не захочется обратно на Pure CSS.

[VolCh]

Хотеться может что угодно, но набор инструментария может быть ограничен «сверху».

[Borz]

приведите пример, когда вас могут «сверху» ограничить в использовании LESS в угоду Pure CSS?

[VolCh]

сss-файл лежит в репозитории и правят его несколько человек, из которых LESS использую только я. Не, есть конечно варианты синхронизации, но, имхо, главное преимущество использование LESS — упрощение и ускорение разработки — они нивелируют.

[Borz]

искусственное ограничение. Если захотите перейти, то точно так же кладётся LESS-файл в репозитарий и рутинёры продолжают писать уже в нём на Pure CSS, а новаторы на LESS и, при желании, переносить куски Pure CSS в LESS.

[VolCh]

Как они будут писать, если не знают и не хотят знать синтаксис LESS?

[Borz]

LESS позволяет писать на Pure CSS.

PS. Когда не знают, то это решается путём показания основ — дальше сами, а когда «не хотят», то «метла» решает, т.к. перейти с Pure CSS на LESS хотя бы в базовом виде не составляет проблемы для желающих

[VolCh]

Писать-то позволяет, но вот смешение ни к чему хорошему не приведет. Простой пример: вы написали тему для странички, задав цвета в переменных, чтобы менять сразу во всей теме. Я дописал один блочок и задал цвет литералом (less не знаю и знать не хочу). Вы захотели сменить цвета — теперь будете вынуждены просматривать весь код, а не просто изменить одну переменную как задумывали. А начальник я, а не вы.

[Borz]

а как сейчас вы в этом CSS задаёте этот цвет? и как решаете проблему, когда один и тот же цвет используется во множестве мест?

[VolCh]

А просто копипащу из других мест.

[Borz]

что тогда поменяется при использовании смешанной записи?..

[VolCh]

Для меня — ничего. Я скопипащу цвет из вашего кода. А вам придется менять в двух местах, потом в трех, потом где-то возникнет неоднозначность…

[leMar]

Я думаю те кто использую препроцессоры, не слишком то много использовали Pure CSS. Вернее я это знаю.

[radist2s]

Я вас умоляю. Я был адептом 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;} */
        }
    }
}

[rogallic]

За пару лет несколько раз пытался пересесть на препроцессоры и агитировал за них. Но не нашел качественных инспекторов элементов для браузеров, удобно показывающих, например, строку, из которой в исходном файле назначается свойство этого элемента:
А теперь, задумываюсь, а достаточно ли велики приемущества less/sass перед css с «нативными» переменными или наоборот?

[radist2s]

LESS с версии 1.5 умеет генерировать приличный Source Map, а Хром с тех же пор умеет его подхватывать.
Смотрите как оно у меня:

[rogallic]

Для less+chrome видел, но не нашел вариантов для ie, на этом отчаялся. По крайней мере год назад.

[radist2s]

Кскузи муа, но если вам для разработки, то зачем вас оно же для ИЕ?

[rogallic]

но если вам для разработки, то зачем вас оно же для ИЕ?

Пока отвечал, уяснил что не понял вашего вопроса.
После значительных изменений css/html, желательно посмотреть на результат в ie. И если видно несоответствие, то удобней инспектировать несоответствие в инспекторе ie, чем скакать из одного инспектора к другому, восстанавливая картину бедствия.

[radist2s]

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

[radist2s]

Не до конца согласен, так как еще есть узкие места, где для различных лейаутов (mobile, table, desktop) бывает ой как не хватает реальных переменных, а не препроцессорных.

[vanxant]

Не-не-не. Значения CSS-переменных вы можете задавать через JS или mediaquery. И это очень вкусная возможность, недоступная никаким препроцессорам.

[Apathetic]

Ничто не мешает использовать CSS-переменные в препроцессорах.

[vanxant]

Ничто не мешает, никто не спорит.
Если вам нужно сделать лейаут под 6 диапазонов разрешений, вы можете:
а) сделать препроцессором 6 мелких CSS-файлов под каждый случай
б) сделать универсальный, но большой CSS файл с шестью директивами media
в) сделать один мелкий CSS файл с CSS-переменными

[Apathetic]

г) сделать один мелкий less (например) файл с css-переменными. Не?

[vanxant]

и? Как пользователь будет это грузить? Перевернул планшет из портретного положения в альбомное и повис?

[Apathetic]

Что? Вы о чем вообще? Почему повис? Я говорю о том, что ничего не мешает использовать css-переменные в препроцессорах, а вы мне про «повис». Разумеется, в конечном счете-то используются уже обработанные css-файлы, а не .less+ less.js

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

[vanxant]

Хорошо, повторяем по второму кругу.
Итак, у вас есть набор less-файлов с переменными. Вы их можете
а) скомпилировать в один большой CSS, в котором будут медиа-блоки под все разрешения, который все будут вынуждены грузить целиком;
или б) скомпилировать несколько CSS-файлов под каждое разрешение и подключать их в зависимости от этого разрешения.
В этом случае, если юзер поворачивает планшет, разрешение по ширине изменяется, и браузеру нужно загрузить свежий CSS, что может быть долго.

[Apathetic]

Или в) в скомпилированном CSS-файле используются CSS-переменные. Вы издеваетесь?

[Apathetic]

Ну то есть вот грубый пример: что мне мешает сделать в 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.

[zyaleniyeg]

так недалеко и до «серверная часть на CSS» =)

[Jabher]

ну, игры уже на нем начали писать %)

[Djamah]

Это ж как нужно начать думать, чтоб придумать такой синтаксис?
Не, на самом деле ок, особенно задание значений по умолчанию.

[andreyalt]

Демонстрация работы CSS переменных от Кристиана Хейлмана.

[bolk]

На мой взгляд, ошибка называть их переменными, это скорее константы, что более подходит декларативному языку, которым является CSS. И потом впервые их реализовывали в Вебките, но потом почему-то выпилили. Интересно, в чём причина?

[bolk]

Типичные константы. Я не могу сделать var = var + 1 на том же уровне, могу перекрыть только уровнем выше. Это и есть константы.

[bolk]

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

[bolk]

Именно. И не более того. Это и есть константы.

[bolk]

Константы всегда именно так и работают: это имя + зона видимости и значение, которое им соответствует. В CSS — типичные константы. Имени, в этой зоне видимости, всегда соответствует одно и то же значение в CSS, это и есть константа.

[bolk]

Мне пришлось её «выдумать» потому что мне приходится объяснять вам очевидные вещи — в чём разница между переменными и константами.

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

[bolk]

Похвастаться чем? Я не понимаю. Это очевидные константы. А выбор В3 продиктован коммерческими соображениями — такое название проще «продать».

[bolk]

Я понял, что речь о текущем результате каскада-наследования, для текущих media-параметров. Термин, да, неудачный, но смысл, имхо, есть.

Да, именно про это я и говорил.

[Blumfontein]

header {
var-color: black;
}
footer {
var-color: grey;
}
— и имеем два разных значения в хедере и футере. Прямое противоречие определению константы: «неизменяемая».

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

class Foo
{
    const SOME_CONST = 1;
}

class Bar
{
    const SOME_CONST = 2;
}

2 константы с одинаковыми именами в 2 разных областях видимости

[VolCh]

Традиционно, переменной считают некий именованный указатель на область памяти. Константой же именованное значение. Тут, по-моему, уместнее именно переменная, потому что её значение хранится где-то не как деталь реализации, а семантически — это не просто подстановка значения вместо имени, а обращение именно к памяти, где записано какое-то значение.

[bolk]

Такое определение отлично годится для вузов, но совсем не подходит для реальной жизни. В реальной же жизни компилятор (Си, например) может раскрыть ваш цикл for (i = 0; i<2;i++) в пару повторений внутренностей цикла, а переменную, которая нигде не меняет своего значения сунуть во все места по значению.

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

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

Как ни крути, а единственное отличие переменной от константы — что константу нельзя, невозможно изменить в своей зоне видимости.

[bolk]

Нет, это так не называется.

[bolk]

Вы просто невежда. И не спорьте, со стороны виднее.

[bolk]

Не передёргивайте мои слова. Дело не в том меняются или нет, а в том можно ли их менять, есть ли возможность. В CSS — нету.

[bolk]

Да что же мне, вам второй раз разжёвывать?

Это разные зоны видимости. Почти во всяком языке в разных зонах видимости могут иметься константы с одним именем, но разным значением.

[bolk]

Это попытка упростить тему для вас. Вижу всё ещё очень сложно. Продолжать не буду, надоело.

[Borz]

покажите пример того, как поменять «переменную» в пределах одного класса CSS, объявленную в том же классе и тогда да, она будет переменной.
А до тех пор bolk правильно говорит — это константа.

[Borz]

простите, но «.active + .active» и «.active:last-child» это уже другие классы. вы ООП знаете?
Вам на это SelenIT2 намекнул в своём комментарии.

[Borz]

вы таки хотите продолжить «биться об стенку»? :)

[VolCh]

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

[bolk]

Да откуда вообще в декларативном языке переменные и зачем они там?

[VolCh]

Не функциональный же.

[faiwer]

: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 разделах. Если же использовать переменные, как я написал выше, то селекторы объединять вообще не потребуется.

[faiwer]

Помимо прочего пропадёт необходимость дубляжа одной и той же base64-картинки в таком коде:

.selector {
  list-style-image: url( ... );
}
.selector_2 {
  background-image: url( ... );
}
.selector_3 {
  border-image: url( ... );
}

[achekalin]

Мало что это «тот же lesscss, только вид сбоку», так еще и вид сбоку какой-то недоделанный и (пока) мало кем поддерживаемый.

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

Но больше всего убил синтаксис. Могли бы из lesscss или sass взять запись переменных — всяко было бы людям привычнее. Нет, придумали свое: все дружно встали и пошли еще третий язык учить.

[derSmoll]

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

[achekalin]

> появится уйма предложений типа «подключи эту js-библиотеку — и ваши нативные css-переменные будут работать как less».

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

Синтаксис тут не при чем, просто поддержка этой фичи приводит нас к тому, что у нас уже есть — так зачем себе плодить лишние сущности?

[achekalin]

(вздыхает)… значит, еще один костыль…

Будем ждать!

[VolCh]

Скорее это LESS и SASS костыли, компенсирующие недостатки CSS, и привыкли к ним далеко не все. А теперь у CSS одним недостатком стало меньше. С одной стороны и надобности в костылях теперь меньше, а с другой — теперь LESS и SASS могут (или должны?) измениться.

[Blumfontein]

Дело в том, что CSS не просто так обладает этими недостатками. Да уже давно могли бы все эти фичи внедрить в CSS, но это убьет производительность CSS на порядок. У меня бывают десятки файлов SASS, которые при компиляции соединяются и ужимаются в 1. А если еще посчитать всякие Компасы и Бурбоны, так там вообще ой-ёй-ёй сколько будет. Как вы это себе на CSS представляете, даже если бы это было возможно?

[VolCh]

Ну как-то же браузеры работают с SASS без компиляции на дев-машине или билд-сервере? Или это LESS?

[Apathetic]

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

[Moskus]

Вот так абстрактные стандарты становятся используемыми приемами…

[maxic]

Это все классно конечно, но пока «стандарт» не примут остальные «браузеры» — грош ему цена.
Ну хорошо уже то, что начали об «этом» думать