Инлайн-блочная сетка с прогресс. улучшением до флексбоксов

[SelenIT]

Подумалось тут в развитие старой темы.

По сути, используя инлайн-блоки со «скукоженными» пробелами между ними, мы ведь пытаемся эмулировать «новые» флексбоксы (в т.ч. в многострочном режиме — flex-flow: row wrap) с flex: none. И у нас есть надежное средство «скукожить» пробелы везде, кроме вебкита (отриц. word-spacing с запасом), лекарство для старых вебкитов (display: table для контейнера) и... собственно флексбоксы в новых вебкитах (Хром-Канарейка и т.п.) . А также @supports, чтобы все остальные могли перейти со старых костылей на правильный флексбокс, как только смогут сделать это наверняка.

Тем самым мы избавляемся от подгонки «магических» значений для двух похожих, но сильно неодинаковых по действию свойств (word-spacing и letter-spacing) и, по идее, получаем решение, с которым история как в ссылке выше уже точно не приключится. Старые костыли будут использоваться только в старых браузерах, где баги/фичи, на которых они основываются, заведомо работают. А новые браузеры будут плавно переходить на стандартное решение, не требующее костылей. Чем не прогрессивное улучшение? Правда, в новых вебкитах (и будущих браузерах) и всём остальном задача решается разными технологиями — но фактическое поведение очень похоже. Причем старая технология, можно сказать, проверена временем, а новая зато специально «заточена» именно для этой задачи.

Прошу посмотреть пример (я взял за основу те же YUI Grids, откуда расползлись эти загадочные -.43em) и покритиковать идею и реализацию

[Zverushka]

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

http://css-tricks.com/does-flexbox-have-a-performance-problem/

[SelenIT]

Там в комментах Пол Айриш навел относительную ясность, что это относилось к старой реализации (синтаксис 2009 года). А новые флексбоксы, по его данным, получились в два с лишним раза быстрее старых и в полтора раза быстрее table-cell'ов. Так что оптимизированы они, видимо, неплохо. А флексбоксы, у которых от «флекс-» одно название, как здесь (flex: none), по идее, тем более не должны вызывать каких-то лишних оверхедов — размеры известны заранее, пересчитывать/перерисовывать ничего, кажется, не надо...

[Vin]

Круто! А теперь буду разбираться, т.к., например, о такой инструкции, как @supports, узнал всего 2 дня назад. Неудивительно, ведь её поддержка пока не впечатляет — только свежие версии FF, хрома и оперы.

[lexxcode]

@supports у меня вечно вызывает мысли о том, что ребятки опоздали с ним лет на 10, сейчас от него толку ноль, я считаю.

[SelenIT]

А по-моему очень как раз. Например, для текущего актуального на момент поста Fx, который те же флексбоксы формально вроде как поддерживает (даже без префикса!), а фактически — едва-едва наполовину, потому что нет wrap-а. Благодаря @supports можно «доверять» ему флексбоксы лишь с того момента, когда он научится научился (с 28-й версии) понимать их на все 100, не засоряя при этом код браузероспецифичными хаками...

Edited January 6, 2015 by SelenIT

[lexxcode]

То есть получается на данный момент в Fx будет display: table; ?

[SelenIT]

Увы... Но, надеюсь, ненадолго. Впрочем, чисто для горизонтальной сетки можно и включить.

 

UPD: теперь уже будет display:flex без вариантов.

Edited January 6, 2015 by SelenIT

[NickaBelcka]

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

http://css-tricks.co...rmance-problem/

Так и есть, я сначала не могла понять от чего эти проблемы, но потом нашла причину.

[SelenIT]

NickaBelcka, а можно минимальный тесткейс? И с каким синтаксисом была проблема — старым или новым?