верстка с использованием FLEXbox CSS

[sitecreator]

Решил вернуться к идее верстке шаблона с использованием flexbox. Думаю, что время настало.  Все современные браузеры понимают эту новую технологию CSS.

 

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

 

Особые проблемы создает тот факт, что до сегодняшнего момента еще не принята окончательная редакция по flexbox. (если ошибаюсь, то поправьте)  И есть немало браузеров (устаревших, но не древних), которые поддерживают старые редакции flexbox, да еще со своими особенностями и глюками, присущими конкретным браузерам.

 

Поэтому решил остановиться только на реализации flexbox  в последней редакции.  Браузеры, не поддерживающие flexbox в последней редакции  (не поддерживающие вовсе и поддерживающие предыдущие редакции)  должны все же отображать контент, пригодный для восприятия, но без использования flexbox .

 

Ищу сейчас идею, которая позволит обеспечить совместимость со старыми браузерами (3-х...4-х летней давности), совсем древние не вижу смысла рассматривать.

 

Возможно, что кто-то уже смог найти такую идею и реализовать?

 

Свои решения немного позже покажу.

Змінено 8 грудня 2016 користувачем sitecreator

[ArtemPitov]

 

 

принята окончательная редакция по flexbox.

Она уже пору лет как принята

 

 

 

озможно, что кто-то уже смог найти такую идею и реализовать?

Я верстаю на флексе только самое нудное, тобиш где нужно два блока выровнять, все остальное по старинке работает нормально 

ЗЫ\\ Дисплейн инлайн никто не отменял, так что вот и решения 

 

Все остальное за маня делает gulp и stylus

[sitecreator]

Я верстаю на флексе только самое нудное, тобиш где нужно два блока выровнять

 

по высоте?

ведь выровнять несколько блоков по высоте аккуратно умеет только flexbox (если методами CSS без JS).

 

Она уже пору лет как принята

 

да фиг знает. меня вот это смущает:

 

 

 

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

 

 

Публикация в качестве кандидата Рекомендации не означает одобрения членами W3C. Это проект документа и могут быть обновлены, заменены или устареть другими документами в любое время. Неуместно ссылаться на этот документ, кроме незавершенного производства.

 

 

 

и список с кучей предыдущих версий.  Чем они отличаются я не знаю.

 

ЗЫ\\ Дисплейн инлайн никто не отменял, так что вот и решения

 

это понятно.  вопрос в том как поэлегантнее и в какой последовательности код CSS разместить чтобы старые браузеры реагировали именно на inline-block, а новые только на флекс.

[ArtemPitov]

Вот Крис Коер предлагает решения 

https://css-tricks.com/using-flexbox/

 

туда еще можно инлайн впихнуть верху 

[ArtemPitov]

 

 

да фиг знает. меня вот это смущает:

Вот поэтому и вендоры появляются 

[pashast]

Если забить на этих ребят

 

и на этих 

 

То можно верстать спокойно

По закону подлости, у заказчика, который будет проверять сайт, будет 5й айфон с IOS6 или 11й ишак. Я отказался от flexbox после двух таких заказчиков.

[ArtemPitov]

@pashast, для этого нужно уточнять поддержку браузеров под какую делать и тогда можно не париться ) 

[pashast]

 

Вот Крис Коер предлагает решения 

https://css-tricks.com/using-flexbox/

 

туда еще можно инлайн впихнуть верху 

 

Это лишь малая часть флексбокса.

 

По-моему самый больший кайф, это

justify-content: 

http://theory.phphtml.net/css/justify-content.html

 

Для менюшек и всяких мелочей, типа пагинации, незаменимая вещь.

[pashast]

@pashast, для этого нужно уточнять поддержку браузеров под какую делать и тогда можно не париться ) 

Обычно заказчик отвечает. "Нужно под все браузеры и устройства"  :-D

[ArtemPitov]

Обычно заказчик отвечает. "Нужно под все браузеры и устройства"  :-D

тогда тариф - все деньги заказчика  :ugeek:

[sitecreator]

По закону подлости, у заказчика, который будет проверять сайт, будет 5й айфон с IOS6 или 11й ишак

 

это нередкость.

У меня заказчик принимал на ipad c IOS5!

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

 

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

 

Но ie11 со счетов сбрасывать никак нельзя, я так думаю.  С этим придется еще жить несколько лет.

 

 

 

По-моему самый больший кайф, это justify-content:

 

безусловно это то, что никакими другими средствами CSS красиво не решить, только JS.

 

 

 

Для менюшек и всяких мелочей, типа пагинации, незаменимая вещь.

 

верно.

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

 

пример как раз для менюшки:

 

 

Змінено 8 грудня 2016 користувачем sitecreator

[pashast]

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

Ситуация один в один была. Ох как и припекало же у меня тогда. Нафиг покупать телефон за 100500 денег, если использовать его как нокию 3310. Я просто в ярости был. 

[sitecreator]

Нафиг покупать телефон за 100500 денег, если использовать его как нокию 3310.

 

хотите еще прикол?

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

Но у него был фотоаппарат длиннофокусный типа профессионального.  Он отходил в дальний угол комнаты и делал фотоаппаратом "скриншот".  Я всего этого сначала не знал.

 

Когда он присылал мне скриншоты, то я поинтересовался почему они такие все смазанные и кривые. Я еще про фотоаппарат не знал. И получил ответ: "ну нелегко же фокусировать с рук 2-х килограммовый аппарат с расстояния в 5 метров".

 

Свое удивление мне сложно передать.  Даже не знаю, может быть это в раздел "юмор" нужно?  Но специально такое выдумать невозможно!

[HyperLabTeam]

http://v4-alpha.getbootstrap.com/getting-started/flexbox/

[ArtemPitov]

http://v4-alpha.getbootstrap.com/getting-started/flexbox/

она уже пол года как альфа ) 

[HyperLabTeam]

она уже пол года как альфа ) 

подождём ещё пол года :ugeek:

вообще если включат в 4ку то буит щщщикарно)

[ArtemPitov]

подождём ещё пол года :ugeek:

вообще если включат в 4ку то буит щщщикарно)

ну не знаю, меня и этот вариант устраивает что есть, я оттуда только сетку беру, иконки, парочку js и немного css  

[HyperLabTeam]

а если без сетки?)
самому зафигачить)

[ArtemPitov]

а если без сетки?)

самому зафигачить)

можно, но зачем ? 

[HyperLabTeam]

можно, но зачем ? 

тож верно)

 

[ArtemPitov]

тож верно)

 

http://getbootstrap.com/customize/#grid-system и все готово ) 

[HyperLabTeam]

не спорю)
но бывает что... )
ток до конца досмотреть)

[pashast]

не спорю)

но бывает что... )

ток до конца досмотреть)

Досмотрел. Сетка автора обещает быть интересной, но бутстрап в опенкарте не заменит.

[HyperLabTeam]

Досмотрел. Сетка автора обещает быть интересной, но бутстрап в опенкарте не заменит.

почему нет?

заменит для тех кто на подобном сверстает

 

[pashast]

@AWARO, потому что это по сути только Grid System из бутстрапа

а остальные элементы? пагинация, табы, попапы, тултипы, формы?

 

Все с нуля кодить и верстать? Не каждый заказчик на это бюджет выделит  :-)

Или оставить бутстрап, а эту сетку сверху прикрутить?