Представлен стандарт CSS Grid Alignment Level 3

[aavezel]

По-моему верстать блоками таблицу, это всё равно что верстать таблицей блоки.
PS У table, tr и td display:block уже давно можно установить…

[TheShock]

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

[Stepanow]

За деревьями можно не увидеть леса.
То, о чём говорил aavezel имхо.
Откройте примеры ну скажем в Chrome и ужаснитесь. Про мобильные браузеры и прочую кроссбраузерность лучше и не думать. Вот глядя на такое думаешь — уж лучше бы он таблицами верстал.

А стандарт CSS Grid Alignment Level 3 конечно интересен. Возможность тасовать местами блоки, прозрачно и наглядно задавать размеры в CSS это просто замечательно. Но когда это будет работать во всех браузерах так-же надёжно как таблицы? Ведь grid это всего-лишь сетка… табличная сетка.

[80x86]

Таблица, которая table — элемент для использования в текстовых блоках, а не в представлении. И display:block — ещё более грязный хак.

[TheShock]

ну, неплохо на самом деле

[fatal]

Представлен не стандарт, а editor's draft, то есть черновик, который после длительного обсуждения (мы все знаем как быстро делаются дела в w3c) возможно (!) станет официальной рекомендацией.

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

[PiSaiK]

Представлен, то представлен. А какие браузеры поддерживают?

[TheShock]

Его[Стандарт] даже нельзя попробовать, поскольку пока нет реализаций в браузерах.

[TheShock]

раздел «Заключение» в топике

[PiSaiK]

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

[TheShock]

вот так всегда(

[MOVe]

Идея хороша, но вот синтаксис пока кажется сложноватым. Возможно, просто нужно привыкнуть.

[ChemAli]

Кто верстал таблицами, больших затруднений не испытает :)

[Inquirer]

затруднения испытают те, кто использовал таблицы для табличных данных

[sorokinvj]

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

[TheShock]

а зачем код вставлен картинками?

[TheShock]

да и еще без подсветки

[XaocCPS]

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

[TheShock]

ну всё-равно читать приятнее. да и при обсуждении скопировать можно.

[ChemAli]

А чем его подсветить, по-вашему?

[TheShock]

<source code="css">

/* css is here */
elem {
    background : red;
    color      : black;
}

</source>
<source code="html">
    <!-- HTML CODE IS HERE -->
</source>

[ChemAli]

Ну да, отлично подсвечивает комментарии и теги, т.е. то, чего в приведенном коде нету вообще.

[TheShock]

зато оно копируется, нормально изменяется размер колёсиком мышки и устанавливается такой шрифт, который лучше всего смотрится на моём компьютере.

а какие преимущества у картинки?

[pepelsbey]

Потому, что он всё равно вам не пригодится :)

[TheShock]

ну ведь не получится теперь скопировать кусок кода, кинуть другу в аську и сказать: «смотри, хрень какую придумали!»

[pepelsbey]

Скопируйте отсюда: webstandardsdays.ru/2010/06/26/pres/layout/ — там много всякой хрени )

[TheShock]

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

[Zhitnik]

Ложка дорога к обеду. Они с этим стандартом опоздали лет так на 10. Хотя несомненно он облегчит жизнь верстальщикам.

[arestov]

Из всех предложений вариант могилевского, т.е. этот, по-моему, самый крутой.

[Dmitry_f]

Очень интересно. В предвкушении.

[Olegas]

2012 год, MS IE10 поддерживает CSS Grid Alignment Level 3, MS Expression Blend 6 среди типов проектов имеет «Web-page» и кнопочку Save as HTML…

[Consul]

"… а в декабре того же года по предсказанию цивилизации Майя случается конец света."
ага, так и будет.

[Olegas]

На самом деле ИМХО этот формат очень четко отражается на модель описания колонок в XAML…

[80x86]

Это у вас Reflection русского языка

[Olegas]

Это как? %)

[80x86]

Ну… с первого захода я не понял, что вы хотели написать «на такой формат описания табличной модели разметки очень чётко ложится модель описания колонок в XAML» :)

[80x86]

Не написать, а донести мысль. Извините.

[80x86]

Напоминает 99 год и FrontPage :)

[ID175055]

Да вы оптимист. Я думаю будет так: «IE14 — Новейший инновационный браузер от Microsoft: CSS3(99%) CSS4(24%), grid(98%), HTML5(100%), HTML6(0%)».

[TheShock]

CSS2 (81%)

[XaocCPS]

шутка не смешная, CSS2 поддерживается на 100% в ie8

[TheShock]

но это не значит, что он будет поддерживаться в ie14, в этом и шутка ;)

[XaocCPS]

принято :-)

[ryuzaki_spb]

Например, свойство «text-shadow», входящее в CSS2, к сожалению, так до сих пор ИЕшечкой и не поддерживается. Так что всё-таки не на 100%, как бы этого ни хотелось.

[WizardBox]

Формально говоря, в CSS2.1 text-shadow нет.

reference.sitepoint.com/css/text-shadow
text-shadow was originally specified in CSS2 but removed from CSS2.1. It’s currently also included in the CSS3 Text module.

[ryuzaki_spb]

О как. Не знал об этом, спасибо :)

[fatal]

CSS2 ни одним браузером на 100% ещё не поддерживается, даже на уровне бумаги, я уже не говорю про реальность.

[XaocCPS]

news.softpedia.com/news/Microsoft-IE8-Has-the-First-Complete-Implementation-of-CSS-2-1-107450.shtml

[bolk]

Какая-то у вас несмешная шутка вышла. Пройдите по ссылке: www.w3.org/TR/css3-grid/
Посмотрите кто автор.

[LexL]

Микрософтовцы :)

Ну фигля, надо же HTML5 хотя бы до уровля первого Silverlight-а дотянуть :)

[fatal]

2012 год,… веб-разработчикам всё ещё приходится ставить костыли в код для IE6.
Извините, что разрушил построенную вами идилию.

[nikitammf]

Это очень полезная плюшка. С этим можно будет легко строить модульную сетку.

[WizardBox]

CSS Grid Alignment Level 3
dev.w3.org/csswg/css3-grid-align/

Editors:
Alex Mogilevsky, Microsoft Corporation
Phil Cupp, Microsoft Corporation
Markus Mielke, Microsoft Corporation
Daniel Glazman, Disruptive Innovations

Есть сомнения, что IE не будет поддерживать…

[TiGR]

И не забываем, что на XP максимум можно поставить IE8.

[Volshebnyi]

Именно поэтому я не пользуюсь addEventListener, все равно в IE ниже девятки его нет, а ее на XP поставить нельзя. Array.indexOf я тоже презираю по этой причине.
А совсем недавно я видел машину, на которой стоят IE4.0 и возможности поставить что-то новее нет. С тех пор я не использую ajax.

[barmaley_exe]

Осталось только посмотреть на Lynx и забыть про CSS и JavaScript.

[Volshebnyi]

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

[knight]

Очень просто и красиво, ещё бы браузеры данную спецификацию поддерживали одинаково…

[Z5M]

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

[XaocCPS]

это можно сказать про любое нововведение в принципе

[TiGR]

Это нововведение, ИМХО, легко эмулируется через behavior.

[jury]

Довольно неплохо, решает много проблем.
А то эти танцы с float бубном задолбали.

[neptune]

А как правильно тогда размеры блоков указывать? В тех же процентах?
В решении не увидел

[XaocCPS]

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

[neptune]

ну вот в данном примере сетка имеет размеры 1fr. Тогда и блоки такие же должны были получится. Разве нет?

[XaocCPS]

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

[Maxxon]

Читая вспомнил как раньше верстал таблицами. Принцип тот же, просто разметка проще и логика в css перенесена. Новое это хорошо забытое старое.

[dmitriid]

Это невменяемый звиздец. Терраинформатика уже несколько лет борется за то, чтобы ввести нормальные вменяемые способы layout'а, которые вырыжаются ровно в двух новых свойствах: %%units и flow. Но у w3c свой путь, который отрицает всякую логику.

[dmitriid]

Это у МСа неявная сетка? :))))))

#grid{ display: gird, grid-columns:… } — это неявная сетка? :)))

Это — это те же таблицы, вид сбоку. Все то же самое можно сделать гораздо меньшей кровью на %% и flow, при этом не ограничивая себя только гридами.

А w3c еще прелагает www.w3.org/TR/css3-flexbox/, www.w3.org/TR/css3-multicol/ новую единицу gr в www.w3.org/TR/css3-grid/

Не говоря уже о страшном страхе под названием www.w3.org/TR/css3-layout/

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

И все ради того, что на 99% покрывается введением вменяемых %% и flow

[dmitriid]

> У него есть серьезное преимущество (которое в корне отличает его от таблиц, так что ничего не вид сбоку:) — располагать элементы на странице можно абсолютно независимо от их расположения в исходном коде.

Согласен

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

У меня остались бы такими же :) Я тут краем глаза давно слежу за развитием событий (даже периодически почитываю публичную рассылку w3c). Там творится трэш и угар — каждый тянет одеяло на себя, а бОльшая часть народа вообще, кажется, с другой планеты.

На фоне всего этого конкретно данное преложение — еще торжество разума (во всяком случае тут виден практический подход к проблеме)

[Inquirer]

Надо почитать. Их мысли меня зацепили.

[dmitriid]

У автора есть несколько здравых идей, но, несмотря на то, что он является приглашенным экспертом w3c, он лишь один из многих

[not_ice]

зачем ввели grid-layer, когда есть z-index?
представляю, сколько проблем добавится с абсолютным позиционированием элементов, когда с ним и так то не очень гладко.

и еще, попытка динамического добавления строк обречена на провал — придется пересчитывать все grid-row у всех нижележащих ячеек, причем делать это в css/style?!

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

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

[JeanLouis]

Вы ничего не поняли из статьи.

[VolCh]

Как будет вести себя блок, у которого указана ширина max-content и содержащий абзац текста?

А вообще красиво (по сравнению и с table, и с float и прочими хаками), но я бы предпочёл прямое задание каждой ячейки сетки, а не grid-row-span (может аллергия на таблицы сказывается :) ).

Жаль, что непонятно когда это будет поддерживаться, в IE9, по-моему, не увидим :(

[POMAHbl4]

афигенно! отпадает необходимость в хитрых фреймворках основанных на модульных сетках, остается только спросить у дизайнера какой модуль он брал, прописать его в стилях и вуа-ля… Печально что ждать такой песни еще очень долго (

[SEObomj]

Не фонтан. Очень много вопросов возникает, так как этот стандарт вообще меняет логику верстки. Неизвестно как и на что он будет влиять, неизвестно как будут дела обстоять с разными браузерами. Будет какой-нибудь косячок в отображении одного из браузеров и вся разметка поедет. И непонятно чем float неугодил. Разметку блоков как на первом примере я накидаю за пару минут. Да, css будет побольше, зато никаких заморочек, никаких проблем с кроссбраузерностью. CSS Grid Alignment Level 3 имхо может пригодиться только для всяких извращений, как в задачке, опубликованной ранее, но так изгаляться с позиционированием блоков приходится крайне редко. То есть пример синтетический и не показывает практическую необходимость нового стандарта.

[JeanLouis]

Вы консерватор.

[VolCh]

>И непонятно чем float неугодил.

Для меня главный минус использования float и прочих современных «хаков» — зависимость html кода от сетки модулей, не решается задача разделения содержания и его представления. Думаю предпоследнюю картинку с резиновой вёрсткой весьма затруднительно будет сверстать в виде шести div'ов в произвольном порядке прямо под body, особенно в случае резиновой вёрстки для каждого блока в обоих направлениях, так чтобы первый и второй варианты получались только сменой css.

[Evengard]

А зачем это нужно?
Зачем вообще людям размещать блоки не по порядку?

Если уж разделять представление от содержания, тогда уж легче данные начать хранить не в HTML-е

[VolCh]

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

Хранить не в html? А в чём? XML+XSLT также потребует связанных html+css

[example]

Действительно, всё достаточно просто и понятно. Но всё равно где-то должно быть "..., но" и у этого способа.

[VolCh]

совместимость…

[grcool]

Если бы не юзернейм автора, не догадался бы, что топик про IE!)) Отличная маскировка :D

[roller]

ок, ждем js-хаков реализующих данный стандарт хотя бы начерно, а там и браузеры подтянуться…

[bolk]

На РИТ-2010 есть хороший доклад по всем трём предложениям по layout в CSS3:

[bolk]

Ссылку парсер съел. Вот: rutube.ru/tracks/3146682.html?v=0e29a5d0143e696dd7ca002feb2ee14a&bmstart=2631000

[pepelsbey]

А вот ссылка на саму презентацию: webstandardsdays.ru/2010/06/26/pres/layout/ — смотреть в Webkit-браузерах.

[pepelsbey]

К сожалению, доклад не учитывает последнее предложение, о котором идёт речь. Но, в целом, будет очень полезен, да.

[dom1n1k]

К сожалению, очередная красивая, но неприменимая на практике фантазия.
Допустим даже, вот прямо завтра 1-2-3 передовых браузера включат поддержку такой разметки — и что? Как быть со старыми?

В последнее время идёт такая тенденция, что на совсем уж старых уродцев (типа IE6) какбэ можно подзабить. И понять разработчиков можно — все тупо устали с ними бороться, подчас тратя на совместимость с одним экспонатом кунсткамеры больше времени, чем на всю остальную вёрстку. Имею богатый личный опыт… Но тут подзабить не выйдет!

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

Делать две параллельные версии шаблонов (новые и старые) и грузить нужные в зависимости от браузера? Накой нам двойная работа?

[Stepanow]

Тут с Вами нельзя не согласиться.
Ценность того, что мы видим, не в том, что завтра этим можно будет пользоваться. Этого не будет. Ценность в том, что работа идёт, CSS совершенствуется и когда-нибудь это появится во всех актуальных браузерах. Хуже было бы, если бы сейчас ничего не разрабатывали оправдываясь тем, что никто из браузеров в ближайшее время это не реализует а значит никому это и не надо. Жаль как-то они медленно работают и не всегда выбирают востребованные вещи. Имхо переменные в CSS давно бы уже все реализовали, если бы они были своевременно стандартизированы.

[kuzenru]

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

[pepelsbey]

Может быть повторю уже сказанное, но:

— Новость от 26 октября: web-standards.ru/news/274/
— Это авторский черновик, который а) является пересмотром старого черновика CSS Grid Positioning б) никем не поддерживается в) сильно изменится до тех пор, пока достигнет статуса рекомендации
— Существует большая проблема обратной совместимости, поскольку этот черновик не предусматривает использования экстра-разметки, и даже если два браузера начнут его поддерживать, то для трёх остальных будет взрыв макета. Надеюсь, что после первых реализаций появятся JS-костыли, имитирующие работу этих свойств.

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

[tarya]

Дайте два!

[Rooc]

я вот таки не понял где определяется ширина блока D?

[XaocCPS]

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

[Igorbek]

Я относительно давно знаком со всемы черновиками организации компоновки (grid, flex, layout).
Предудущая инкарнация grid (которая CSS Grid Positioning) как-то немного уступала другим, особенно flex.
Но новая версия (CSS Grid Alignment) смотрится явно интереснее. Все очень предельно просто и понятно. И данный подход решает 99% задач. Ближайший конкурент flex не решает, к примеру, независимость содержимого от представления (нельзя свободно тасовать блоки).

[Igorbek]

Забыл добавить, что зато flexible box поддерживается в Gecko и Webkit! А grid еще нигде ((

[fatal]

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

[alex_inside]

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

Правда, работа верстальщика теперь будет не так нужна? Не завидую, бедным…

[AntonDiaz]

Есть ли разумное объяснение столь несуразному синтаксису стандарта? Нельзя ли было вместо
grid-column-align: end; grid-row-align: start
придумать просто
grid-align: top right

[XaocCPS]

а если я напишу grid-align: right top? потому и выбрали «start» и «end» чтобы можно было применять в обоих направлениях. что касается общего синтаксиса типа: grid-align: start start, то я думаю, что он будет реализован

[AntonDiaz]

> а если я напишу grid-align: right top?

Работать будет нормально (по аналогии с backround-position)

[wfwell]

Черт. Я хочу учиться верстать не сейчас, а когда такое введут