How to become an author
Search
Write a publication
Pull to refresh

Comments 111

По-моему верстать блоками таблицу, это всё равно что верстать таблицей блоки.
PS У table, tr и td display:block уже давно можно установить…
Total votes 27: ↑13 and ↓14-1
вы не поняли? это не для того, чтобы верстать таблицу блоками. это для того, чтобы создавать разметку страницы.
вообще, давно надо было придумать подобный стандарт, ато эти костыли с флоатами, позициями и дисплеями на самом деле ужасные.
хотя все попытки до этого были на самом деле в меру отвратительными
Total votes 30: ↑28 and ↓2+26
За деревьями можно не увидеть леса.
То, о чём говорил aavezel имхо.
Откройте примеры ну скажем в Chrome и ужаснитесь. Про мобильные браузеры и прочую кроссбраузерность лучше и не думать. Вот глядя на такое думаешь — уж лучше бы он таблицами верстал.

А стандарт CSS Grid Alignment Level 3 конечно интересен. Возможность тасовать местами блоки, прозрачно и наглядно задавать размеры в CSS это просто замечательно. Но когда это будет работать во всех браузерах так-же надёжно как таблицы? Ведь grid это всего-лишь сетка… табличная сетка.
Total votes 4: ↑3 and ↓1+2
Таблица, которая table — элемент для использования в текстовых блоках, а не в представлении. И display:block — ещё более грязный хак.
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
Представлен не стандарт, а editor's draft, то есть черновик, который после длительного обсуждения (мы все знаем как быстро делаются дела в w3c) возможно (!) станет официальной рекомендацией.
Не только после длительного обсуждения, но и только после того, как, по крайней мере, будет две независимых реализации предложенного стандарта.
Total votes 2: ↑2 and ↓0+2
Представлен, то представлен. А какие браузеры поддерживают?
Total votes 3: ↑2 and ↓1+1
Его[Стандарт] даже нельзя попробовать, поскольку пока нет реализаций в браузерах.
Total votes 4: ↑3 and ↓1+2
раздел «Заключение» в топике
Total votes 1: ↑1 and ↓0+1
Да это понятно. Но сколько времени пройдет, пока они его опрувят да выложат. Да и пока разработчики браузеров подключат. Думаю можно забыть лет на 10
Total votes 4: ↑2 and ↓20
Идея хороша, но вот синтаксис пока кажется сложноватым. Возможно, просто нужно привыкнуть.
This comment wasn’t rated yet0
Кто верстал таблицами, больших затруднений не испытает :)
Total votes 3: ↑3 and ↓0+3
затруднения испытают те, кто использовал таблицы для табличных данных
Total votes 2: ↑2 and ↓0+2
да что тут сложного, по моему все предельно понятно — посмотрите еще раз последний пример.
This comment wasn’t rated yet0
он взят из черновика стандарта, можно копипастить оттуда, только пока смысла в этом все равно нет
Total votes 6: ↑3 and ↓30
ну всё-равно читать приятнее. да и при обсуждении скопировать можно.
Total votes 3: ↑2 and ↓1+1
А чем его подсветить, по-вашему?
Total votes 5: ↑2 and ↓3-1
<source code="css">


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


</source>
<source code="html">
    <!-- HTML CODE IS HERE -->
</source>
Total votes 13: ↑11 and ↓2+9
Ну да, отлично подсвечивает комментарии и теги, т.е. то, чего в приведенном коде нету вообще.
Total votes 2: ↑1 and ↓10
зато оно копируется, нормально изменяется размер колёсиком мышки и устанавливается такой шрифт, который лучше всего смотрится на моём компьютере.

а какие преимущества у картинки?
Total votes 3: ↑3 and ↓0+3
Потому, что он всё равно вам не пригодится :)
Total votes 1: ↑1 and ↓0+1
ну ведь не получится теперь скопировать кусок кода, кинуть другу в аську и сказать: «смотри, хрень какую придумали!»
This comment wasn’t rated yet0
UFO just landed and posted this here
придираюсь я, или нет, но зачем вставлять код картинками, а не текстом? хотя бы одно преимущество.
This comment wasn’t rated yet0
Ложка дорога к обеду. Они с этим стандартом опоздали лет так на 10. Хотя несомненно он облегчит жизнь верстальщикам.
Total votes 12: ↑11 and ↓1+10
Из всех предложений вариант могилевского, т.е. этот, по-моему, самый крутой.
This comment wasn’t rated yet0
2012 год, MS IE10 поддерживает CSS Grid Alignment Level 3, MS Expression Blend 6 среди типов проектов имеет «Web-page» и кнопочку Save as HTML…
Total votes 1: ↑1 and ↓0+1
"… а в декабре того же года по предсказанию цивилизации Майя случается конец света."
ага, так и будет.
Total votes 2: ↑2 and ↓0+2
На самом деле ИМХО этот формат очень четко отражается на модель описания колонок в XAML…
Total votes 1: ↑1 and ↓0+1
Это у вас Reflection русского языка
This comment wasn’t rated yet0
Ну… с первого захода я не понял, что вы хотели написать «на такой формат описания табличной модели разметки очень чётко ложится модель описания колонок в XAML» :)
Total votes 1: ↑1 and ↓0+1
Не написать, а донести мысль. Извините.
This comment wasn’t rated yet0
Напоминает 99 год и FrontPage :)
Total votes 1: ↑1 and ↓0+1
Да вы оптимист. Я думаю будет так: «IE14 — Новейший инновационный браузер от Microsoft: CSS3(99%) CSS4(24%), grid(98%), HTML5(100%), HTML6(0%)».
Total votes 3: ↑2 and ↓1+1
шутка не смешная, CSS2 поддерживается на 100% в ie8
Total votes 17: ↑4 and ↓13-9
но это не значит, что он будет поддерживаться в ie14, в этом и шутка ;)
Total votes 15: ↑13 and ↓2+11
Например, свойство «text-shadow», входящее в CSS2, к сожалению, так до сих пор ИЕшечкой и не поддерживается. Так что всё-таки не на 100%, как бы этого ни хотелось.
Total votes 3: ↑3 and ↓0+3
О как. Не знал об этом, спасибо :)
Total votes 1: ↑1 and ↓0+1
CSS2 ни одним браузером на 100% ещё не поддерживается, даже на уровне бумаги, я уже не говорю про реальность.
Total votes 1: ↑1 and ↓0+1
Какая-то у вас несмешная шутка вышла. Пройдите по ссылке: www.w3.org/TR/css3-grid/
Посмотрите кто автор.
Total votes 2: ↑1 and ↓10
Микрософтовцы :)

Ну фигля, надо же HTML5 хотя бы до уровля первого Silverlight-а дотянуть :)
Total votes 3: ↑2 and ↓1+1
2012 год,… веб-разработчикам всё ещё приходится ставить костыли в код для IE6.
Извините, что разрушил построенную вами идилию.
This comment wasn’t rated yet0
Это очень полезная плюшка. С этим можно будет легко строить модульную сетку.
This comment wasn’t rated yet0
UFO just landed and posted this here
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 не будет поддерживать…
Total votes 8: ↑6 and ↓2+4
UFO just landed and posted this here
И не забываем, что на XP максимум можно поставить IE8.
This comment wasn’t rated yet0
UFO just landed and posted this here
Именно поэтому я не пользуюсь addEventListener, все равно в IE ниже девятки его нет, а ее на XP поставить нельзя. Array.indexOf я тоже презираю по этой причине.
А совсем недавно я видел машину, на которой стоят IE4.0 и возможности поставить что-то новее нет. С тех пор я не использую ajax.
Total votes 4: ↑1 and ↓3-2
Осталось только посмотреть на Lynx и забыть про CSS и JavaScript.
Total votes 2: ↑2 and ↓0+2
=) Как знал, что топик надо было публиковать до этого комментария.
Все равно никогда не буду пользоваться тегом irony и попсовой картинкой.
This comment wasn’t rated yet0
Очень просто и красиво, ещё бы браузеры данную спецификацию поддерживали одинаково…
This comment wasn’t rated yet0
я так понимаю, что после введения стандарта работать будет только в новых браузерах. для старых так и придется костыли использовать.
Total votes 2: ↑1 and ↓10
это можно сказать про любое нововведение в принципе
Total votes 7: ↑4 and ↓3+1
Это нововведение, ИМХО, легко эмулируется через behavior.
This comment wasn’t rated yet0
Довольно неплохо, решает много проблем.
А то эти танцы с float бубном задолбали.
This comment wasn’t rated yet0
А как правильно тогда размеры блоков указывать? В тех же процентах?
В решении не увидел
Total votes 1: ↑1 and ↓0+1
размеры задаются сеткой либо являются резиновыми
Total votes 3: ↑0 and ↓3-3
ну вот в данном примере сетка имеет размеры 1fr. Тогда и блоки такие же должны были получится. Разве нет?
This comment wasn’t rated yet0
а. ну да, пример не показывает размеров блоков. естественно вы можете задавать их как хотите. блок А впрочем не имеет установленных размеров, а вот у D скорее всего задана ширина (высота определяется содержимым)
Total votes 3: ↑0 and ↓3-3
Читая вспомнил как раньше верстал таблицами. Принцип тот же, просто разметка проще и логика в css перенесена. Новое это хорошо забытое старое.
Total votes 5: ↑3 and ↓2+1
Это невменяемый звиздец. Терраинформатика уже несколько лет борется за то, чтобы ввести нормальные вменяемые способы layout'а, которые вырыжаются ровно в двух новых свойствах: %%units и flow. Но у w3c свой путь, который отрицает всякую логику.

Total votes 6: ↑4 and ↓2+2
UFO just landed and posted this here
Это у МСа неявная сетка? :))))))

#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
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
> У него есть серьезное преимущество (которое в корне отличает его от таблиц, так что ничего не вид сбоку:) — располагать элементы на странице можно абсолютно независимо от их расположения в исходном коде.

Согласен

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

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

На фоне всего этого конкретно данное преложение — еще торжество разума (во всяком случае тут виден практический подход к проблеме)
This comment wasn’t rated yet0
Надо почитать. Их мысли меня зацепили.
This comment wasn’t rated yet0
У автора есть несколько здравых идей, но, несмотря на то, что он является приглашенным экспертом w3c, он лишь один из многих
This comment wasn’t rated yet0
зачем ввели grid-layer, когда есть z-index?
представляю, сколько проблем добавится с абсолютным позиционированием элементов, когда с ним и так то не очень гладко.

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

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

лучше бы ввели выражения в css, тогда модульные сетки можно было бы программировать на цсс, находясь в рамках традиционной блочной модели.
Total votes 3: ↑1 and ↓2-1
Вы ничего не поняли из статьи.
Total votes 2: ↑2 and ↓0+2
Как будет вести себя блок, у которого указана ширина max-content и содержащий абзац текста?

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

Жаль, что непонятно когда это будет поддерживаться, в IE9, по-моему, не увидим :(
This comment wasn’t rated yet0
афигенно! отпадает необходимость в хитрых фреймворках основанных на модульных сетках, остается только спросить у дизайнера какой модуль он брал, прописать его в стилях и вуа-ля… Печально что ждать такой песни еще очень долго (
This comment wasn’t rated yet0
Не фонтан. Очень много вопросов возникает, так как этот стандарт вообще меняет логику верстки. Неизвестно как и на что он будет влиять, неизвестно как будут дела обстоять с разными браузерами. Будет какой-нибудь косячок в отображении одного из браузеров и вся разметка поедет. И непонятно чем float неугодил. Разметку блоков как на первом примере я накидаю за пару минут. Да, css будет побольше, зато никаких заморочек, никаких проблем с кроссбраузерностью. CSS Grid Alignment Level 3 имхо может пригодиться только для всяких извращений, как в задачке, опубликованной ранее, но так изгаляться с позиционированием блоков приходится крайне редко. То есть пример синтетический и не показывает практическую необходимость нового стандарта.
Total votes 1: ↑1 and ↓0+1
>И непонятно чем float неугодил.

Для меня главный минус использования float и прочих современных «хаков» — зависимость html кода от сетки модулей, не решается задача разделения содержания и его представления. Думаю предпоследнюю картинку с резиновой вёрсткой весьма затруднительно будет сверстать в виде шести div'ов в произвольном порядке прямо под body, особенно в случае резиновой вёрстки для каждого блока в обоих направлениях, так чтобы первый и второй варианты получались только сменой css.
This comment wasn’t rated yet0
А зачем это нужно?
Зачем вообще людям размещать блоки не по порядку?

Если уж разделять представление от содержания, тогда уж легче данные начать хранить не в HTML-е
This comment wasn’t rated yet0
Чтобы перетащить блок в другое место на экране, не трогая его в html коде, в частности полезно при создании скинов.

Хранить не в html? А в чём? XML+XSLT также потребует связанных html+css
This comment wasn’t rated yet0
Действительно, всё достаточно просто и понятно. Но всё равно где-то должно быть "..., но" и у этого способа.
This comment wasn’t rated yet0
совместимость…
This comment wasn’t rated yet0
Если бы не юзернейм автора, не догадался бы, что топик про IE!)) Отличная маскировка :D
Total votes 3: ↑3 and ↓0+3
ок, ждем js-хаков реализующих данный стандарт хотя бы начерно, а там и браузеры подтянуться…
This comment wasn’t rated yet0
На РИТ-2010 есть хороший доклад по всем трём предложениям по layout в CSS3:

This comment wasn’t rated yet0
К сожалению, доклад не учитывает последнее предложение, о котором идёт речь. Но, в целом, будет очень полезен, да.
This comment wasn’t rated yet0
К сожалению, очередная красивая, но неприменимая на практике фантазия.
Допустим даже, вот прямо завтра 1-2-3 передовых браузера включат поддержку такой разметки — и что? Как быть со старыми?

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

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

Делать две параллельные версии шаблонов (новые и старые) и грузить нужные в зависимости от браузера? Накой нам двойная работа?
Total votes 1: ↑1 and ↓0+1
Тут с Вами нельзя не согласиться.
Ценность того, что мы видим, не в том, что завтра этим можно будет пользоваться. Этого не будет. Ценность в том, что работа идёт, CSS совершенствуется и когда-нибудь это появится во всех актуальных браузерах. Хуже было бы, если бы сейчас ничего не разрабатывали оправдываясь тем, что никто из браузеров в ближайшее время это не реализует а значит никому это и не надо. Жаль как-то они медленно работают и не всегда выбирают востребованные вещи. Имхо переменные в CSS давно бы уже все реализовали, если бы они были своевременно стандартизированы.
Total votes 1: ↑1 and ↓0+1
Стандарт очень упростит работу верстальщикам, вот только сколько будем ждать от всех браузеров полноценную поддержку этих стандартов, одному богу известно
This comment wasn’t rated yet0
Может быть повторю уже сказанное, но:

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

…но всё это нисколько не мешает нам радоваться тому, насколько круто всё будет лет через пять.
Total votes 2: ↑2 and ↓0+2
я вот таки не понял где определяется ширина блока D?
This comment wasn’t rated yet0
его цвет и размер шрифта, а так же padding там тоже не указаны. это сделано для того, чтобы показать как работает компоновка, считайте что задано некое фиксированное значение ширины
Total votes 1: ↑0 and ↓1-1
Я относительно давно знаком со всемы черновиками организации компоновки (grid, flex, layout).
Предудущая инкарнация grid (которая CSS Grid Positioning) как-то немного уступала другим, особенно flex.
Но новая версия (CSS Grid Alignment) смотрится явно интереснее. Все очень предельно просто и понятно. И данный подход решает 99% задач. Ближайший конкурент flex не решает, к примеру, независимость содержимого от представления (нельзя свободно тасовать блоки).
This comment wasn’t rated yet0
Забыл добавить, что зато flexible box поддерживается в Gecko и Webkit! А grid еще нигде ((
Total votes 1: ↑1 and ↓0+1
Это очень важный момент, т.к. для продвижения к утверждению спецификации требует наличие двух независимых имплементаций.
Total votes 1: ↑1 and ↓0+1
Мне как программисту, которому всегда была не очень интересна дивовая вёрстка с хаками-перехаками, это нововведение будет ооочень полезно.

Правда, работа верстальщика теперь будет не так нужна? Не завидую, бедным…
This comment wasn’t rated yet0
Есть ли разумное объяснение столь несуразному синтаксису стандарта? Нельзя ли было вместо
grid-column-align: end; grid-row-align: start
придумать просто
grid-align: top right
Total votes 1: ↑1 and ↓0+1
а если я напишу grid-align: right top? потому и выбрали «start» и «end» чтобы можно было применять в обоих направлениях. что касается общего синтаксиса типа: grid-align: start start, то я думаю, что он будет реализован
Total votes 3: ↑1 and ↓2-1
> а если я напишу grid-align: right top?

Работать будет нормально (по аналогии с backround-position)
Total votes 1: ↑1 and ↓0+1
Черт. Я хочу учиться верстать не сейчас, а когда такое введут
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr