Jump to content
  • Sign Up

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


SelenIT
 Share

Recommended Posts

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

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

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

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Edited by SelenIT
Link to comment
Share on other sites

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

 

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

Edited by SelenIT
  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

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

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

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

Link to comment
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.

 Share

  • Similar Content

    • vladdvin
      By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • РоманФ
      By РоманФ
      Здравствуйте, только начал изучать основы, поэтому прошу не судить строго, буду благодарен за ответ.
      Не понимаю как сместить картинку местоположения как на примере(пример выгрузил на поддомен)
      http://training.maggle.ru/
      Прикладываю код, если там что то не правильно указал подскажите, по семантике.
      https://jsfiddle.net/RomanFF/rbe4kz0j/6/
       
    • Yurii.Vovchuk
      By Yurii.Vovchuk
      Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка).
      Применил align-items:flex-start, думал что сработает, но нет...

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

      чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере
      можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер?
      мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван..
      Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался
×
×
  • 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