@devaka6 авг 2011 в 14:36

Будущее CSS разметки

8 мин

14K

CSS *

+89

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

@shakalaka 6 авг 2011 в 14:59

светлое будущее

@MarcusAurelius 6 авг 2011 в 15:12

О дайте, дайте мне переменные в CSS и выражения с переменными (математические и строковые хотя бы).

@drak 6 авг 2011 в 15:26

Попробуйте less css. Там все это есть.

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

@drak 6 авг 2011 в 15:53

Переменные есть, выражения с переменными есть.

lesscss.org/

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

@Bardt 7 авг 2011 в 06:34

Переменные в lesscss по сути — это константы. На ходу изменять их нельзя.

@VasilioRuzanni 6 авг 2011 в 16:07

Вещи, вроде SASS и LESS — по большому счету, хаки — закрывающие недостатки современной модели самого CSS.

@drak 6 авг 2011 в 16:34

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

@VasilioRuzanni 6 авг 2011 в 21:58

Ну с этим то я ни спорю :) Самому очень нравятся эти штуки.

@wolfcf 6 авг 2011 в 16:23

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

@egoholic 6 авг 2011 в 16:36

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

@Serator 6 авг 2011 в 23:59

На этот случай придумали функцию calc.

@caffeinum 6 авг 2011 в 15:27

Как иллюстрация к названию, у меня не загрузился CSS :)

@MaksimMukharev 6 авг 2011 в 15:31

> Похоже, что IE10 будет предвестником новой эры CSS разметки

Да ну? ИЕ же не использует не утвержденные стандарты вроде как? Или уже использует? Определились бы уже наконец.

> но расширенное свойство в IE10PP позволяет усовершенствовать плавающий элемент

Начинается опять… Может стоит сначала полностью со старыми возможностями разобраться?

@hf35 6 авг 2011 в 15:59

Грид лайот — придуман МС и соотсвенно реализован раньше в ИЕ.

>>Начинается опять… Может стоит сначала полностью со старыми возможностями разобраться?
Чего не умеет ИЕ10 из того что вам нужно?

@MaksimMukharev 6 авг 2011 в 16:08

Самое главное, чем не умеет ни одна версия ИЕ — грамотное обновление своих устаревших собратьев.

Какие конкретно сюрпризы нам принесет ИЕ10 мы еще узнаем в будущем, как обычно.

@akzhan 7 авг 2011 в 06:16

Давно реализовано через Windows Update (на маминой машине IE обновился до 9 версии именно через этот механизм, автоматически).

Другое дело, что не везде этот механизм включен администраторами.

@MaksimMukharev 7 авг 2011 в 06:27

В теории.

Вынужден вас расстроить, но это и есть неграмотный механизм. Windows Update все сваливает в одну кучу и с ним практически невозможно работать. У меня на одном компьютере включен апдейт автоматический, так компьютером практически невозможно пользоваться — он постоянно находится на обслуживании (обновляется, тормозит, просит перезагрузиться). Браузер ДОЛЖЕН обновляться отдельно от системы.

Во-вторых, Windows Update действительно чаще всего выключают. Например те, кто использует нелицензионный Windows. Это данность. Но причем тут обновление бесплатного браузера? Он все равно должен обновляться.

В-третьих, ИЕ9, как мы все знаем, не ставится на XP. ИЕ10 очевидно тоже не будет.

@CAH4A 6 авг 2011 в 16:10

IE10 пока что не поддерживает Transition и Text Shadow. А это одно из самых замечательных свойств CSS3!

www.findmebyip.com/litmus/

@aps 6 авг 2011 в 17:37

> Text Shadow — одно из самых замечательных свойств CSS3!
Text Shadow — самое страшное оружие в руках говнодизайнера.

@CAH4A 6 авг 2011 в 18:14

Text Shadow совсем не помеха говнодизайнерам.
Да и при чём тут дизайн то?

@Bardt 7 авг 2011 в 06:42

Не понимаю с чего вдруг про дизайнеров вспомнили. Хорошие дизайнеры пришедшие в веб дизайн из полиграфии часто используют аккуратные тени на шрифтах для создания эффекта объема или вдавленности. Главное — все хорошо в меру.

Если так рассуждать, то наличие огромной палитры цветов — тоже страшное оружие в руках говнодизайнеров

@egoholic 7 авг 2011 в 11:27

Да, давно пора вернуться к безопасным цветам =))

@akzhan 7 авг 2011 в 06:18

с другой стороны, часть переходов и тени давно реализованы в IE в виде фильтров (с версии 5.5, если не ошибаюсь).

меня больше волнует поддержка WebSockets.

@hf35 7 авг 2011 в 10:47

За всю жизнь ни на одном сайте не видел использования text shadow — при том что он достаточно просто эмулируется через JS.

@CAH4A 7 авг 2011 в 20:36

Разве кнопки с эффектом вдавленности или выпуклости не разу не видели? )
Вот раньше их делали картинками.

@hf35 8 авг 2011 в 13:19

Причем тут кнопки? Там box-shadow используется скорее. Он в ИЕ 10 есть, и даже в 9 есть

@CAH4A 8 авг 2011 в 13:48

Я про однопиксельную белую тень.

@walkman7 6 авг 2011 в 15:33

В этом примере ширина колонки установлена в 140px, значит в блоке шириной /800px/ (700px) должно появиться пять колонок:

@Bardt 7 авг 2011 в 13:14

Ширина указана правильно. Автор Хотел продемонстрировать, что в оставш еся 100 колонка не влезет, поэтому фактически их будет всего пять

@walkman7 7 авг 2011 в 20:03

извиняюсь, мой косяк

@d1p 6 авг 2011 в 15:45

Будущее здесь, а все равно приходится ждать.

@vanxant 6 авг 2011 в 15:51

Огромная просьба поправить терминологию: «табличная верстка» в русском твердо закрепилась за версткой при помощи table. Верстку же при помощи grid лучше перевести как «сеточную», а само слово grid — как «сетку», а не как «таблицу».

@bnoss 6 авг 2011 в 16:03

Очень интересные и полезные нововведения планируются. Насколько я понял — первые две уже реализованы в современных браузерах (кроме ИЕ), а остальные всё еще в планах?

@JhaoDa 6 авг 2011 в 16:05

Grid layout, конечно, круто. Эдак раз — и десятью строками разметил весь макет. Эх, когда же столь прекрасное время наступит…

@s0rr0w 6 авг 2011 в 19:19

На примитивных примерах да. Чуть добавьте динамики и все, приехали. Костыли на костылях будут.

@JhaoDa 7 авг 2011 в 03:57

Динамика в фундаментальных блоках? Типа, хедер с футером двигаются?

@s0rr0w 7 авг 2011 в 07:23

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

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

@danSamara 7 авг 2011 в 06:53

И какие будут костыли? Расставить несколько классов и прописать эти классы в CSS?

@s0rr0w 7 авг 2011 в 07:29

У нас есть вот такой темплейт

a b b

a b b

c b b

Блок поставили в "с". Потом понадобилось переставить его последним к блокам в секции "a", а сам лейаут заменить на другой, если в секции "с" не осталось ни одного блока.

Мне вот интересно, как вы будете последний пункт исполнять…

@JhaoDa 7 авг 2011 в 09:39

Ну никто же не говорит, что grid — панацея. Тем не менее, в 90% случаев фундаментальные блоки неизменны и постоянны.

@danSamara 7 авг 2011 в 10:16

Это динамика на стороне клиента, которая решается скриптами, про какие костыли речь?
Как надо, по-вашему, это делать правильно?

@s0rr0w 7 авг 2011 в 17:38

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

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

@VasilioRuzanni 6 авг 2011 в 16:13

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

P.S. В CSS всегда «не радовало» то, что смешаны атрибуты задания внешнего вида (цвета, бэкграунды, прозрачности, и прочее) и структуры (позиция, обтекания, размеры, отступы и прочее).

@DanStrogiy 6 авг 2011 в 17:01

Поскорее бы.

@dyakov 6 авг 2011 в 17:23

Смущает то, что без префиксов всё это внедряется… Сhrome и Firefox по-интелегентному, с префиксами, мало ли чего… Из-за этого у меня, честно, никакой радости — больше проблем будет потом скорее всего!

@Tesla 7 авг 2011 в 07:02

Каких, например?.. Для меня вот проблема прописывание border-radius, -moz-border-radius и webkit-border-radius вместо одного свойства.

@dyakov 7 авг 2011 в 07:07

Примерно такие, какие были с box-model в IE5. Стандарт не утвержден, а MS уже всё реализовала

@Tesla 7 авг 2011 в 07:25

Ну если во всех (основных) браузерах делают один и тот же функционал, то почему бы не называть его одним и тем же именем?

@dimonRUS66 6 авг 2011 в 18:28

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

@s0rr0w 6 авг 2011 в 19:21

А display: table вам чем не угодил?

@dimonRUS66 6 авг 2011 в 19:54

По моему grid выглядит изящнее. Если я правильно понимаю, то содержимое в коде можно размещать произвольно, а потом с помощью CSS «расставлять» его как надо. Например, основной контент можно поместить в начало кода страницы, а всякие сайдбары уже за ним. Поисковым роботам это наверняка понравится

@s0rr0w 6 авг 2011 в 21:23

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

Расставить все в первый и последний раз и больше никогда не трогать страницу — вполне удобно будет (ну, если удобным можно назвать тонны кода, которые придется написать, судя по примерам), а вот что дальше с этим одороблом делать, одному только Майкрософту известно.

@dimonRUS66 6 авг 2011 в 23:58

Вы сами себе проблемы выдумываете. Посмотрите на html-код этого примера. Ничего лишнего нет. Есть только основные логические блоки, которые CSS-ом вставляются в нужные места сетки. Теперь попробуйте сверстать это DIVами с помощью display:table. Придется же основное содержимое заворачивать в другие дивы просто для того чтобы расставить все по местам. А в CSS будет display:table-row, display:table-cell, display:table-column — попробуй разберись какой ряд и ячейка.

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

@s0rr0w 7 авг 2011 в 07:45

Руки оторвать тому кодеру, который такой примитивный пример придумал сделать на гридах.

@ambientos 6 авг 2011 в 20:09

Баян.
Но что-то мне кажется, после этих наворотов будет только хуже.

@s0rr0w 6 авг 2011 в 21:24

Да не, все нафиг пошлют все эти вые**ны и будут верстать так, как проще. А это уж никак не «сетками».

@VolCh 7 авг 2011 в 02:20

Хз, хз. Если это действительно позволит отделить логическую и семантическую разметку от представления, то вполне можно ожидать вообще изменение сценариев над сайтами, в частности функцию верстальщиков, которые будут получать на входе HTML-разметку (все эти семантические плюшки HTML5) и «картинку», а и их задачей будет сделать только CSS. Не нужно будет никаких врапперов, не будет иметь значение порядок блоков и т. п. В общем то, что пытались сделать с помощью XML+XSLT=XSL-FO

@s0rr0w 7 авг 2011 в 08:03

Для статических страниц может это и будет работать, а вот для интерфейсов…

Интерфейсы DOM для управления контентом HTML в разы лучше и удобнее чем CSSOM. В текущем стандарте придется реализовать парсер CSS на JS, чтобы нормально управлять отображением только через CSS, а это немного дороговатое удовольствие во всех смыслах

@VolCh 7 авг 2011 в 08:51

Никто не говорит про управление только CCS'ом — если нам нужен узел, которого нет в изначальном документе, то естественно обратимся к DOM чтобы его создать. И задавать CSS свойства динамически через DOM никто не запрещает. Но вот решил пользователь сменить раскладку виджетов на своей дашборде с 5х3 на 3х5. По-моему описанными методами это сделать намного проще, чем в CSS2.1 — заменить одной строчкой JS display: 'abcde' 'fghij' 'klmno' на display: 'abc' 'def' 'ghi' 'jkl' 'mno' разве не проще чем, скажем убирать float:none в трех местах и ставить их в пяти или создавать два tr и раскидывать между ними td по новой?

@JohnnyD 9 авг 2011 в 19:49

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

@f0rk 7 авг 2011 в 11:25

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

@VolCh 7 авг 2011 в 11:39

Плохо он справляется, чтоб далеко не ходить нажмите Ctrl+U и увидите в частности

<div id="wrapper">
<div id="inner" >

или

<div class="live bloginfo"> 
 
	<div class="bg-bott-r"><!-- for bottom rounded corners --> 
	<div class="bg-bott-l"> 
...
	</div> 
	</div><!-- // for bottom rounded corners -->

Что-то мне подсказывает, что к логической структуре этой страницы эти теги отношения не имеют

@vanxant 7 авг 2011 в 11:41

Скажем, такие простые вещи как колонки очень геморно делаются с помощью JS, потому как много подводных гитик. И это очень востребованная и типичная вещь в эпоху широких, но невысоких мониторов.

@Dark_MX 18 сен 2011 в 14:08

Приписку на сайте нужно выводить «Для лучшего отображения контента поверните монитор на 90°» :D

@kinguru 7 авг 2011 в 12:28

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

Бред сивой кобылы.

1-я колонка
2-я колонка
3-я колонка

и что сложного?

@phgrey 7 авг 2011 в 19:15

Во всем этом светлом будущем лично пугает только одно — 10% пользователей ie6 (ie7, ie8 — неважно), браузер которых вообще не отобразит мою супер-бупер красивую страничку, сверстанную по html5. А поэтому либо делаем все по-старому (так и будет еще долго во всех коммерческих проектах), либо с костылями для не поддерживающих браузеров (ой как геморно).

@habropavel 7 авг 2011 в 20:51

Да, я граммар-полис, минусуйте. Но всё-таки, раздери меня гром:

> среди них является (как не удивительно) Internet Explorer
Как НИ удивительно.

@CAH4A 8 авг 2011 в 06:38

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

@habropavel 8 авг 2011 в 06:53

Окей, спасибо за подсказку.

@HomoLuden 8 авг 2011 в 12:19

div {
display: grid;
grid-columns: 1fr 3fr 1fr;
grid-rows: 100px auto 12em;
}

WPF -> Grid -> (Row)ColumnDefinitions -> Такой сахорок мне по душе! Надеюсь реализуется.

@piumosso 11 авг 2011 в 14:59

Полезная-таки подборка. Уже давно не слежу за новыми фичами CSS. Интересно, как IE ввязывается в «процесс»)

@Rooc 14 авг 2011 в 09:42

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

@Murz 5 сен 2011 в 04:30

А для ИЕ6 плагин для поддержки этого всего будет? ;)

@Glook 17 дек 2011 в 17:19

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

Пример.
Когда упрямый заказчик хочет тень текста и в IE тоже, то какой смысл в text-shadow… Всё равно придётся текст вставлять дважды. А потом объяснять ему, почему невозможно изменить его из админки CMS или, плеваясь, прикручивать js, который будет это делать.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий