Smartfon 18 янв 2011 в 19:32

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

2 мин

2.8K

CSS *

Перевод

+68

128

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

Autorun 18 янв 2011 в 19:47

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

egoholic 18 янв 2011 в 20:12

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

mitrichlab 18 янв 2011 в 20:36

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

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

KaLGaN 19 янв 2011 в 08:24

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

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

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

ArtyV 19 янв 2011 в 04:50

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

lugansk 18 янв 2011 в 19:51

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

@var paragraph-size {length 12px;}

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

lugansk 18 янв 2011 в 20:08

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

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

Inquirer 19 янв 2011 в 11:53

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

lugansk 18 янв 2011 в 20:06

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

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

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

lugansk 18 янв 2011 в 20:12

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

Jholinar 19 янв 2011 в 08:51

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

lugansk 22 янв 2011 в 20:16

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

Vas3K 18 янв 2011 в 19:52

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

aubt 18 янв 2011 в 20:32

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

whynot 18 янв 2011 в 23:44

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

TiGR 19 янв 2011 в 07:51

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

dyakov 18 янв 2011 в 19:57

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

Autorun 18 янв 2011 в 19:58

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

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

Autorun 18 янв 2011 в 20:08

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

Yeah 19 янв 2011 в 00:03

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

stryaponoff 19 янв 2011 в 05:40

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

Yeah 19 янв 2011 в 12:13

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

matiouchkine 21 янв 2011 в 13:08

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

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

Terion 18 янв 2011 в 22:15

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

GoldenHind 31 янв 2011 в 05:47

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

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

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

k12th 18 янв 2011 в 21:00

И ура.

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

k12th 19 янв 2011 в 05:34

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

Inquirer 19 янв 2011 в 11:55

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

k0rv1n 18 янв 2011 в 20:03

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

egoholic 18 янв 2011 в 20:10

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

k0rv1n 18 янв 2011 в 20:12

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

egoholic 18 янв 2011 в 20:16

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

k0rv1n 18 янв 2011 в 20:27

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

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

mdss 21 янв 2011 в 10:34

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

GoldenHind 31 янв 2011 в 05:55

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

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

Jholinar 19 янв 2011 в 08:55

неправильно

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

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

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

k0rv1n 19 янв 2011 в 11:34

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

Jholinar 19 янв 2011 в 13:43

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

egoholic 18 янв 2011 в 20:08

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

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

sass-lang.com/

Davert 18 янв 2011 в 21:34

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

jackxxl 18 янв 2011 в 22:05

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

aubt 19 янв 2011 в 08:13

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

sanch3z 19 янв 2011 в 14:11

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

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

GoldenHind 31 янв 2011 в 06:01

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

MTonly 18 янв 2011 в 20:13

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

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

MTonly 18 янв 2011 в 20:36

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

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

MTonly 18 янв 2011 в 21:04

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

Скромно. ;-)

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

MTonly 18 янв 2011 в 21:05

(из → их)

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

TheShock 18 янв 2011 в 23:23

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

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

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

TheShock 18 янв 2011 в 23:37

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

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

sl_bug 18 янв 2011 в 23:48

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

MTonly 18 янв 2011 в 23:48

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

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

TheShock 18 янв 2011 в 23:58

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

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

Terion 18 янв 2011 в 22:18

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

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

Terion 18 янв 2011 в 22:45

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

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

fatal 18 янв 2011 в 20:23

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

fatal 18 янв 2011 в 20:30

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

Davert 18 янв 2011 в 21:35

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

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

sl_bug 18 янв 2011 в 20:46

Welcome to SASS…

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

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

sl_bug 18 янв 2011 в 20:57

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

sl_bug 18 янв 2011 в 20:58

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

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

sl_bug 18 янв 2011 в 21:48

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

%div
  %span
    %p
      123

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

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

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

sl_bug 18 янв 2011 в 22: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 18 янв 2011 в 22:11

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

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

sl_bug 18 янв 2011 в 22:24

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

sl_bug 18 янв 2011 в 22:27

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

sl_bug 18 янв 2011 в 22:30

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

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

sl_bug 18 янв 2011 в 22:55

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

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

sl_bug 18 янв 2011 в 23:36

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

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

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

sl_bug 18 янв 2011 в 22:14

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

BlastBeat 18 янв 2011 в 23:03

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

Davert 18 янв 2011 в 21:35

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

sl_bug 18 янв 2011 в 21:43

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

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

Davert 18 янв 2011 в 21:36

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

sl_bug 18 янв 2011 в 21:52

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

Davert 18 янв 2011 в 23:04

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

k12th 18 янв 2011 в 21:06

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

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

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

i360u 18 янв 2011 в 21:18

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

SEObomj 18 янв 2011 в 21:29

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

SEObomj 18 янв 2011 в 21:30

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

sl_bug 18 янв 2011 в 21:34

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

SEObomj 18 янв 2011 в 21:36

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

sl_bug 18 янв 2011 в 21:55

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

tenshi 18 янв 2011 в 22:11

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

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

tenshi 18 янв 2011 в 23:13

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

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

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

pepelsbey 18 янв 2011 в 23:36

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

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

pepelsbey 18 янв 2011 в 23:48

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

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

tenshi 19 янв 2011 в 07:30

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

pepelsbey 18 янв 2011 в 23:34

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

Kindigo 19 янв 2011 в 05:20

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