andreyalt 15 дек 2013 в 13:41

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

3 мин

19K

FirefoxВеб-разработка*CSS*

Из песочницы

+44

153

Комментарии 153

jil 15 дек 2013 в 14:11

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

-8

Jabher 15 дек 2013 в 15:27

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

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

Arks 15 дек 2013 в 17:57

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

-1

Jabher 15 дек 2013 в 17:59

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

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

Blumfontein 15 дек 2013 в 14:50

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

Skull 15 дек 2013 в 15:03

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

Blumfontein 15 дек 2013 в 15:35

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

НЛО прилетело и опубликовало эту надпись здесь

Blumfontein 15 дек 2013 в 19:47

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

НЛО прилетело и опубликовало эту надпись здесь

Blumfontein 15 дек 2013 в 20:12

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

leMar 16 дек 2013 в 14:27

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

Blumfontein 16 дек 2013 в 15:12

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

leMar 16 дек 2013 в 15:17

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

radist2s 15 дек 2013 в 15:36

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

VolCh 16 дек 2013 в 01:59

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

Borz 16 дек 2013 в 11:51

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

VolCh 16 дек 2013 в 19:05

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

Borz 16 дек 2013 в 19:12

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

VolCh 16 дек 2013 в 19:22

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

Borz 16 дек 2013 в 19:25

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

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

VolCh 16 дек 2013 в 23:27

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

Borz 16 дек 2013 в 23:29

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

VolCh 16 дек 2013 в 23:31

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

Borz 16 дек 2013 в 23:32

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

VolCh 17 дек 2013 в 00:52

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

leMar 16 дек 2013 в 14:28

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

-1

radist2s 16 дек 2013 в 14:50

Я вас умоляю. Я был адептом 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 16 дек 2013 в 14:41

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

А теперь, задумываюсь, а достаточно ли велики приемущества less/sass перед css с «нативными» переменными или наоборот?

radist2s 16 дек 2013 в 14:55

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

rogallic 16 дек 2013 в 15:03

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

radist2s 16 дек 2013 в 15:04

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

rogallic 16 дек 2013 в 15:18

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

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

radist2s 16 дек 2013 в 15:21

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

НЛО прилетело и опубликовало эту надпись здесь

radist2s 15 дек 2013 в 15:38

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

vanxant 15 дек 2013 в 17:54

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

Apathetic 16 дек 2013 в 15:12

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

vanxant 16 дек 2013 в 17:30

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

Apathetic 16 дек 2013 в 18:45

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

vanxant 16 дек 2013 в 18:57

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

Apathetic 16 дек 2013 в 18:58

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

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

vanxant 16 дек 2013 в 20:13

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

Apathetic 16 дек 2013 в 20:48

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

Apathetic 16 дек 2013 в 21:11

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

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

Jabher 15 дек 2013 в 15:55

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

Djamah 15 дек 2013 в 15:54

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

НЛО прилетело и опубликовало эту надпись здесь

andreyalt 15 дек 2013 в 18:00

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

bolk 15 дек 2013 в 18:16

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 19:52

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 20:03

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 20:10

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 20:20

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 21:18

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

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 21:28

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 15 дек 2013 в 21:29

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

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

НЛО прилетело и опубликовало эту надпись здесь

Blumfontein 15 дек 2013 в 23:24

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

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

class Foo
{
    const SOME_CONST = 1;
}

class Bar
{
    const SOME_CONST = 2;
}

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

НЛО прилетело и опубликовало эту надпись здесь

VolCh 16 дек 2013 в 02:06

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

bolk 16 дек 2013 в 07:12

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

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 16 дек 2013 в 15:18

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 16 дек 2013 в 18:36

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 16 дек 2013 в 19:40

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 16 дек 2013 в 20:05

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

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 16 дек 2013 в 20:11

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

НЛО прилетело и опубликовало эту надпись здесь

Borz 16 дек 2013 в 22:28

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

НЛО прилетело и опубликовало эту надпись здесь

Borz 16 дек 2013 в 23:11

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

НЛО прилетело и опубликовало эту надпись здесь

Borz 17 дек 2013 в 00:53

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

НЛО прилетело и опубликовало эту надпись здесь

VolCh 16 дек 2013 в 19:10

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

bolk 16 дек 2013 в 19:13

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

НЛО прилетело и опубликовало эту надпись здесь

VolCh 16 дек 2013 в 23:21

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

НЛО прилетело и опубликовало эту надпись здесь

faiwer 15 дек 2013 в 18:17

: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 15 дек 2013 в 18:20

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

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

achekalin 15 дек 2013 в 18:17

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

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

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

derSmoll 15 дек 2013 в 20:47

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

achekalin 15 дек 2013 в 20:56

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

achekalin 15 дек 2013 в 21:10

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

Будем ждать!

VolCh 16 дек 2013 в 02:14

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

Blumfontein 16 дек 2013 в 10:57

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