Pull to refresh

Comments 74

UFO just landed and posted this here
Да, будем ждать поддержки сего чуда в других браузерах, ибо проприетарные свойства — не есть гуд.
Проприетарные свойства — это нестандартные свойства, реализованные в том или ином браузере.

В данном случае свойства стандартные и открытые для реализации в других браузерах, в частности, спецификация включает описание алгоритмов для расчета отдельных параметров. Обсуждение всего этого великолепия идет абсолютно открыто в рабочей группе CSS.
Да, вы совершенно правы. Просто не знаю, как назвать таковые свойства в одно слово. Вот и ляпнул.
UFO just landed and posted this here
Вы правы, когда нибудь мы доживем до этого. А пока /me ушел верстать под ie6…
UFO just landed and posted this here
Добавьте в статью информацию о том, какие браузеры уже это поддерживают
Судя по этой ссылке — работает только в IE10. Что ожидаемо. Хотя если появится в остальных — было бы здорово.
в баг трекере Webkit висит таск, может и реализуют.
Круто! По похожему принципу происходит размещение элементов в XAML (в контейнере Grid), так что тем, кто знаком с WPF/Silverlight все должно быть очень привычно.
На мой взгляд, все, чего не хватает связке HTML/CSS — это нормальной системы layout'ов. То, о чем написано в этой статье, было бы прекрасно. К сожалению, это не мейнстрим, причем далеко не мейнстрим, и нигде не поддерживается, так что пока ждем лучших времен :)
Еще нормальные контролы нужны!
Верно, но это сложнее. Хотя бы все HTML5-ные инпуты сделали нормальными. Форматы ввода данных ведь не поменяются.
«Чтобы быстрее разобраться с тем, как работает Grid Layout, давайте сразу же начнем с ...»
Предлагаю начать с того, что у пользователей IE в Windows Vista и Windows XP всё это никогда не будет работать, и на этом, собственно, можно закончить статью.
Когда дойдёт до реализации во всех браузерах, про XP уже все забудут. :)

Хотя, конечно, хочется верить в чудо, что это случится раньше…
IE6 сколько уже лет хоронят, а он всё никак до конца не умрёт. XP с IE 8 будет умирать ещё дольше.

Что же до реализации, то с современными темпами развития стоит вебкиту или геко ввести поддержку этого черновика, остальные за скорее всего за месяцы подтяутся.
ИЕ6 скорее мёртв, чем жив. На него же даже Гугл положил большой и волосатый (поиск-то работает, то куча сервисов — или вообще никак, или в урезанном виде). Если сайт не для Китая, то можно со спокойной душой забить. Лично я и на ИЕ7 обычно забиваю.

Интересно, почему такая важная фича как grid layout обходится стороной всеми браузеарми кроме ИЕ. За ИЕ я, конечно, безумно рад, но всё же…
Я бы сказал, что одна из самых важных! Больше половины костылей/хаков для HTML+CSS из за отсутствия человеческой системы лэйаутов и гридов.

Какого черта нормальное позиционирование + растягивание + масштабирование элемента реализуется через какое-то невообразимое количество разных хитростей, css-хаков, отрицательных паддингов, зашкаливающих margin-ов, абсолютным позиционированием с указанием запредельной высоты, и вставкой всего этого в элемент с overflow-hidden, магией с обтеканием (float) и переносом (clear) и все равно решение будет «недостаточно гибким». И все это вместо возможности (как в проприетарных MXML или XAML) указать точные циферки и все.
UFO just landed and posted this here
знали бы Вы как я злился на отсутствие поддержки IE6, когда потерял гуглофон в Китае, а единственной найденной кафешкой управлял отель и стоял на всех компьютерах только IE6, с запрещенным скачиванием файликов :)
хотя в корпоративную почту меня еще пустили и дали сменить пароли и проч., а вот на всяких домашних ящиках увы и ах, нет!
и мне по большому счету было наплевать на то какой там ui красивый и удобный — мне нужно было лишь сменить пароль и только. даже если бы верстка поехала.
В данном случае похоже злиться не нужно будет. Просто будут идти все блоки страниц в нормальном потоке сверху вниз.
UFO just landed and posted this here
Возможно, вы удивитесь еще раз! Но они это реализовали именно потому… что другие браузеры этого не сделали! А вовсе не потому, что они вдруг полюбили кроссбраузерность, кроссплатформенность, общедоступные стандарты или вообще решили, что пора стать хорошими!
Как я понял, этот grid layout мелкомягкие сами и изобрели, а потом успешно пропихнули в стандарты. :) Всё это «ж-ж-ж» неспроста.

Но объяснять добавление grid layout’а исключительно желанием добавить уникальных для ИЕ фич будет не совсем корректно: какой-никакой, а это стандарт, с жёстко описанными алгоритмами. Когда ИЕ10 выйдет, фича уже давно будет в других браузерах. Старыми грязными тактиками с вендорными фичами здесь и не пахнет.
Речь вовсе не о проприетарщине, а о пиаре! Внедрение новой фичи — это информационный повод для проповедников пятого веба написать что-то в свой блог. Просто МС, впервые за долгие годы, оказался на таком перегретом рынке и вынужден действовать старыми добрыми конкурентными способами.
Вы так говорите, как будто пиар — это плохо.

У мелкомягких пиар ещё вполне приятный, с очевидными плюшками. Вы вспомните, как сначала ФФ, потом Хром впихивали всем подряд на всех сайтах. Мне, как пользователю Оперы и веб-разработчику, у кого установлены все браузеры, от этого тошно. Ненавижу.
Тьфу-тьфу-тьфу, но ИЕ6 таки отмирает. Похоже, физически — вместе с компами, на которых он был установлен. Ему 11 год уже пошел, всё же.
Когда-то вёрсткой мечты были блоки.

Ещё раньше мечтой был CSS.

Интересно, а что будет после grid?
Ничего не будет. А зачем? Верстка текста — это не та задача, которую нужно вечно допиливать, расширять и углублять.
Когда полностью реализуют всё, что планируют в html5 и css3 — это будет универсальный монстр на все случаи жизни, от простеньких текстов до интерфейсов любых программ и 3D-игр.
html5 и css3 — это будет универсальный монстр на все случаи жизни

HTML4 и CSS2 не с такой же идеей создавались? :)
… которая отличается от старых добрых таблиц только тем, что информацию о расположении элементов перенесли туда, где ей и положено быть — в CSS. Не прошло и 15 лет, как наконец-то довели html-версту до ума.
Новое — это хорошо забытое старое, да;)
Всё-таки несколько новых фич относительно старых таблиц есть: шаблоны для повторения, сложнее логика вычисления размеров (min, max и др.), несколько блоков в одной ячейке, плюс фишки из далёкого будущего (именованные ячейки, шаблоны в виде строк).

Но таки да, это старые-добрые таблицы. Вернулись к истокам.
Это к сожалению никак не таблицы. И воспроизвести «резиновость» таблиц не удастся.
Уникальность таблиц состоит в том что каждая ячейка это устанавливает так называемый BFC — block formatting context. Т.е. в условиях overflow:visible сродержимое ячеек друг на друга «не залазит». Здесь же — легко.

Размеры ячеек в Grid Layout могут подстраиваться под контент.
Да? А как? Например есть #grid из одного столбца/колонки:

#grid1x1 { 
  grid-rows: 1gr
  grid-columns: 1gr
}


И у него пара-тройка children. Под какой контент и как оно будет подстраиваться?
А в чем смысл делать сетку из одного столбца и одной строки?

А так вы можете указать размер, например, в виде max-content.
Это для примера.

В одном placeholder Grid Layout допускает несколько элементов. Как они будут подстраиваться? Или как грид их будет подстраивать? Как сказать
все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?

А вообще смыслов таблиц из одной ячейки может быть много.
Например иногда имеет смысл написать так:

pre { display:table-cell; }


тогда ширина pre будет равна самой широкой строки ибо table/cell фактически ведет себя как если бы он объявлен как width:max-content
> Как сказать все элементы в этом placeholder должны иметь одинаковую ширину и эта ширина должна быть не меньше max-width самого широкого?

Если я правильно понял вопрос, надо при определении колонки сказать, что ее ширина должна быть max-content, либо minmax(max-content, 1fr).
max-content это ширина самой колонки, но никак не элементов в ней. Ширина элементов определяется в CSS свойствами min/max-width, width и box-sizing. Соответсвенно высота min/max-height и height.

Еще раз: Grid Layout разрешает разместить несколько элементов внутри одного placeholder. Скажем мы поместили три таких элемента.

Как сказать «все три этих элемента должны иметь ширину равную ширине этого placholder, и быть расположенными один за одним вертикально занимая всю высоту этого placeholder»?
В ячейку запихиваем один блок, а в него кладём обычные дивы, не?
Так вы скажите элементам внутри колонки, чтобы у них ширина была 100% — они займут все пространство в колонке (только надо отступы учитывать).

Если внутри ячейки нужно внутреннее деление, то подозреваю, что тут либо внутреннюю сетку нужно делать, либо тот же flexbox использовать.

Ну либо, как написано выше — в ячейку кладем один блок, а внутрь него дивы, высоту которых делаем, скажем 33% с копейками.
Какое-то очень-преочень натянутое и избыточное решение для простого трехколоночного макета С МИНИМАЛЬНОЙ ВЫСОТОЙ СТОЛБЦОВ 100%, они ведь это имели в виду?
То все фигня. Это будет поддерживатся однозначно не скоро. А сейчас лучше не мечтать, а идти верстать страницы со всякими 960grid, bootstrap и т.д.
Почему однозначно нескоро? Видится мне, что grid layout — это тот же table layout, только немного по-другому записанный и с парой дополнительных фич. Реализовать основу (grid, columns, rows, column, row, span — как в ИЕ) — это плёвое дело. Добавить align и разобраться с z-index. Со всякими min/max может быть веселуха, но без них на первых порах можно спокойно прожить.

Скоро будет, скоро. Браузеры морально не смогут себе позволить, чтобы ИЕ их так серьёзно обходил. :)
а ведь ты был прав… прошло 4 года, а гриды пока массово не используют. Да и поддержка в браузерах еще не полная, хотя и реализована на 99%.
Стоит бы отметить что grid layout это не position:static размещение, а вариация position:absolute|fixed.

Собственно grid layout можно воспрозвести руками и сейчас задав position:fixed всем элементам. Управляя left/top/right/bottom можно воспроизвести start/end/stretch позиционирование. Но position:fixed хотя бы можно управлять z-index.

UFO just landed and posted this here
Ну во первых by design элементы могут рисоваться поверх соседей.
А во вторых представим себе grid с такими вот columns:

grid-columns: 150px 1fr 200px;

и скажем в первой колонке оказался элемент с width:300px или min-width:300px.
Или юзер выставил шрифт поболее и content width стала больше чем 150px.
Результат будет не сильно привлекательный.

Основной недостаток(?) Grid Layout состит в том что он использует т.н. placeholder model — поверхность разбивается на placeholders — виртуальные прямоуголники в которых уже помещаются реальные элементы. Причем как-то совершенно грустно и не по CSS-овски. Скажем есть внутри элемент с width:100%. Этот width он отнсительно чего расчитывается? Про placeholder'ы CSS box model ничего не знает.

Таблицы же используют строго position:static layout. Вся поверхность конейнера заполнена реальными DOM элементами. При этом контент соседних ячеек друг на друга не залазит. Ибо каждая ячейка это BFC.

Мой flow:«template» использует table model. Собственно под капотом там table engine и используется. Т.е. layout и размеры определяются по правилам таблиц, это вот:

#container { 
  flow: "1 1"
        "2 3";
}
Описывает таблицу в которй первый child занимает полный ряд (первую и вторую колонку) а второй и третий соответсвенно живут во втором ряду.
Размеры как я уже сказал — по принципу tables — с учетом min/max-width и пр.

и скажем в первой колонке оказался элемент с width:300px или min-width:300px.
Или юзер выставил шрифт поболее и content width стала больше чем 150px.
Результат будет не сильно привлекательный.

Тут уж надо решить: или ширина определяется колонками grid-columns (и ширина у блоков auto или в процентах меньше 100%), или блоками (и в grid-columns прописаны minmax с учётом min/max-content). Какой смысл делать одним способом и портить другим?

Скажем есть внутри элемент с width:100%. Этот width он отнсительно чего расчитывается?

Относительно ячейки.
dev.w3.org/csswg/css3-grid-layout/#calculating-the-size-of-grid-items
Note that percentage lengths specified on a Grid item resolve against the dimensions of the Grid cell (i.e. the Grid cell serves as the containing block for the Grid item).
Во первых width:auto для разных блоков означает разные вещи.
width:auto для таблицы это нечто близкое к min(100%, max-content).
Для floats это shrink-to-fit. Для простых блоков это нечто третье.

А во вторых смысл ситуации «юзер выставил шрифт поболее и content width стала больше чем 150px.» очевиден и ситуация вельми часто наблюдается.

Особенно когда этот grid будут пытаться втиснуть в трех-пиксельный экран мобильного браузера.

Т.к. grid layout допускает overflow:
«If the ‘min-content’ size of the Grid item’s box is greater than the size of its Cell, it will overflow the bounds of its Cell in a direction determined by its alignment»
то в общем и целом разницы между система гвоздями прибитых position:absolute элементов и те же элементы но в grid нет.

Но вы можете явно сказать, что размеры колонки могут зависеть от размера содержимого, раз уж вы рассчитываете, что иногда, например, из-за увеличенного шрифта контент может вылезти за рамки.

Если так, то вы можете явно указать, к примеру, что ширина колонки должна быть minmax(150px, max-content).
UFO just landed and posted this here
Grid — это, конечно, прекрасно. Но синтаксис разочаровывает. Избыточен и неуклюж.

Вместо отдельных свойств grid-columns и grid-rows должно быть одно свойство grid-layout. А колонки и строки разделяться могут слешем. Ну или grid-layout мог бы быть универсальным свойством по отношению к эти двум (как, например, соотносятся font-size и font-family к универсальному свойству font).

То же самое касается свойств, указывающих позицию блоков: grid-column и grid-row. Универсальное свойство: grid-position. С растяжением ячеек тоже всё неладно. Гораздо нагляднее указывать прямо в свойстве grid-position первую и последнюю ячейку протяженности.

Текущий синтаксис:

#grid {
    display: grid;
    grid-columns: 150px 1fr 200px;
    grid-rows: 50px 1fr 50px;
}

#cell {
    grid-column: 2;
    grid-column-span: 2;
    grid-row: 2;
    grid-row-span:2;
}


А как хотелось бы:

#grid {
    display: grid;
    grid-layout: 150px 1fr 200px / 50px 1fr 50px;
}

#cell {
    grid-position: 2..3 / 2..3;
}


Достоинства:
1) Код короче, следовательно, легче читается
2) Не спутаешь очень похожие grid-column и grid-columnS (а также grid-row и grid-rowS)
3) При использовании grid-column-span и grid-crow-span не так очевидно, какая ячейка будет конечной (в моем варианте указывается первая и последняя ячейка)
Также хотелось бы поругать grid-column-align и grid-row-align. Опять же нужно универсальное свойство grid-align. Далее, мне не нравятся значения start и end. Использование вместо них top (bottom) и left (righ) будет лучше, потому что:
1) Это нагляднее
2) Будет лучше сочетаться с синтаксисом других свойств, например, background-position.
3) На мой взгляд, если разработчику в блоке с арабским текстом понадобиться прибить блок справа, то он просто напишет right — какие проблемы?
Ах да, Template Layout — это рак, ИМХО. И зачем Grid его приютил?
UFO just landed and posted this here
У него крайне чужеродный синтаксис.

Скорее всего, новый вариант будет заменой тому черновику. Вообще странно, что этот Grid уже несколько раз протаскивают с разными названиями: Grid Alignment, Grid Positioning, Grid Layout…
«display: grid» избыточно, потому что «grid-columns / grid-rows» может быть только у грида — можно вообще убрать. Так как гридов не должно быть много, а значения свойств (особенно при использовании именования) будут длиннее имён свойств, то большой экономии не вижу.

Краткую запись на замену спанам собираются добавить, это упомянуто в статье (будет как у вас, но без точек).

Насчёт grid-position совершенно согласен, делать на два отдельных свойства смысла мало. Не знаю, зачем так сделали.
UFO just landed and posted this here
Это должно было быть в CSS 1.0.
Почему в 2012 году нормальные инструмены для верстки по сетке, поддерживаются только одиним, да и то не вышедшим браузером — для меня загадка.
Первая реакция — «мечта!». Вторая более скептическая. По сути та же таблица — ширина верхних ячеек зависит от ширины нижних, высота левых от высоты правых. При не столь очевидной табличности макета придётся вводить фиктивные ширины и высоты, которые будут использоваться где-то в спанах, но ни разу сами по себе. А значит те же мучения при вставке строки или столбца.

Больше радуют «черновые» возможности, прежде всего привязка к линиям. Но тоже не айс. Вот именованные бы линии, чтобы от вставки ещё одной вся вёрстка не лезла.
Текущий уровень поддержки CSS3 Grid браузерами различных версий можно посмотреть тут:
caniuse.com/#search=grid

На конец марта 2012 выглядело так:
image

Результат неутешительный. :( Но хоть Microsoft в кои-то веки делом занялся.
Как я понял, ИЕ неслучайно оказался первым. Идею с гридами в CSS3 сами мелкомягкие и пропихнули. :)
Не убедили, видать. :)
В 32 лисе добавили экспериментально, включается через layout.css.grid.enabled
В хроме кстати оказывается теперь тоже есть экспериментально и тоже выключено по умолчанию. Видимо обкатывают.
Спустя ещё почти год: «всё совсем печально», а IE — «частичная поддержка под грузом обратной совместимости»…
UFO just landed and posted this here
Ситуация 2017-го: CSS Grid Layout Module Level 1 — W3C Candidate Recommendation, 9 February 2017

Для тех, кто будет изучать css-grid-1 не по спецификации, а по этой статье, следует учитывать, что свойства grid-rows и grid-columns удалены из спецификации.

Используются только grid-template-rows и grid-template-columns


Поддержка спецификации на текущий момент

Only those users with full accounts are able to leave comments. Log in, please.