Flexbox на примере игрального кубика

[@PatapSmile]

Укажите, что это — перевод.

[@meam]

В песочнице нельзя указать, что это перевод

[@MaximChistov]

>топики-переводы желательно оформлять соответствующим образом
в песочнице с этим проблемы)

[@meam]

Я бы рад оформить, как перевод, но только могу оставить ссылку в конце статьи. Забыл сделать это при первой публикации.

[@glagola]

Судя по can i use, на данный момент, flexbox в РФ поддерживают 85.13% (с префиксами) и 72.34% (без префикса).

[@meam]

В оригинальной статье, автор берет глобальные данные

[@glagola]

Это не критика, а дополнение поста в контексте русских реалий.

[@Serator]

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

[@meam]

Если нажать «Showing all», то можно увидеть еще мобильные браузеры

[@Novitsky]

А подскажите, пожалуйста, где по вашей ссылке написано про Россию? Я что-то не нашел упоминания.

[@glagola]

[@Novitsky]

Странно, а у меня почему-то нет этих данных

Что надо сделать, чтобы включить?

[@glagola]

Хороший вопрос) не нашел ни одного dropdown'a с выбором страны, видимо нужно зайти на сайт с ip из России

[@Novitsky]

Вот я тоже не нашел.
Захожу из России. На других сайтах Москва определяется без проблем.

[@Serator]

См. срин.

[@PragmaticProgrammer]

Спасибо автору за перевод!

У меня дилетантский вопрос к местным профи во фронтенде: а возможно ли как-то сделать на css, чтобы грани кубика отрисовывались с помощью задания только лишь классов контейнеров? То есть без задания внутреннего содержимого html в виде тэгов …

Допустим, это бы пригодилось для создания своего css-фрэймворка, где были бы доступны такие кубики или другие красивые компоненты в виде присвоения тегам нужных классов.

[@PragmaticProgrammer]

Да, второй вариант, пожалуй — то что нужно (со скрываемыми элементами).

[@paramtamtam]

Посмотрите этот пост, вам должно понравиться

[@dom1n1k]

Есть популярный миф, что flex еще не готов к использованию. Но это не так! У 93% людей сейчас запущен браузер, поддерживающий flexbox.

А недостающие 7% — это совсем не мало.
Многие не понимают, что в словосочетании graceful degradation ключевое слово — первое. То есть можно спокойно жертвовать укарашательствами, но каркас, основной лейаут страницы — это святое. Он должен быть железобетонный.
Свойствами типа box-shadow можно было пользоваться даже при поддержке 50%. Но если свойство потенциально способно поломать вёрстку — надо трижды подумать.

[@dom1n1k]

«Скромно в одну колонку» — это какой-то сферически-идеальный случай, который может случиться при определенной удаче.
В реальности там скорее всего будет непредсказуемое месиво из менюшек, шапок, контента, сайдбаров и так далее.
Единственная реакция в этом случае — крестик на табе.

[@TiGR]

В ряде ситуаций можно сделать вполне graceful degradation при помощи modernizr и display: table-cell и подобных трюков.

[@dom1n1k]

То есть поддерживать 2 параллельные версии верстки? Оно-то можно, но смысл? Я лучше одну, пусть и не самую передовую с точки зрения новых стандартов. (Поймите правильно — я не говорю, что флексбокс не нужен вообще. Но я применяю его не очень часто и с осторожностью).

Что же касается модернайзера, то я придерживась мнения, что опять-таки, когда речь идет о критичной части верстки (лейауте) — недопустимо завязывать его на JS. Все должно работать на голом CSS. Дополнительные рюшечки, вторичные функции — да, пожалуйста.
Оговорка — речь идет именно о сайтах, web apps — конечно, отдельная песня, там от JS никуда не денешься.

[@TiGR]

Пользователей без JS в 2015 году пренебрежительно мало, гораздо меньше, чем пользователей без flexbox (сильно меньше одного процента) — по моим сайтам где-то 0,1%. Даже Opera Mini на устройствах Symbian поддерживает JS в нужном объёме для работы modernizr. А большинству, кто его не поддерживает (то есть роботам) как-то фиолетово на вёрстку. Нужно понимать, что с годами этот процент значительно уменьшился по мере роста числа пользователей интернет и развития технологий безопасности в браузерах, так что отключение JS стало почти лишено смысла даже для людей, беспокоящихся о безопасности.

А если пользователь в 2015 году отключает JS, то он ССЗБ и знает на что идёт. А если у человека паранойя, то нужно лечиться, а не потворствовать заболеванию, отключая JS.

[@dom1n1k]

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

[@dom1n1k]

Во, нагуглил: frontender.info/everyone-has-js
Мне казалось, что статья была на самом Хабре, но она тут только упоминалась в одном из дайджестов.

[@TiGR]

Вопрос тут не в том, что может вызывать это. А в том, каков процент посетителей, реально с этим сталкивающимися? Часть того, что там упоминается относится также и к CSS. Не использовать CSS? Или делать вёрстку опираясь на то, чтобы она и без CSS была нормально рабочей? Или встраивать базовый CSS в страницу?

Если у пользователя сетевые лаги и что-то не загружается, то как бы понятно, что проблема не в сайте, а в том, что у него в принципе сеть барахлит. Как-то вообще крайне сомнительные там аргументы.

[@dom1n1k]

Понятно, что проблема в сети. И понятно, что решить её на 100% не в наших силах.
Но стремиться сгладить её насколько это возможно — можно и нужно.