Jump to content

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


Recommended Posts

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

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

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

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

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Edited by SelenIT
Link to post
Share on other sites

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

 

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

Edited by SelenIT
  • Like 1
Link to post
Share on other sites
  • 3 weeks later...

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • 3 Опрос

    You do not have permission to vote in this poll, or see the poll results. Please sign in or register to vote in this poll.
  • Обсуждения

    • Почему при адаптиве налазят блоки друг на друга?
    • Как правильно сделать оформить header используя только html и css  чтобы получилась как на этом макете Почему у меня правое меню постоянно плавает и как кнопку поиска правильно спозиционирорвать в самой форме чтобы она никуда не уезжала? Что не так в моем коде? https://jsfiddle.net/kjgydnfs/27/
    • Спасибо!!!     А почему в этом задании перезаписав значение  для псевдоэлемента after на то что ниже по коду, он перекрыл другой псевдоэлемент before, соответственно убрав половину видимой области этого псевдоэлемента. Почему, например, не before выше чтобы перекрыть after?
    • Здравствуйте. Не обязательно делать одну линию через 3 блока. Можно её реализовать как отдельный блок, конфигурируемый, с точкой. Позиционировать в рамках каждого блока-родителя
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy