Адаптивные колонки

[CyberAP]

Забудьте про эмуляцию Media Queries в IE, они там не нужны.

[juniorcoder]

Спасибо, пригодилось.

[Nnear]

Ух ты. А вот это весьма полезно, а то наш верстальщик как-то несколько костыльно сделал.
Спасибо, Кирилл!

[CodeByZen]

Действительно современное и элегантное решение. Плюсую автора.

[Kokoff]

Очень грамотно. А главное — более чистый HTML.

[VolCh]

А поделились с общественностью?

[uranik]

То есть это решение давно устарело и теперь у вас есть более правильное?

[lolmaus]

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

Добавлю, что между selectivizr и Respond.js были успешные попытки заставить их работать вместе в IE<9 (примеры: раз, два), но, к сожалению, до production- ready решения дело не дошло. :( Если дружите с JavaScript, можно попробовать этот хак.

[fledgling]

Использовать «!important» — плохая практика.

[northbear]

Я не верстальщик, конечно, но всё же… А не проще ли в этом случае использовать display: inline-block?

В этом случае вообще никаких заморочек с адаптивностью нет.

Просто давеча была об этом статья…

[northbear]

Дык, между колонками в схемах автора всё равно есть некий марджин. Так что в данном случае пробелы мне не кажутся проблемой… Вопрос лишь в том, как в этом случае правильнее/удобнее регулировать расстояние между колонками…

[lolmaus]

Колоночная верстка на inline-block по определению требует удаления пробелов между блоками в HTML-коде.

Если у вас там пробелы, you're doing it wrong.

Если пробелов нет, то и недостатка у данного метода нет.

[CyberAP]

Ну как это не готов. 65% пользователей его смогут оценить.

[CyberAP]

Можно для новых браузеров сделать поддержку через @supports, старые браузеры этот код будут игнорировать.

[CyberAP]

Ну это в любом случае, без фоллбэка применять flexbox слишком опасно.

[CyberAP]

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

[CyberAP]

Я пока не встречал быстрых полифилов, особенно если их примнять на тяжёлых страницах. Как в примере с флекбоксом можно вообще убрать колонки и оставить элементы списком для старых браузеров. Это так же читаемо и не тормозит.

[pxx]

Не пугайте людей. Вы привели акумулированную статистику за весь год, а за 12 месяцев ситуация все таки изменилась: мир, РФ.

[lolmaus]

Спецификация flexbox недавно была существенно переделана.

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

Полифилл Flexie.js и SASS-тулкит Compass работают с устаревшей версией flexbox.

Пруфлинк (август 2012): css-tricks.com/old-flexbox-and-new-flexbox/

Так что до использования flexbox в деле еще пока очень далеко. :(

[lolmaus]

Ну, Compass скоро подтянется.

[lolmaus]

Хм, я использовал как раз inline-block и сабж применял для отмены margin'а у последнего элемента в строке.

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