SelenIT

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

Recommended Posts

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by SelenIT

Share this post


Link to post
Share on other sites

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

 

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

Edited by SelenIT

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By four17
      Можно ли с помощью css выровнять блоки одинакового по уровню ? 
      вот картинка.
       
      Высота блока должна быть не фиксированной .Контент может быть  в любом количестве . Блоки с контентом должны быть на одном уровне .  Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим  описание  , цена на одном уровне с ценой.
      Каким способом можно реализовать данное решение ? спасибо за внимание.
    • By d0ublezer0
      zebra-tara.ru
      на главной странице есть блок с популярными товарами

      чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере
      можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер?
      мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван..
      Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался
    • By SnowSilver
      Почему line-height на высоту inline элемента не влияет, а на inline-block влияет ?
      Например изначально, при дефолтном размере шрифта в 16px, высота строки в хроме показывает 18.18px. И если применим line-height: 1; - то высота не изменится.
      А если мы превратим строчный элемент в inline-block, тогда высота уменьшается до 15.45px - и тогда высота строки равняется почти размеру шрифта. Хотя line-height: 1 это множитель шрифта, по идеи в моем понимание высота должна равняться 16px, а не 15.45.
      Эти значения получены у не стандартного шрифта... Но это сути не меняет.
      Небольшая заготовка - https://codepen.io/anon/pen/Qxpgoe. Правда там у строчного  элемента изначально 17px , а у инлайн блока после установки line-height:1 -  16px.
       
       
       
  • Member Statistics

    46,436
    Total Members
    3,128
    Most Online
    bauka2288
    Newest Member
    bauka2288
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.