Конец адам вёрстки :)
 

Вчера наконец добрался до нового layout API CSS3, а именно flex, т.к. теперь это АПИ поддерживают все топовые версии браузеров (однако, в FF ещё есть отголоски старых версий flex и некоторые незначительные глюки).

Чтобы не писать самому полифилы для вендорный свойств я заюзал Stylus + Nib, которые уже стали для меня стандартом при разработке.

В общем пока по ощущениям от flex один восторг, ибо это именно то, чего так не хватало в CSS и уже можно начинать забывать костыли из float:left + overflow:hidden, position: absolute и display: table. Вёрстка становится простой и чистой и работает так, как и от неё ожидается, в общем ура товарищи!

http://www.w3.org/TR/css3-flexbox/

ЗЫ: кто следит за новинками CSS3 знают об ещё одном layout API - grid (изначально может показаться, что это тоже самое, что и flex, только в профиль, но на самом деле это не так:) ), но пока его к сожалению поддерживает только ИЕ 10+ и использовать его можно разве что для metro приложений.

http://habrahabr.ru/company/microsoft/blog/140715/

А как же отказ от традиционных шаблонизаторов в пользу архитектурных фреймворков типа Angular и Microdata DOM API?

Ммм, наверно я не в теме, а какой там ад?) И я не понял какое отношение имеет MVVP фреймворк и API информационной разметки к вёрстке ?)

Как минимум — отсутствие дата-биндинга.
Про микродату есть примеры у терми https://github.com/termi/Microdata-JS

Ну я в курсе про Microdata, просто я не понял как это относится к вёрстке:)

Ну дата-биндинг станет тривиальным после нормальной поддержки Object.observe и Proxy, да и разве в АПИ веб-компонентов это не предусмотрено?

PS:
Я имел ввиду, что раньше для того чтобы сделать банальный 3-х колончатый сайт нам приходилась применять очень странные техники и свойства, которое вообще не для этого создавались, а теперь нам таки наконец дали нормальное решение.

я тоже не понял. Насколько мне известно, верстальщики не довольны flex & grid. Можешь тут почитать.

Да в основном у людей вызывает негодование, что уже есть несколько книг, где описывается флекс, а на практике выясняется, что там говорится про версию стандарта, которая уже депрекейтед и хз как и что делать, т.к. этих версий суммарно 3 и у каждого свой АПИ:)

Но теперь то стандарт получил статус кандидата и поддержка последнего стандарта есть полная или частичная везде.

+ Я заметил что многие люди ревностно относятся к новым технологиям, т.к. они обесценивают их знания о костылях делая профессию верстака в разы проще, но это конечно бред:)

т.е. тред ты не читал? )

Ещё нет:)

UPD: прочитал, народ собрался в W3C писать свой стандарт?) Вспомнился анекдот про 14 конкурирующих стандартов:)

:blink: Что???!!!

Кто недоволен? А ниче, что один небезызвестный проект на flex сверстан?! ;)
Да я сру цветами от радости, что наконец можно забить на этот "прон" в виде костылей.

kobezzza,
Я уже опробовал, flex просто шикос. плюсую бешенно.

По поводу grid, меня чего-то не проперло, надеюсь в будущем будет поддержка везде.

У мозиллы есть кодогенератор, если им пользоваться, то проблем с разными версиями нет. Просто копипастишь готовый код и он работает. И главное работает так, как ты думаешь он должен работать, а не так как оно вдруг так ... **** почему?! *** ведь не должно.

Флекс избавляет не только от float и т.д. но и от max-, min- префиксов ... Да в нем 3 объявления одного и того же, но зато верстка ведет себя адекватно и ты понимаешь, что ее можно исправить, нужно просто найти место, а не пихать костыли до тех пор, пока чудо не произойдет, а если не произойдет, то js затыкать.

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

А ты ни чо не забыл?

каким образом css связано с дата биндингом?

++++++++++, я тоже расстроился когда узнал про веб компоненты но когда узнал про то какие они тупые и неудобные - обрадовался) я нормален?

хахах дадададда

Можно с этого места поподробней? А то я сплю и вижу как использую декораторы.

Сайт созданный чупокаброй http://www.fdd5-25.net/, для чупокабры :)

Кто-то ещё недоволен развитием верстки?!

знаем, видели :)

хороший пост

Сегодня попробывал "прибить" футер на flex и когда желаемое достиглось через:

display: flex;
flex-direction: column;
justify-content: space-between;

я чуть не кончил) Динамическая привязка к высоте, никаких хаков с паддингами и таблицами, это просто мечта!

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

Слова не мальчика, но нуба. :) ((с)Шекспир, атось)
Любая новая технология выглядит неочеведно. В этом нет ничего странного, ты её не знаешь.


Ну да, ну да, я пересел с шестерки на мерс, так и не понял чем он лучше шестерки. Она тоже едет. ))

окей, прибить футер таблицей
делаем высоту таблицы 100% а нижнему ряду задаём высоту

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

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

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

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

та я не помню уже когда таблицы для разметки на практике юзал)
просто все мего фичи флекса уже давно были в таблицах, не пойму от чего столько шума
на крайняк можно и блоку сделать display: table-cell но это как по мне не по пастафариански

просто оставлю это тут, может кому пригодиться http://css-live.ru/articles/flexbox-...azhenstvu.html

Я вообще потерял интерес к верстке, когда все стало просто. Что-то особенное было в этом адовом количестве старых браузеров, раскиданных по виртуальным машинам, поиск техник и решений доставлял какое-то удовлетворение что ли :)
И сейчас верстальщики утонули в куче фреймворков…

а разве этими флексами можно сверстать шаблон, у которого нет сетки?

любой шаблон.

Небольшая куча однако: sass, less и stylus.

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

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

Их и сейчас меньше всего на 1. Но зато стало больше всяких Хром 13,14,15,16 ... 33

Изучение с "нуля" современных фреймворков, препроцессоров, темплейтеров, методологий и пр. инструменты для деплоя требует очень много времени.

... сюда подставить что-угодно

вспомним о готовом
http://usablica.github.io/front-end-...s/compare.html