Smartfon Jan 18 2011 at 22:32

Планируемые новшества в CSS

2 min

2.8K

CSS*

Translation

+68

128

Comments 128

Autorun Jan 18 2011 at 22:47

Через некоторое время заголовок на хабре: «ООП в CSS»

+71

egoholic Jan 18 2011 at 23:12

скорос слова: «Я программирую на CSS и HTML» не будут вызывать улыбку

+21

mitrichlab Jan 18 2011 at 23:36

На мой взгляд HTML+CSS — это средства верстки контента, а никак не программирования.
И вот эти сложные заморочки принесут пользу только тем кто делает проект «в одно рыло»,
для тех же кто делает что либо в команде, все больше размывается граница между программером и верстальщиком.
В том плане, что непонятно кому из них реализовывать тот или иной ничтяк.

-18

UFO just landed and posted this here

KaLGaN Jan 19 2011 at 11:24

IDE на что тогда?

Когда (и если) такие вещи будут внедрены в спецификацию CSS и браузеры начнут поддерживать их, за ними подтянутся и нормальные среды разработки, которые позволят видеть все эти «сложные заморочки» не отрываясь от кода.

UFO just landed and posted this here

ArtyV Jan 19 2011 at 07:50

Ничего нет. Это всего лишь аналогия.

lugansk Jan 18 2011 at 22:51

>> @var paragraph-size length 12px;
Как-то коряво, в модулях фигурные скобки есть, в переменных — забыли, логичнее бы что-то такое:

@var paragraph-size {length 12px;}

UFO just landed and posted this here

lugansk Jan 18 2011 at 23:08

По смыслу — константа, по названию — @var = variable.

Не обратил внимание на тип переменной, в предыдущем комментарии после length подразумевается двоеточие,

Inquirer Jan 19 2011 at 14:53

в xsl переменные это константы, а параметры — это переменные.
DSSSL-спецификацию бы изучить, язык трансформаций sgml-размеченных документов.

lugansk Jan 18 2011 at 23:06

Т.e. что-то такое:

@var{
	paragraph-size: 12px;
	paragraph-color: rgba(0,0,0,0)
	}

UFO just landed and posted this here

lugansk Jan 18 2011 at 23:12

Нет, это объявление нескольких переменных без типов данных (length, color и т.д.)
Модули надо через use импортироватьё

Jholinar Jan 19 2011 at 11:51

так вы про примеси говорите. Зачем в переменной объявлять несколько значений, это как вообще…

lugansk Jan 22 2011 at 23:16

Не примеси: это объявление нескольких переменных в одном блоке @var вместо планируемого поштучного с непонятно зачем нужным упоминанием типа данных — не знаю, мне бы так удобнее было.

Vas3K Jan 18 2011 at 22:52

Какие хорошие хабратопики мне снятся… но я же знаю, что я сейчас сплю. Такого не бывает Мне нужен выброс и ДиКаприо…

aubt Jan 18 2011 at 23:32

нифигасе! где берешь? в личку

whynot Jan 19 2011 at 02:44

офигеть, на хабре еще плюсуют комментари в духе «отсыпь травы»

TiGR Jan 19 2011 at 10:51

Их всегда плюсуют.

dyakov Jan 18 2011 at 22:57

Только пару месяцев назад думал обо всем этом! супер!

-5

Autorun Jan 18 2011 at 22:58

Все это есть в LESS.

UFO just landed and posted this here

Autorun Jan 18 2011 at 23:08

ну не кажется мне, что это все будет иметь критический характер.

Yeah Jan 19 2011 at 03:03

LESS уже есть и работает, а вот когда это все заработает из коробки в ИЕ боооольшой вопрос.

stryaponoff Jan 19 2011 at 08:40

IE9 — уже большой скачок вперёд, так что, возможно, ребята из Редмонда что-то поняли и «больше так не будут» (с)

Yeah Jan 19 2011 at 15:13

Цикл выпуска и обновления ИЕ не идет ни в какое сравнение с аналогичными циклами других браузеров.

matiouchkine Jan 21 2011 at 16:08

Не очень понятно, почему не сказать честно: «чуваки из LESS» сделали огромный шаг вперед, теперь мы это поняли и понемного станем вводить в стандарт.

UFO just landed and posted this here

Terion Jan 19 2011 at 01:15

мечты-мечты… тут даже прямое наследование только-только применять начал, когда окончательно забил на ИЕ6, а уж такого рода конструкции и вовсе где-то за пределами астрала(

GoldenHind Jan 31 2011 at 08:47

а я уже применяю :)

тут вопрос отнюдь не технический. Вопрос в том, чтобы объяснить заказчику про graceful degradation.
И да, сделать degradation действительно graceful.

UFO just landed and posted this here

k12th Jan 19 2011 at 00:00

И ура.

UFO just landed and posted this here

k12th Jan 19 2011 at 08:34

Честно говоря, мне просто нравится XSLT:)

Inquirer Jan 19 2011 at 14:55

у них одна папа

k0rv1n Jan 18 2011 at 23:03

Классно, так и вижу конструкции
@var X 12px;
-webkit-var X 12px;
-moz-var X 12px;

+19

egoholic Jan 18 2011 at 23:10

страшно представить, как это будет выглядеть в IE

k0rv1n Jan 18 2011 at 23:12

для IE будет специальный js, который будет подсовывать ему css в привычном виде %)

egoholic Jan 18 2011 at 23:16

CSS фреймворки станут Фреймворками с большой буквы.

k0rv1n Jan 18 2011 at 23:27

я бы уже сейчас не отказался от js-фреймворка, который позволит мне писать CSS по стандартам и будет заниматься улаживанием разногласий между браузерами. мечты =)

UFO just landed and posted this here

mdss Jan 21 2011 at 13:34

selectivizr.com/
вот оно, 8 чудо света

GoldenHind Jan 31 2011 at 08:55

filter: progId:BRealityTransform.Microsoft.Variable(varName='X', varValue='12px');
-ms-filter: «progId:BRealityTransform.Microsoft.Variable(varName='X', varValue='12px')»;

чего ж тут непонятного-то…

Jholinar Jan 19 2011 at 11:55

неправильно

ваш вариант будет выглядеть как-то так

@var x length 12px;
@var y string solid;
@var z color red;

.myclass{
border: var(x) var(y) var(z);
}

k0rv1n Jan 19 2011 at 14:34

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

Jholinar Jan 19 2011 at 16:43

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

egoholic Jan 18 2011 at 23:08

SASS, LESSCSS и прочие наработки Ruby- и не только Ruby комьюнити — будущее уже сегодня.

lesscss.org/
перевод на русский: rubydev.ru/2010/05/vsya-pravda-o-less/

sass-lang.com/

Davert Jan 19 2011 at 00:34

У меня вот тоже появилось некое чувство дежа вю…

jackxxl Jan 19 2011 at 01:05

Если вышеописанные новшества реализуют почти все браузеры, будут конфликты с LESS.

-3

aubt Jan 19 2011 at 11:13

Если вы ознакомитесь, как работают вышеназванные библиотеки, вы перестанете писать ахинею.

sanch3z Jan 19 2011 at 17:11

Действительно, не совсем понятно зачем гугл придумывает свой велосипед (хотя, пускай).

Про less/sass: более того, сгруппировав все переменные, примеси и модули, мы плавно переходим к теме мета-фреймворков, типа компасса. Впрочем, многие веб-девелоперы еще не въехали в тему…

GoldenHind Jan 31 2011 at 09:01

ощущение от пары попыток познакомиться с этим чудом таково:
sass/less противоречит принципу kiss.

MTonly Jan 18 2011 at 23:13

Правильно, рабочая группа W3C по CSS явно слабо понимает, что реально нужно веб-разработчикам.

UFO just landed and posted this here

MTonly Jan 18 2011 at 23:36

Одно другому не мешает. При этом переменные и наследование (mixins) — потребности куда более фундаментальные.

UFO just landed and posted this here

MTonly Jan 19 2011 at 00:04

думаю, что мое мнение разделяет большинство верстальщиков

Скромно. ;-)

Фундамент — это синтаксис. Синтаксис CSS крайне убог и лишён тех базовых возможностей, о которых идёт речь в этой теме. Объём человеческих ресурсов, необходимых для того, чтобы единожды из продумывать и сделать стандартом, крайне мал.

MTonly Jan 19 2011 at 00:05

(из → их)

UFO just landed and posted this here

TheShock Jan 19 2011 at 02:23

Без этих «базовых» возможностей я проверстал 11 лет.

без ваших Layout Module я проверстал много лет

UFO just landed and posted this here

TheShock Jan 19 2011 at 02:37

Есть очень много вещей, которые я хотел бы видеть в CSS. И первая из них — это какие-нибудьт нормальные стандартоутверждатели, а не тормоза из W3C.

-1

UFO just landed and posted this here

sl_bug Jan 19 2011 at 02:48

стандарт это очень правильно если все браузеры его будут поддерживать :)

MTonly Jan 19 2011 at 02:48

Это «крайне мал» на самом деле несколько лет упорного труда

Несколько лет это, к сожалению, только для тормозов из CSS WG, не способных понять даже то, зачем надо добавить в спецификацию CSS подсвойства background-position-x/-y. overflow-x/-y добавили, а background-position-x/-y, видите ли, не считают оправданным. Притом, что уже существуют две независимых реализации — IE и WebKit — возьми да просто задокументируй. Теоретики.

TheShock Jan 19 2011 at 02:58

мне иногда кажется, что они — не теоретики, а мудаки

UFO just landed and posted this here

Terion Jan 19 2011 at 01:18

да микромелкие уже сами в В3Ц, и тыкать не надо.
тыкать надо гребанных недоюзеров, сидящих на ИЕ6/7.
и сжигать на кострах уродов-сисадминов, не обновляющи браузеры в корпоративных сетях.

-1

UFO just landed and posted this here

Terion Jan 19 2011 at 01:45

да, практика исключительно мажорных версий, да еще и так редко — порочна. за это действительно стоит натыкать.

UFO just landed and posted this here

fatal Jan 18 2011 at 23:23

Программисты вероломно врываются в уютное веб-дизайнерское гнёздышко ;-)

fatal Jan 18 2011 at 23:30

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

Davert Jan 19 2011 at 00:35

все это уже используется:
4 буквы: less, sass

UFO just landed and posted this here

sl_bug Jan 18 2011 at 23:46

Welcome to SASS…

Тока что реализация не совсем хорошая. Зачем этот @var? $var_name = #333; Не ужели парсер не справится?

-4

UFO just landed and posted this here

sl_bug Jan 18 2011 at 23:57

Это не php, это sass :) просто там тоже перменный с $ начинаются. а в целом это просто пример того как можно без @var обойтись.

-4

sl_bug Jan 18 2011 at 23:58

хотя да. в sass $var_name: value; :) без равно. немного забылся.

UFO just landed and posted this here

sl_bug Jan 19 2011 at 00:48

грубо говря хамл это возможность не писать закрывающие теги. и как плюс заставляет соблюдать отступы. в итоге

%div
  %span
    %p
      123

развернеться в
<div>
  <span>
    <p>123</p>
  </span>
</div>

а то что доктайп можно записывать в виде — !!! вобще красота :)

UFO just landed and posted this here

sl_bug Jan 19 2011 at 01:10

принципиально лучше на мой взгляд то что потом читать удобнее шаблон на хамле (он просто короче)

второй пункт конечно относиться к рельсам это подстановки переменных.
в коде
my_var = '123'

шаблон
.bla#ops= my_var

результат
<div class='bla' id='ops'>123</div>

третье тоже к рельсам привязано. очень часто надо сделать див с id product_123 где 123 порядковый номер продукта.
в коде @product = загрузили объект из базы. его id в базе 123

%div[@product]

<div class='product' id='product_123'>

еще много всякого. можно в доках глянуть.

з.ы. haml, а не xaml.

sl_bug Jan 19 2011 at 01:11

интерпретировать нужно (в случае если не рельсы). один скрипт написали и все. тут ничего сложного.

UFO just landed and posted this here

sl_bug Jan 19 2011 at 01:24

любой шаблонизатор можно превратить в какашку :) в том же хамле или смарти можно нахерачить циклов. ифов. вывовов моделей и т.д. а можно только выводить нужные переменные и все становится красиво :)

sl_bug Jan 19 2011 at 01:27

вывовов = выводов

sl_bug Jan 19 2011 at 01:30

насчет лишнего уровня абстракции то тут не совсем верно. конечно везде могут быть баги, но перевод %div в <div></div> довольно прост. подстановка переменных и вычислениые выражение это дело тех же рельсов. так что тут количество добавленных багов намного меньше чем количество удобств ( все же читать потом более короткий шаблон удобнее )

UFO just landed and posted this here

sl_bug Jan 19 2011 at 01:55

зачем сначала верстать html шаблон? если вы хотите макет без кода то это можно сделать и в хамле. это тот же html тока упрощенный.

UFO just landed and posted this here

sl_bug Jan 19 2011 at 02:36

smarty все-таки заточен под определенные вещи. haml это почти хтмл. если вы фотошопом режете psd и экспортируете в хтмл то никто вам потом не помешает сделать haml-convert ваш_хтмл выхож_хамл. но чаще всего процесс выглядит так: psd, порезанный psd, haml шаблон с использованием порезанных картинок.

в любом случае — на вкус и цвет товарищей нет :)

UFO just landed and posted this here

sl_bug Jan 19 2011 at 01:14

в общем-то это синтаксический сахар + уменьшение текста в шаблоне. обе вещи приятны :)

BlastBeat Jan 19 2011 at 02:03

Успокойтесь! Никаких затрат и глюков! Абстракция ХАМЛа даёт возможность сконцентрироваться над семантикой и очень легко перестраивать код. SASS — тоже прелесть, очень удобны миксины, условия (@if), переменные и импорт(инклюд файлов).
Верстаю около года для ROR проектов на HAML + SASS. До этого много лет в обычной разметке и CSS. Сейчас с ужасом смотрю на закрывающие тэги и портянки CSS'а.

Davert Jan 19 2011 at 00:35

В scss вроде уже отказались от $

sl_bug Jan 19 2011 at 00:43

не в курсе. знаю что с $ работает.

UFO just landed and posted this here

Davert Jan 19 2011 at 00:36

Не надо :) Личном не хватает Zen-coding. HAML слишком строг, как по мне.

sl_bug Jan 19 2011 at 00:52

строг он только в отступах.

Davert Jan 19 2011 at 02:04

И в выводах ошибок, а также в подставлении выражений…

k12th Jan 19 2011 at 00:06

LESS и SASS — это здорово, конечно, но меня лично радует то, что спустя лишь несколько месяцев я смогу использовать это в расширениях Chrome/Chromium.

Мое глубоко искреннее мнение заключается в том, что веб-разработчики в своем раю пишут расширения для этих браузеров.

А плохие веб-разработчики, не соблюдающие правила русской грамматики, пунктуации и типографики — верстают сайты под IE6!!11

-1

i360u Jan 19 2011 at 00:18

Я вот не понимаю, почему этого не было еще в CSS1.

SEObomj Jan 19 2011 at 00:29

Зачем?! Я вот вижу смысл только во вложении, так как часто приходится прописывать еще пару строк, чтоб задать стили для ссылки внутри пункта списка (например) и то как-то коряво смотрится и по размерам те же пару строк получается. Мне часто приходится что-то подправить или изменить в чужом шаблоне и чтоб разобраться нужно время. Как представлю, что какой-то школьник с фриланс ру сверстает шаблон с вложениями модулями, переменными, все это будет конечно в одну строчку (ну или без отбивки почти наверняка) и без каментов — волосы дыбом становятся.

SEObomj Jan 19 2011 at 00:30

*чтоб разобраться в чужом коде

sl_bug Jan 19 2011 at 00:34

переменные как раз и должны решить проблему с «что-нибудь подправить» (конечно если их правильно использовать)

SEObomj Jan 19 2011 at 00:36

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

sl_bug Jan 19 2011 at 00:55

ну это как приучить быдлокодеров :) причем учить надо еще в школе такой вещи как семантика. чтобы было понятно почему base_background_color нужно выносить в переменную, а left_to_login_box_button_under_search_field_link_color не стоит :)

tenshi Jan 19 2011 at 01:11

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

UFO just landed and posted this here

tenshi Jan 19 2011 at 02:13

уж я-то прекрасно понимаю habrahabr.ru/blogs/css/93118/ habrahabr.ru/blogs/css/92878/

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

UFO just landed and posted this here

pepelsbey Jan 19 2011 at 02:36

Не корми tenshi, это чревато.

UFO just landed and posted this here

pepelsbey Jan 19 2011 at 02:48

Держи его крепко. Троллей много, а адекватных людей совсем мало.

UFO just landed and posted this here

tenshi Jan 19 2011 at 10:30

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

pepelsbey Jan 19 2011 at 02:34

Всё хорошо, только это вам не свойство с префиксом написать, чтобы старые браузеры его не поняли. Чем сложнее обратная совместимость, тем дальше от нас все эти чудеса из CSS4. Та же история с новой спекой для раскладки.

Kindigo Jan 19 2011 at 08:20

последние редакции стандартов html и css похожи на монстра франкенштейна: кусочек отсюда, кусочек оттуда — по отдельности они хороши, но если взглянуть на картину целиком… пипец, пипец, пипец.