Верстать по-новому или Верстать по-старому

Верстать по-новому
3
Нейтральная
сторона
1
Верстать по-старому
2
flexbox, multi-column layout, grid layout, template layout
Прежде чем писать комментарии или выбрать сторону вы должны авторизироваться!
div {display:block}, span {display:inline}, таблицы

06-09-2015 19:53 0

После экспериментов со стандартной блочной моделью HTML у меня сложилось впечатление, что дивы и спаны в сложных дизайнах (типа того, что на Холиварсах) ведут себя непредсказуемо. Их естественное назначение — вёрстка текста (span = предложение, div = абзац). Попытки применить дивы и спаны к чему-то более сложному — троллейбус из буханки. В качестве примера таких шедевров гуглите трёх- или четырёхколоночный дизайн на дивах.

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

И вот, наконец, я наткнулся на то, чего ждал джва года: Flexbox — готовое средство для «резинового» дизайна с возможностью свободного переключения между вертикальным и горизонтальным режимом. Пример сайта, на котором можно поиграть с такими блоками: the-echoplex.net/flexyboxes/

Недостаток заключается в том, что каждое правило CSS придётся дублировать в трёх вариантах (как сейчас дублируют скруглённые уголки с префиксами -moz-, -webkit-, etc.), но это мелочь. Опера начала поддерживать Flexbox только с версии 12.10, IE — с десятой версии, Хром и Фаерфокс — с древних времён.

Материалы по теме:
www.w3.org/TR/css3-flexbox/
dev.opera.com/articles/advanced-cross-br ...
www.adobe.com/devnet/archive/html5/artic ...
css-tricks.com/snippets/css/a-guide-to-f ...
developer.mozilla.org/en-US/docs/Web/CSS ...

И кое-что на русском:
css.yoksel.ru/flexbox/
frontender.info/a-guide-to-flexbox/
www.area53.ru/css3/kak-rabotaet-flexbox. ...

*****

Что означают все остальные слова, перечисленные в описании?

• Multi-column Layout — www.w3.org/TR/css3-multicol/ — многоколоночный текст из коробки.

Поддержка в браузерах: Опера с 11.50, IE — с десятой версии, Фаерфокс и Хром — с древних времён.

• Grid Layout — www.w3.org/TR/css-grid-1/ — сетка.

Поддержка в браузерах: только IE (начиная с десятой версии) и Edge.

• Template Layout — www.w3.org/TR/css3-layout/ — шаблоны.

Поддержка в браузерах: Фаерфокс с 22-й версии, Хром с 26-й версии, Сафари — с седьмой-восьмой (Винда в пролёте). В Опере и в IE отсутствует.

6 комментариев
fhfh 06-09-2015 23:04 0

opera.rulez, походу будущее - за флексбоксом

opera.rulez 07-09-2015 10:16 0

cherepets, Анекдот про бензопилу и рельс.

Кстати, ставишь flex-wrap:wrap, и всё не уместившееся переносится на новую строку. Причём всё будет выглядеть круче, чем с флоатами. Даже есть wrap-reverse, чтобы нумеровать строки наоборот.

Ставишь display:inline-flex, и родительский блок растягивается по количеству элементов.

Наконец, свойства overflow и clip, кажется, никто не отменял.

cherepets 07-09-2015 11:15 +1

opera.rulez, Это я понял, но почему сквозь них просвечают куски других элементов? Это какое-то совсем уж безумие.

opera.rulez 07-09-2015 12:45 0

cherepets, Безумие, да. Слона-то я и не заметил...

Блоки после седьмого не влезают в родительский элемент, а посколько меры для защиты от переполнения (flex-wrap или overflow) не приняты, «лишние» элементы отображаются, как будто у них position:absolute.

А просвечивают те куски, код которых находится ниже. Тут без z-index не обойтись.

Так же, кстати, можно распидорасить страницу и без флексбоксов, если у текста задать nowrap.

opera.rulez 15-11-2016 21:21 +1

fhfh, Неожиданно узнал, что всё новое — хорошо забытое старое.

Решил я смеха ради проверить, как выглядит ХВ в исторических браузерах. В четвёртом Нетскейпе всё распидорасило, потому что он не поддерживает CSS. Тогда я взял девятый Нетскейп, который на движке Firefox 2.0 (для справки: версии после четвёртой уже основаны на движке Mozilla (pre-Firefox), а начиная с восьмой — уже на Фаерфоксе). Неожиданно и в NN 9.0, и в Fx 2.0 распидорасило.

Стал искать причину распидорашивания. Оказалось, что это говно мамонта не поддерживает display: inline-block. Это такой хитрый элемент, который внутри выглядит как блок, а снаружи ведёт себя как строка.

В Интернет Эксплорере (<9) тоже нет inline-block, но в нём это решалось комбинацией display: inline и zoom: 1. Да, добавление в IE нестандартного свойства zoom к элементу заставляет его вести себя внутри как блок.

Стал искать, чем можно заменить inline-block в NN 9.0 и в Fx 2.0, и нашёл -moz-inline-box и -moz-box, которые делают нечто похожее на то, что делают новые inline-flex и flex. По сути W3C адаптировал то, что было предложено Mozilla десяток лет назад.

В старом Фуррифоксе ещё были -moz-inline-stack и -moz-inine-grid, которые выполняли менее очевидные трюки, и ещё куча всего: xiper.net/manuals/css/properties/display

06-09-2015 21:38 0

Видимо вещь хорошая, но так как я старенький, то и верстать пока буду по старенькому, потому как проблем не возникает, а дел хватает.

0 комментариев
07-09-2015 00:55 +2

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

0 комментариев
16-11-2016 10:33 +1

Верстать РЕАЛЬНО по-новому:
github.com/sylvainpolletvillard/postcss- ...

3 комментария
fhfh 16-11-2016 13:45 0

cherepets, <крутой сайт>Здрасте!</крутой сайт>

cherepets 16-11-2016 13:49 0

fhfh,
"+-------------------------------+"
"|------КРУТОЙ САЙТ ↑------|"
"+-------------------------------+"

opera.rulez 16-11-2016 15:32 0

cherepets, Это всего лишь препроцессор. Но забавно. А главное, наглядно.