sitecreator

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

Рекомендуемые сообщения

sitecreator    521

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

 

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

 

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

 

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

 

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

 

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

 

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

Изменено пользователем sitecreator

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    386

 

 

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

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

 

 

 

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sitecreator    521

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

 

по высоте?

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

 


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

 

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

 

9c453a6f12.jpg
 

 

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    386

 

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    376

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

BWWH9ALBT5CY652aue4Ng5FR1PRezR.png

 

и на этих 

NI2ryME82XsXDA5LwDP5y3tqFU2fJD.png

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    386

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    376

 

Вот Крис Коер предлагает решения 
 
туда еще можно инлайн впихнуть верху 

 

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

 

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

justify-content: 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    376

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    386

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sitecreator    521

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

 

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

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

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

 

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

 

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

 

 

 

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

 

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

 

 

 

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

 

верно.

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

 

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

 

188666199c.jpg

 

fc96f856fe.jpg

Изменено пользователем sitecreator

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    376

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sitecreator    521

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

 

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

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

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AWARO    591

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    386

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AWARO    591

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    386

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AWARO    591

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

тож верно)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AWARO    591

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    376

не спорю)

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AWARO    591

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

почему нет?

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    376

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу