- сетка на float;
- сетка на inline-block;
- сетка на flexbox.
Сетка на inline-block имеет свои особенности, плюсы и минусы, которые следует рассмотреть.
Введение
Сетка, в которой для расположения элементов в ряд используется свойство float: left или float: right используется в большинстве html-фреймвоках (Foundation, Bootstrap и пр). У нее есть свои плюсы и минусы. Думаю, она популярна потому, что была первым достойным решением после табличной верстки, а также поддерживается старыми браузерами. Однако работая с ней я встретила в ней по крайней мере 2 существенных недостатка.
- У элемента с заданным свойством float отсутствует высота и поэтому тяжело выровнять дочерние элементы по вертикали.
- Если несколько элементов с свойством float расположены по горизонтали в один ряд и предыдущий элемент (пусть это элемент А) имеет большую высоту, чем последующие (элементы В), то при переходе на следующую сточку один из элементов В может «зацепится» за элемент А и не попасть в начало строки. В фреймвоках эта проблема решается наличием элемента-строки (в Bootstrap — это класс row), но тогда нужно четко знать, сколько элементов будет в ряду. А если товары на странице категории выводятся в цикле и на десктопе они должны располагаться по 5 в ряд, а на мобильном — по 3?
Эти недостатки привели меня к поиску других решений. Естественно, хорошим решением есть сетка с использованием flexbox, которая позволяет гибко настроить расположение элементов внутри контейнера. Ее главным недостатком есть поддержка только современными браузерами. Но хотелось попробовать и другие решения. Прочитав несколько статей об использовании элементов со свойством display: inline-block для выравнивания элементов и расположении в ряд, я принялась искать сетку на inline-block. Однако ничего готового для использования в проектах я не нашла. Только отдельные заготовки. Поэтому, я решила сама создать такую сетку. Для именования классов я использовала методологию БЭМ (Блок-Элемент-Модификатор). Итак, давайте рассмотрим что получилось.
Брейкпоинты и нормализация тегов
В сетке используются следующие брейкпоинты (контрольные ширины браузера, при которых меняется расположение блоков) и префиксы для них:
- xs: 480рх,
- sm: 768рх,
- ms: 1024рх,
- md: 1280рх,
- lg: 1440рх,
- mg: 1680рх.
Для сетки используется минимальная нормализация элементов, необходимых для корректного отображения контента:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}
html {
font-size: 10px;
}Однако можно использовать ее вместе с другими библиотеками (Reset.css, Normalize.css и пр). В сетке также все размеры указаны в единицах rem, которые относительны шрифту элемента html. Поэтому для масштабирования шрифт html на разных брейкпоинтах меняется:
@media (max-width: 1680px) {
html {
font-size: 9.5px;
}
}
@media (max-width: 1440px) {
html {
font-size: 9px;
}
}
@media (max-width: 1280px) {
html {
font-size: 8.5px;
}
}
@media (max-width: 1024px) {
html {
font-size: 8px;
}
}
@media (max-width: 768px) {
html {
font-size: 8.5px;
}
}
@media (max-width: 480px) {
html {
font-size: 7px;
}
}В сетке по умолчанию используется 24 колонки и следующие отступы между блоками: 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50. По поводу отступов следует объяснить. Отступ, скажем, 15 — это не 15рх! Это означает, что на ширине браузера 1920рх (которую я принимаю как отправную точку, поскольку для этой ширины чаще всего создается дизайн сайта) отступ блока с одной стороны будет 15рх. А учитывая, что шрифт html на этой ширине равен 10рх, то отступ в сетке задается как 1.5rem. На меньшей ширине шрифт html будет меньше и отступы тоже уменьшатся.
Брейкпоинты, количество колонок, отступы и стартовый шрифт html можно изменить в SASS-версии сетки и сгенерировать нужную для проекта сетку.
Основные блоки сетки
В сетке я использую 3 основных блока:
- класс grid — для обозначения внешнего блока;
- класс box — для обозначения дополнительного блока внутри grid;
- класс cell — для обозначения внутренних блоков внутри grid или box.
Итого, сетка имеет такую структуру:
<div class="grid">
<div class="box">
<div class="cell">Элемент 1</div>
<div class="cell">Элемент 2</div>
<div class="cell">Элемент 3</div>
</div>
</div>Или такую:
<div class="grid">
<div class="cell">Элемент 1</div>
<div class="cell">Элемент 2</div>
<div class="cell">Элемент 3</div>
</div>Если так, то сразу напрашивается вопрос: А зачем тогда дополнительный блок box? Блок box может быть только одним внутри grid и необходим, если нужны отступы между внутренними блоками или выравнивание внутренних блоков.
Модификаторы блока grid
Блок grid имеет следующие модификаторы:
- grid--size применяется в случае, если ширина блока фиксирована и на каждом брейкпоинте она равна ширине предыдущего брейкпоинте. Например, если ширина браузера 1366рх, и в блоке grid указать модификатор grid--size, то блок будет иметь ширину 1280рх и будет располагаться по средине.
- grid--st, grid--sm, grid--ms, grid--md, grid--md, grid--mg — применяется если нужно, что бы ширина, начиная с какого-то брейкпоинта, была фиксирована, а до этого блок будет распространяться по всей ширине. Например, если использовать модификатор grid--md, то на ширинах меньше 1280рх блок будет иметь ширину 100%, а начиная с ширины 1280рх будет равен этой ширине.
- grid--col24 применяется, если нужно использовать колонки указанной ширины. Поскольку можно сгенерировать несколько-колоночную сетку (например, 24 колонки и 35 колонок), то можно использовать модификаторы grid--col24 и grid--col35. Первый даст возможность располагать элементы по 2, 3, 4, 6, 12 в ряд, а второй — по 5 и 7 в ряд. Это бывает нужно, если в дизайне используется различное число колонок.
- grid--g10, grid--v10, grid--gv10 задают отступы между внутренними блоками (cell) соответственно только по горизонтали, только по вертикали и в обоих направлениях. Цифра в конце (в данном случае 10) указывает на ширину отступа с одной стороны. Например, если мы хотим отступы между внутренними блоками в 3rem только по горизонтали, то внешнему блоку нужно задать модификатор grid--g15. Однако тут есть 2 тонкости:
- По горизонтали блок может иметь одинаковые отступы и справа, и слева, в то время, как по вертикали делается двойной отступ снизу. Это сделано для удобства, поскольку в основном первый блок начинается сверху без отступа, а блоки, идущие снизу должны отделяться от него отступом;
- Отступы делаются только внутри между внутренними блоками, а снаружи они плотно прилегают к внешнему блоку.
- По горизонтали блок может иметь одинаковые отступы и справа, и слева, в то время, как по вертикали делается двойной отступ снизу. Это сделано для удобства, поскольку в основном первый блок начинается сверху без отступа, а блоки, идущие снизу должны отделяться от него отступом;
Модификаторы блока box
Блок box имеет следующие модификаторы:
- box--left, box--right, box--center, box--justify используется, если нужно выровнять колонки по горизонтали соответственно слева, справа, по центру и по всей ширине.
- box--top, box--bottom, box--middle используется, если нужно выровнять колонки по вертикали, соответственно сверху, снизу и по центру.
Модификаторы блока cell
Блок cell имеет следующие модификаторы:
- cell--none, cell--auto, cell--full задают как будет отображается внутренний блок по умолчанию: будет скрыт, иметь собственную ширину или распространяться на всю ширину родителя;
- cell--col1, cell--col2, cell--col3 и т. д. задают конкретную начальную ширину внутреннего блока. Например, модификатор cell--col2 означает, что блок будет занимать 2 колонки;
- cell--st5, cell--xs10, cell--md15 и т. д. ширину внутреннего блока на определенном брейкпоинте. Например, модификатор cell--md15 означает, что ширина блока будет составлять 15 колонок при ширине экрана < 1280px (md).
- cell--left, cell--right, cell--center, cell--justify задают выравнивание элементов нутри блока по горизонтали соответственно слева, справа, по центру и по всей ширине;
- cell--top, cell--bottom, cell--middle задают выравнивание по вертикали, соответственно сверху, снизу и по центру. Однако следует учесть, что поскольку внутренние блоки имеют свойство display: inline-block, то по вертикали они выравниваются относительно друг друга, а не родителя! Поэтому, чтобы выровнять в блоке по вертикали, например, по центру, нужно обоим блокам поставить модификатор cell--middle.
Пример применения модификаторов
Следующий участок кода показывает, как могут применяться различные модификаторы вместе:
<div class="grid grid--col24 grid--size grid--gv15">
<div class="box box--middle">
<div class="cell cell--none cell--md8 cell--sm24">
Элемент 1
</div>
<div class="cell cell--none cell--md8 cell--sm24 cell--center">
Элемент 2
</div>
<div class="cell cell--none cell--md8 cell--sm24 cell--right">
Элемент 3
</div>
</div>
</div>Заключение
Исходные файлы сетки и пример ее использования можно смотреть тут. Обратите внимание, что в репозитории есть файл grid-inline-block.css с скомпилированной сеткой с указанными выше параметрами. Но также имеется и файл grid-inline-block.scss, используя который можно скомпилировать свой вариант сетки.
Созданная сетка имеет свои плюсы:
- Решает проблемы с сеткой на float и делает по сути то же самое.
- В отличии от сетки на float может выравнивать элементы по вертикали, а также задавать разное количество колонок или разные отступы.
- В отличии от сетки на flexbox поддерживается и более старыми браузерами, например, ИЕ9 и старыми версиями Android.
- Позволяет внутренние блоки скрывать или показывать на нужной ширине экрана.
- Имеет интересную способность выравнивать элементы по вертикали относительно друг друга. Это бывает полезным для пунктов меню.
- Большое количество внутренних блоков с разными модификаторами могут находится в пределах одного внешнего блока и они друг другу мешать не будут
- Позволяет создавать бесконечную вложенность внешних блоков.
Однако сетка и не лишена недостатков. Вот некоторые из них:
- При задании последнему внешнему блоку (например, подвалу сайта) модификаторов grid--v10 или grid--gv10 (10 — это для примера), то есть которые задают вертикальный внутренний отступ, то этот последний блок не будет прижат к низу страницы. Это связано с тем, что отрицательный margin-bottom, который тут используется не работает в сочетании с нижней границей body. Решить эту проблему можно просто не задавая указанный модификаторы последнему блоку.
- Хоть сетка и имеет некоторую гибкость в выравнивании внутренних блоков, но ей не сравнится в этом с flexbox.
- Если по каким-то причинам внутренний блок стал больше по ширине, чем то место, что ему было отведено (такое может произойти, если не задавать конкретную ширину внутренним блокам, а ограничится только классом cell), то этот блок перескочит на новую строчку, что часто не желательно. Поэтому такие моменты нужно продумывать сразу.
Не могу сказать, что эта сетка лучше всех и что все ее должны использовать. Но думаю, она имеет право на существование наряду с другими.
Комментарии (139)
justfly1984
13.02.2017 20:39-3И вообще размеры в пикселях — прошлый век. Без html { font-size: 62.5% } и layout в rem в 2017 году писать нельзя!
babenkoma
13.02.2017 20:40+1Про html согласна. А почему в rem нельзя писать?
justfly1984
14.02.2017 03:00+2В rem писать нужно!
И em в тех местах где без него нельзя.
Пиксели остаются только в пределах media деклараций.
Вопрос к тем кто меня заминусовал, вы серьезно так отстали от жизни?
Если вам нужен fallback для пикселей, есть же инструменты автоматизации!
raveclassic
13.02.2017 23:50+1Угу, объясните это дизайн-команде, вымучивающей каждый пиксель.
justfly1984
14.02.2017 08:38Пусть они свои пиксели в фотошопах мучают, а в верстке пикселям места нет!
raveclassic
14.02.2017 09:43Вы не подумайте, что я тут против rem задвигаю, ни в коем случае. Просто если вам нужна страница с контентом, это прекрасный выбор, а если массивная торговая платформа, где зашкаливает количество всяких крутилок на квадратный сантиметр, то это просто пустая трата времени, ибо никогда у вас пиксель-перфект на выходе не сойдется при смене размеров/зума. А если еще и респонсив не нужен, то и автоматизироваться смысла нет.
Не все верстают текстовый и/или легко тянущийся контент, а вы слишком категоричны в суждениях, вот и схватили минусов, а не из-за того, что кто-то «отстал от жизни».justfly1984
14.02.2017 19:50Если вы задали 1 rem === 10px то ничего у вас никуда никогда не поплывет, зато media по объёму кода похудеют раз в 5 как минимум.
raveclassic
14.02.2017 21:23+1А теперь пользователь ставит 11px. Мой поинт не в том, что rem — плохо, а в том, что это не серебряная пуля, и не стоит так категорично утверждать обратное.
justfly1984
16.02.2017 07:01Пожалуйста объясните мне как пользователь поменяет размер rem? он же задается в CSS вами, как html { font-size: 62.5%; } // 1 rem === 10px и дальше масштабируется media screen and (max-width: ...px) { html { font-size: ...% }} // 1rem === ...px
Как пользователь задаст 1rem === 11px? если он полезет ручками в CSS то он сам себе злой буратиноraveclassic
16.02.2017 12:55Мне любопытно, как это вы так лихо в css задаете размер rem? И еще, вы знаете, почему именно 62.5%? И уж совсем любопытно, как это вы не знаете, как пользователь может сменить себе размер шрифта.
Не заметил комментарий выше.
Aingis
14.02.2017 12:01+2Вообще-то, это утверждение стало спорным с тех пор как браузеры научились масштабировать страницу целиком, сохраняя все пропорции (IE7+, Firefox 3+, iPhone 1+ и т.п.). То есть уже как девять лет.
sumanai
14.02.2017 16:43Научились то научились, но не все любят смазанные картинки. Например на хабре я увеличил только шрифт.
Prometheus
13.02.2017 21:28Если у вас БЭМ, тогда:
reset.css использовать не нужно
* {} — очень плохо, он вам не нужен
normalize.css — он вам тоже не нужен, пропишите дефолтные свойства, только тем тегам, что вы реально используете в проекте и то, как вам нужно, чтоб потом не переопределять.
Следующий момент, инлайн-блоки плохо годятся на роль сетки. Настоящая сетка — это разделение по горизонтали И по вертикали.
На текущий момент делить по вертикали могут только display: flex;
(ну и таблицы, привет old school)
babenkoma
13.02.2017 21:41+1На работе мы используем normalize.css, а я бывает использую * {}. Но я повторюсь, это косвенно относится к сетке. Можно вообще не нормализовать теги.
По поводу того, что инлайн-блоки плохо годятся на роль сетки, не могу с вами согласится. Инлайн-блоки выравниваются и по-горизонтали, и по-вертикали. По крайней мере лучше выравниваются, чем флоаты, на которых работают почти все html-фреймвоки.Prometheus
13.02.2017 22:04>>инлайн-блоки плохо годятся на роль сетки, не могу с вами согласится
сделайте реальную сетку:
1) header
2) main (тут section & aside)
3) footer
шапка должна быть сверху.
в самом низу окна браузера подвал.
между шапкой и подвалом блок main, в котором справа расположен aside, который располагается по всей высоте экрана.
xes
14.02.2017 08:56* {} — очень плохо
Почему?Prometheus
14.02.2017 10:56-1Это очень ресурсоемкий селектор.
sumanai
14.02.2017 16:44Часто слышу этот аргумент, а тесты где? На реальном использовании в 1-2 таких вхождения, а не 10000 селекторов.
dom1n1k
14.02.2017 23:03Да чушь это. Легенда, 1000 раз переданная из уст в уста. И каждый участник цепочки думает «ну если так много об этом говорят, значит наверное правда».
Ну то есть это действительно не самый быстрый селектор на свете, но в общем ряду пожирателей ресурсов и врагов перфоманса он стоит где-то на сороковом месте.justfly1984
16.02.2017 07:08Есть best practices, есть worst practices. Если вы постоянно используете best practices и избегаете worst practices то вы становитесь лучше как профессионал и вам больше платят. А если тяп ляп и в продакшен, то больше 20$ в час вам платить никогда не будут и ваши прямые конкуренты — индусы.
dom1n1k
16.02.2017 16:53+1Никакая это не worst практика, а самая обычная.
У нее есть и достоинство — надежность. Завтра появится новый тег и он точно ничего не поломает.
По производительности там разница настолько копеечная, что видна разве что только в микроскоп. Хотя можно искусственно сгенерировать такой пример, где это станет заметно, но к реальной практике он не будет иметь никакого отношения.
Обычно люди, которые громче всех возмущаются медленностью звездочки, почему-то игнорируют кучу других, гораздо более серьезных, неоптимальностей.
Prometheus
15.02.2017 12:02Селектор звездочка применяется КО ВСЕМ без исключения элементам документа.
Вот сколько у вас в документе тегов — он применится ко всем. И это ресурсоемко, в отличие от конкретно заданного класса.
Вопрос — зачем к элементам a, span, b, div применять margin:0;padding:0 когда у них итак это дефолтные значения.
ncix
13.02.2017 22:35+5Чего только не придумают, лишь бы table не использовать
babenkoma
13.02.2017 23:31Вы умеет делать на таблицах responsive-верстку с перестройкой блоков?
anttoshka
14.02.2017 00:26Разве имитация таблицы на css не позволяет сделать перестройку блоков?
.block {display: table;}
@media all and (max-width: 1000px) {
.block {display: block;}
}
dom1n1k
14.02.2017 23:05Можно, но на практике потом больше проблем получаешь с этой кучей плохо управляемых блоков (за исключением очень простых случаев).
anttoshka
14.02.2017 23:13Да, поэтому лучше таблицу использовать только когда это действительно таблица. В других случаях как по мне намного лучше flexbox.
SelenIT3
22.02.2017 13:50Не так уж плохо они управляемы. Главная проблема — если внутри что-то слишком широкое, что может распереть всю конструкцию. Но это в любом случае проблема).
Зато выравнивать произвольное содержимое по вертикали таблицы пока умеют даже лучше флексбоксов:)anttoshka
23.02.2017 00:29Баг легко фиксится оборотом текста в див :)
SelenIT3
23.02.2017 00:37Во-первых, это не баг, а стандартная особенность инструмента. А во-вторых — зачем брать инструмент, которому для решения задачи нужны подпорки в виде допразметки, когда другой инструмент в лёт решает задачу без них? :)
anttoshka
23.02.2017 00:43Ну ок, пускай фича. Если ячейки таблицы необходимо будет на другой ширине экрана перестроить, что тогда будете делать с таблицей? :) Все зависит от задачи. И в нашим руках решить как удобнее справится с задачей.
SelenIT3
23.02.2017 00:47Сменю для этой другой ширины display, в чем проблема. Это ж не разметку менять;)
anttoshka
23.02.2017 00:51Это то понятно, но тогда все равно придется решать проблему «прыганья» текста.
SelenIT3
23.02.2017 01:10Можно сменить как раз на инлайн-блоки, например, тогда не придётся (но придется решать проблему пробелов). Или на флоаты (но придётся их «клирить»). В общем, согласен, что всё зависит от задачи — и именно поэтому полезно знать много разных вариантов и уметь выбирать между ними, не ограничивая себя искусственно.
SelenIT3
22.02.2017 13:47А кто не умеет? tr, td { display:block } или tr { display:flex; flex-flow: row-wrap } (благо мобильные браузеры сейчас поголовно круче десктопных, никаких IE9- среди них нет:) — и дальше насколько фантазии хватит. А что до смены визуального порядка элементов (особенно вертикального), так в этом таблицам не было равных еще тогда, когда это не было мейнстримом (по старой спеке tfoot в коде писался перед tbody, а выводился после:).
babenkoma
22.02.2017 20:18Это на флексах, а не на таблицах. На таблицах — это display: table. А вообще согласная с вами: те кто верстают — все это знают. Поэтому я ничего нового не открываю, а просто привожу пример сетки на inline-block, поскольку подобных готовых решений не нашла.
SelenIT3
23.02.2017 00:46Прошу прощения, в спешке пытался запихнуть в один коммент два тезиса: 1) даже HTML-таблицу можно адаптировать, 2) и в display:table-* есть свои скрытые резервы типа смены порядка ячеек через direction, перестановки блоков местами через table-header-group/table-footer-group и т.п.
Кстати, вот не тестировал таблицы при writing-mode: tb-* (или как он теперь называется) — наверное, так можно и флексы с flex-direction:column зафолбэчить?babenkoma
23.02.2017 00:54Вообще можно было бы сделать 5 сеток: table, float, inline-block, flex и grid в одной. Что бы человек сам выбирал какую использовать.
Sam116
13.02.2017 23:29А что на счет проблемы с отступами(пробелами) между инлайн элементами?
babenkoma
13.02.2017 23:30Для этого предусмотрены модификаторы grid--g10, grid--v10, grid--gv10. В статье о них написано.
Prometheus
14.02.2017 00:25+1проблем никаких нет, font-size:0 и нет никаких пробелов…
daggert
14.02.2017 00:30Browser Minimal Font Size и нет никаких font-size: 0. Ниже этого значения перейти нельзя, браузер просто не даст.
Prometheus
14.02.2017 10:43в задаче речь не про шрифт, который браузер отобразит или нет,
речь про отступы между инлайн-блоками.
чтобы их не было — ставится font-size:0 родительскому блоку и нет никаких отступов.daggert
14.02.2017 11:57Еще раз: font-size: 0 не сработает, потому что браузер не даст поставить такое свойство и у вас оно будет font-size: 10-12. Есть у вас там символ или нету — побоку, отступ зависит от размера шрифта, который имеет нижнюю границу в браузерах. Эта проблема появилась сразу за появлением сетки на inline-block и ее решили десятками разных хаков.
faiwer
14.02.2017 13:44+1Уточните, пожалуйста, где вы столкнулись с подобным поведением? Просто
font-size: 0это очень известный и используемый хак. Если бы всё работало именно так, как вы говорите, у таких людей треть сайтов бы кривились. Я пот полез даже поискал где и как такое можно задать в Chrome. Так вот, по дефолту там стоит6px. И это не мешает использованиюfont-size: 0. Правда возможно мешает использованию числе >0 но <6Aingis
14.02.2017 14:36-1В некоторых браузерах есть настройка «минимальный размер шрифта» (Safari, Firefox, Opera — старая точно). И когда она выставлена, то ваша вёрстка превращается в тыкву. В каких-то версиях, кажется, эта настройка даже была выставлена по умолчанию.
faiwer
14.02.2017 14:40Проверил в Firefox. font-size: 0 работает. Установил ограничение в настройках в 10px, и правда 1-9px не работают. А 0 работает. Текст пропадает. Приведите, пожалуйста, реальные примеры.
Aingis
14.02.2017 14:57-2Safari, Opera — я же не просто так привёл.
faiwer
14.02.2017 15:11+2Стало быть Firefox вы просто так привели? Ну спасибо. По сабжу:
- Firefox 52
- Safari 10
- Opera 12
Везде
font-size: 0убирает текст. Качать свежую оперу для теста лень.Aingis
14.02.2017 16:37+1Не может быть, в Opera 12 точно не убирает. В Твиттере было особо заметно. 7 лет на ней сидел. Вы что-то не так делаете. Вы минимальный размер шрифта указали-то в настройках?
faiwer
14.02.2017 16:55Настройку то я задал правильную (Preferences — Advanced — Fonts — Minimum font size (pixels). По дефолту стояла 1px. Но вот повторно воспроизвести уже не получается. Более того, в прошлый раз у меня стрекозу не перекосило (незабываемое зрелище), а сейчас перекосило. Вероятно я что-то сделал не так. Так что с аргументом в пользу древней оперы соглашусь.
daggert
14.02.2017 15:28Chrome, Safari. Последний хром выправлял позавчера.
faiwer
14.02.2017 15:32Вы точно проверяете font-size: 0? У меня и в Safari, и в Chrome всё работает. Ставлю 0 — надпись пропадает. Ставлю >0, но <лимита, надпись размером с лимит.
daggert
14.02.2017 15:40Да. Это точно font size 0 !important примененный к ul элементу, в котором расположен li-список. Может у вас генерация списка идет без отступов? Или li-тег не закрывается? Или применен какой-либо хак из статьи https://habrahabr.ru/post/137582/? Они часто вмонтированы в всякие движки/ситилзаторы/стандартизаторы.
faiwer
14.02.2017 15:44Вы знаете, я кажется понял о чём вы. Вы несколько раз столкнулись с тем, что font-size: 0 (как и line-height: 0) не привёл к нужному результату в каких то условиях (браузер, ос, устройство и пр.). Я охотно в это верю. Вёрстка на этих двух костылях изначально очень шаткая, даже более шаткая, чем на float-ах. А учитывая, что мобильные браузеры в целом любят издеваться над размером шрифта, пытаясь сделать текст доступнее для пользователя… В общем верю.
НО! Скорее всего, всё это не имеет ни малейшего отношения к настройке минимального размера шрифта в браузере. Просто какая-либо мелочь из рендер движка сыграла на 1px больше-меньше и всё поехало.
daggert
14.02.2017 15:59> Скорее всего, всё это не имеет ни малейшего отношения к настройке минимального размера шрифта в браузере.
Поверьте это была именно опция минимального шрифта. Для полной радости я ее понизил до нуля и у меня успешно убрались отступы.
Не спорю, я может быть преувеличиваю значимость данного косяка, но если верстаешь под кучу устройств — надо держать такое в голове. Например последнее такое я лечил именно потому что оно всплыло на ведроиде 4.
faiwer
14.02.2017 15:45Я сталкивался с подобными проблемами когда использовал встроенный в браузер zoom страницы. Немного в другую стороны погрешности вычислений layout-а страницы сыграют и все тонкоподстроенные inline-блоки разлетелись.
Prometheus
14.02.2017 13:58Еще раз.
Мы не будем гадать, сколько у этого браузера минималка, мы скажем 0 и он сам нужное применит.daggert
14.02.2017 15:34Еще раз: Он вам скажет что ему плевать на ваш выставленный 0, у него стоит «менее 10 нельзя».
Буквально два дня назад переделал верстку присланную дизайнером где был перенос между li-строк и стоял хак с font-size:0. Хром на компе блок сдвигал на 2 пикселя, руководствуясь своим правилам, хром на андроиде (вроде там хром?) сдвигал блок на следующую строку.Prometheus
15.02.2017 12:10и что,
вы им (андроид 4) задали 10px и ваши 2px пропали?daggert
15.02.2017 14:08Нет, я применил старый трюк с комментарием между элементами li
Prometheus
15.02.2017 14:33ну может дело там ни в font-size, а в чем-то другом, не думали?
daggert
15.02.2017 14:43Удалил ul {font-size: 0} — ничего не поменялось. Добавил блоки комментария между li тегами — пробелы исчезли. Это уже не первый шаблон, который правлю таким образом, за эти пару лет. Если знаете другую причину — я очень буду рад ее услышать. Пока еще гуглеж на тему font-size: 0 выводит на страницы с жалобами что не все браузеры дают такое.
Prometheus
15.02.2017 14:49так вы инспектом проверьте, может что наследуется выше или жестко прописано.
мне тут на днях попадалось «чудо»
.className1.className2.className3.className4 .ul {}
ужас.daggert
15.02.2017 14:53Честно говоря на телефоне даже не представляю где инспект есть (: На обычном компе стоит !important к этому тегу, по этому я не думаю что его кто-то переопределял.
А зависимости это норм… У меня бывает и по 9 каскадов, которые отталкиваются от одного id элемента.
synthema
14.02.2017 21:39Подскажите пожалуйста, в каких браузерах вы заметили минимальный размер шрифта > 0?
В лисе и хроме font-size: 0; срабатывает нормально.daggert
14.02.2017 22:34На ведре 4.2, в дефолтном браузере и на safari в яблоке 4.
На доступных стационарных компьютерах проблемы действительно нет, хотя настройка минимального размера шрифта осталась (в хроме например).
datacompboy
13.02.2017 23:36Всё же все эти сетки, по сути, всё тот же table — читай, верстка от того, что на выходе, а не семантика…
tomgif
14.02.2017 08:58Для семантики, на примере бутстрапа, каждая колонка заворачивается в свою примесь. На выходе вместо нескольки сеточных классов имеем получаем, к примеру, 1.
sashaaro
14.02.2017 09:04вот есть http://colourgarden.net/avalanche/ я не использовал, но думаю в проектах использовать можно если нужнен grid с bem и inline-block
johnnythekid
14.02.2017 14:14+1Меня сетка через
display:inline-blockраздражаеи именно из-за надобности делать нулевой размер шрифта у контейнера.
Проще на flexbox перейти.sumanai
14.02.2017 16:46+1Не делайте нулевой шрифт.
johnnythekid
14.02.2017 18:30Вы не в курсе проблем с лишними отступами из-за пробелов между элементами?
sumanai
14.02.2017 18:47В курсе. Решается отсутствием этих лишних пробелов, их комментированием, отрицательным margin, незакрытием тегов (для ul > li), и ещё парочкой экзотических способов.
По мне, так вырезание всех пробелов в шаблонизаторе- самый лучший, и страница легче становится.dom1n1k
14.02.2017 23:12+2Все до единого способы костыльные, потому что зависят от каких-то добавочных обстоятельств. Верстка поэтому получается ненадежная.
Даже во времена расцвета inline-block'ов старался избегать этих методов в реальных проектах (применял наверное раза 2, когда совсем деваться некуда было), а уж сегодня-то вообще нет никаких здравых причин это использовать :)
se_pavel
14.02.2017 15:23+1А насколько реальна нужна верстка, которая перестраивается в зависимости от размера экрана? Не проще ли сделать дизайн и верстку под 2 (computer & mobile) или под 3 шаблона (computer & pad & mobile)? На практике обычно перестроение всей информации основного сайта в гигантский столбик на мобильном оказывается не нужным
babenkoma
14.02.2017 22:13Хочу привести пример применения сетки на float из bootstrap и моей сетки. Например, есть 6 блоков разной высоты (товары в каталоге). На десктопе они должны быть по 6 в ряд, а на мобильной версии по 3.
Решение примера на bootstrap: https://jsfiddle.net/babenkoma/soz98d87/2/
Решение примера на моей сетке: https://jsfiddle.net/babenkoma/a3un7vzw/babenkoma
14.02.2017 22:23И вот пример на flex: https://jsfiddle.net/babenkoma/rgt42bwf/
Отличается от моей сетки только тем, что аналогичные классы содержат чуть меньше свойств и отсутствием box. Хотя если нужны отступы между элементами, то не всегда без box можно обойтись.datacompboy
14.02.2017 22:32flex еще гибче, на IB сетке изменяются размеры прыжками а не тянутся.
и главный минус сетки бутстрапа хорошо виден если размеры выставить не 100-50-50-… а 50-52-50babenkoma
14.02.2017 22:40Да, flex гибче. Думаю в будущем все будут верстать на флексах, если что-то новое не придумают
ROBsoer
15.02.2017 16:14У вас в коде есть момент который вы никак не описали в статье:
inline-blockучитывает пробельные симоволы между элементами (в даном случае между.cell). И это влияет на геометрию. Поэтому когда вы задаете ширину в 20% — на самом деле это 20% + пробел. И пять элементов в ряд не станут. Для этого нужно обнулять размер шрифта родителю (что вы и сделали в коде). Этот момент очень критичен для инлайновых сеток, его стоило бы пояснить детально.
Одновременно это хак еще и самый большой минус таких сеток. Потому что никак нельзя использовать наследование размера шрифта иemдля колонок.
Если вам нужно поддерживать древние браузеры, то в сетке на инлайнах есть смысл, скорее всего
emиremтам тоже не поддерживаются, поэтому минус хака сfont-sizeне критичен.sumanai
15.02.2017 16:43ROBsoer
15.02.2017 18:15Костыли, которые завязаны на разметке даже не рассматриваю. Это хрупко и ненадужно
faiwer
15.02.2017 18:47Это неудобно. Но гораздо надёжнее (именно в данном случае), чем font-size. Серьёзно. Увы.
ROBsoer
15.02.2017 19:09Удалить пробелы надежнее??? Или может не закрыть тег надежнее? Вы серьезно?
faiwer
15.02.2017 19:36Именно удалить пробелы ? надёжнее. Да, я серьёзно. Когда HTML токенайзером разбирается на кусочки в AST он не находит text-ой Node-ы между тегами, и соответственно никакие настройки браузера, никакие тонкости ОС, никакие особенности браузера, пустую область тут уже не породят. Как там было у классиков? "Нет человека — нет проблемы". Так и тут "нет space-а, нет поехавших блоков".
А что вам в этом так удивляет? Вы когда-нибудь писали парсер для HTML? Или ковырялись в результате работы какого-нибудь cherio или whacko? Мне приходилось и то и другое делать. По сути есть 3 вида нод: теги, комментарии и тексты. И тексты обрабатываются очень по разному в зависимости от display-я окружения.
ROBsoer
16.02.2017 14:59Парсеры не писал и в AST деревьях не ковырялся. Это не мешает мне понимать, почему данный подход работает и почему он существует.
Но сетка, которая зависит от закрытого/незакрытого тега — априори прохой варинт.
А если мне по семантике не подходит использоватьli. Что тогда?faiwer
16.02.2017 15:21@ROBsoer, я рассуждал не о незакрытых <li/>, а о промежутках. Да и с тем, что вёрстка на inline-блоках весьма склизкая, я не могу не согласиться.
SelenIT3
22.02.2017 14:09Скорее сама сетка для блоков, основанная на том контексте форматирования, в котором форматирование исходника (наличие/отсутствие пробелов) внезапно оказывается значимым — априори плохой вариант.
При малейшей возможности лучше использовать что-то менее костыльное, а такое оставлять разве что на самый крайний фолбэк.
sumanai
15.02.2017 20:58Да, надёжнее. И не закрытый тег LI это стандарт, и его обработка обязана быть одинаковой во всех браузерах. Она и так одинакова, эта часть стандарта скорее написана по реализации, которая везде оказалась одинакова, даже в IE.
Aingis
15.02.2017 19:50Или использовать отрицательный
word-spacing. Когда писал о нём сто лет назад, это уже был старый способ.ROBsoer
16.02.2017 14:54можно, а еще можно отрицательны
margin. Но я сознательно упустил эти способы, так как они зависят от окружающих условий
babenkoma
16.02.2017 22:46Старый — не старый, а до сих пор многие верстают не на флексах. А значит на чем? Или на флоатах или на инлайн-блоках. Я выбираю второе. Честно сказать постепенно перехожу на флексы. Но они не всегда спасают.
anttoshka
17.02.2017 18:55+1А что можно не сверстать на флексах? Как по мне намного гибче и флоатов, и инлайн-блоков.
babenkoma
17.02.2017 21:39Например, такое https://jsfiddle.net/babenkoma/a3un7vzw/1/. В одном блоке 4 таба и контейнер для загрузки содержимого. На десктопе табы по средине с отступами, а на мобильном — они по всей ширине и прижаты к бокам. На моей сетке такие манипуляции легко делать. А вот на флексах нужно создавать 2 флекс-контейнера и для каждого на разной ширине задавать разные свойства. А если что поменяется, то придется стили переписывать. А в моем случае просто другой класс пропишется и все.
anttoshka
17.02.2017 22:01А что мешает на флексах блоку контейнера добавить необходимые отступы или сделать его какой-то ширины и разместить посередине?
babenkoma
17.02.2017 22:05Можно. Я же говорю или писать куча стилей на разных ширинах разные или просто прописать пару классов.
anttoshka
17.02.2017 22:19https://jsfiddle.net/cezyjzum/ где тут сложность то? Можно оставить сетку в стороне просто добавив контенту необходимый класс.
babenkoma
17.02.2017 22:28Выглядит не так как у меня
http://joxi.ru/E2p17VGh946MGA
http://joxi.ru/YmEal8Xu0Bozwm
Нужно повозится, что бы настроить. А я свой вариант за 3 мин сделала
babenkoma
17.02.2017 22:30А вообще это вопрос привычки. Простые случаи каждый делает кто как привык. Часто бывает, что и без флексов не обойдешься.
anttoshka
17.02.2017 22:36Ну само собой, что дело в привычке и понимании работы сеток. На инлайн-блоках можно поменять порядок блоков? Не просто развернуть, а именно порядок другой создать.
Насчет моего решения на флекбокс, попробуйте поизменять ширину экрана. Мы же об этом говорили ;)babenkoma
17.02.2017 22:39На счет смены порядка — тут вы правы. Это один из случаев, где без флексов не обойтись.
SelenIT3
22.02.2017 14:21С отрицательным чем-либо нужно точно попасть в размер пробельного символа, до субпикселей. Потому что за эти сто лет хромята исправили один старый баг, научились скукоживать пробелы меньше нуля (с перекрытием блоков) и могут сплющить строку сильнее чем надо, с некрасивым рваным правым краем в результате.
Methos
20.02.2017 23:32Нет ничего хуже вот этой каши, уж извините
cell cell--none cell--md8 cell--sm24 cell--center
В названиях классов в вёрстке не должно быть никаких размеров и расположений.
babenkoma
21.02.2017 23:23Почему?
daggert
21.02.2017 23:35Мы долго уходили в разделение контента (html) и его оформления (css) для того чтоб не писать a color=#FAA margin=0, но пришли к тому что наш html-код опять стал напичкан всякой ерундой вроде class=«col-right col-w200px col-h100p col-blue ...». Получается что у нас в содержимом зачем-то в очередной раз оформление. Особенно это хорошо видно в БЭМ, где каскадность каскадных таблиц стилей почти послана в далекие дебри.
babenkoma
22.02.2017 00:01Если бы в CSS можно было делать миксины и вставлять один раз написанный код в разные стили, то никто-то бы таким не занимался. Просто хочется написать один раз что-то и потом использовать, а не копировать свойства из одного стиля в другой.
ZloDeeV
21.02.2017 19:40Меня с самого первого момента появления сеток удручала во float необходимость пользоваться clearfix.
Сетка на inline-block действительно хороша. Большинство тут восклицает о том, что пробельный символ будет мешать и фиксы с размером шрифта не идеальны. Так и есть. Но ведь достаточно просто сжимать html? Если сейчас ещё кто-то не пользуется препроцессорами для html, то уж минификаторы то смогут освоить. И пробельные символы больше никогда не помешают. На фрилансе, конечно, приходится объяснять заказчику, что минификация обязательна. Но из моей практики — никто не возражал и даже радовался тому, что html-ка весит на один-два килобайта меньше.
Единственное, что меня коробит — почему все до сих пор пользуются фиксированным количеством колонок? Один небольшой mixin и можно организовать сетку на дробях. С классами вида: .col-1-2, .col-2-10. Несомненно, классов будет чуть больше, но в целях универсальности и расширяемости это круто, когда ты можешь задать любые пропорции. Частенько радовали ребята, которые брали бутстраповскую сетку на 16 колонок и пытались через неё организовать три равных блока по ширине после того, как в дизайне неожиданно они появились. Извращения с вложениями колонок друг в друга или дополнительные классы с паддингами. Сплошное веселье.
Я пользуюсь чем-то подобным:
.row-el display: block > [class^='col-'] display: inline-block vertical-align: top &.row-middle > [class^='col-'] vertical-align: middle .row-el @for $a from 1 through $column-count @for $b from 1 through $a @if $a != $b or ($a == 1 and $b == 1) $result: 100% / $a * $b > .col-#{$b}-#{$a} width: $resultbabenkoma
21.02.2017 23:04Можно и на дробях сделать. Но я разницы не вижу. Потому как все равно под каждую дробь должен быть класс, также, как и под каждую колонку. Или у вас будет класс col-3-4 или coll-12 (в случае 24-колоночной сетки) — какая разница? Вот если бы можно было как-то брать цифру из названия класса и что бы из нее вычислять ширину… Но на css так не сделаешь.
dimitrian777
22.02.2017 15:47Но зачем создавать проблемы, где их нет и потом их пытаться решить… Где фиксированное число колонок, возьмите тот же Бутстрап, никто же не обязывает пользоваться 12 колонками, сделайте 15, 23 да сколько угодно, все легко модифицируется
babenkoma
23.02.2017 00:28Я писала выше недостатки Бутстраповской сетки. Собственно эти недостатки и мешают ее использовать.
dimitrian777
21.02.2017 22:13-1Зачем в который раз изобретать велосипед, не нравятся (не устраивают) готовые сетки фреймворков, возьмите гибкое решение susy ( не реклама) и крутите как хотите… И не совсем понятна логика — нужно знать количество элемtнтов в row, ЗАЧЕМ? Просто у последнего очистите обтекание и все, элементы новой строки, не за что не зацепятся.
babenkoma
21.02.2017 22:33Зачем изобретать велосипед? По двум причинам:
1. При этом глубже разбираешься в проблеме, больше узнаешь, короче, полезно для работы и саморазвития
2. Мне лично удобнее использовать то, что сама написала, поскольку я знаю как оно работает и знаю где нужно изменить в случае чего, чем чужой код, который как правило нужно использовать именно так, как написано в документацииraveclassic
22.02.2017 00:101. Совершенно верно, но в таком случае это не должно утекать за границы этого саморазвития.
2. Но тогда вы обрекаете себя на поддержку, а, публикуя такую библиотеку, обрекаете еще и ее потенциальных пользователей на большой геморрой, когда вы поддерживать ее перестанете.
Лучший велосипед — несуществующий.babenkoma
22.02.2017 00:33А что тут поддерживать? Выложила пример сетки на inline-block. Всего 3 блока и несколько модификаторов. Если подходит — берешь дописываешь, адаптируешь под свои нужды и все. Не вижу ничего преступного в этом.
raveclassic
22.02.2017 00:48берешь дописываешь, адаптируешь под свои нужды и все.
Но зачем, когда все уже написано и адаптировано? Это ж не космический крейсер, это всего-лишь сетка.
daggert
Вы простите, но вот ваша секция с шрифтами по 8-9px улетает сразу в мусорку, потому как в браузерах есть минималка, например у меня она 10px. Перебить ее вроде как никак.
И 1920px браузера это слишком вы хорошо взяли. Где полоса прокрутки? Где рамки окна?
Не наезд, не подумайте, просто вопросы.
babenkoma
Про минимальный шрифт не подумала. Мне самой не совсем нравится эта часть с html, но к самой сетке это имеет косвенное значение.
Вопрос про полосу прокрутки и рамку не поняла…
daggert
Прежде хочу прощения просит за тон, писал на работе, сейчас сообщение перечитал и оно выглядит… грубоватым.
По поводу рамок:
>Это означает, что на ширине браузера 1920рх (которую я принимаю как отправную точку, поскольку для этой ширины чаще всего создается дизайн сайта) отступ блока с одной стороны будет 15рх.
Не берите отправной точкой ширину браузера. Ширина браузера = ширине монитора (если человек развернул его на весь экран), однако, в зависимости от системы (а на линуксе еще и DE) мы имеем различные декораторы окон системы. Например на Windows это 2-3 пикселя. На Linux 0-4. Эти области будут заняты рамкой самого окна, развернутого на весь экран, и уберутся только при полноэкранном режиме (F11).
Далее из кракозябр идет полоса прокрутки. На виндоузе ширина рабочей области, в которую помещается контент, равняется 1903 пикселя. На моем стареньком ноутбуке с убунтой под мате — 1910.
Для более точной работы берите через javascript размер области viewport и расчитывайте с него. Лично мне хватает простого document.documentElement.clientWidth
Про минимальный шрифт вы не правы. Ваш минимальный шрифт дает разрядку блокам. Если минималка будет больше чем вы ожидаете — блок уползет на следующую строку, а вы будете искать где у вас косяк в margin (я неделю искал в чем проблема по незнанию). Выход простой — блок комментария начинающийся сразу после элемента и идущий ровно до следующего. Он немного дубовый. но всеже.
sumanai
Разве в окне, развёрнутом на весь экран, есть бордюры? Я их почему-то не вижу.
daggert
Каюсь, не проверил до конца, вычел не правильно из ширины окна ширину прокрутки.
sumanai
Если хочется, то и прокрутку можно убрать.
Denai
Для таких в аду отдельный котёл
sumanai
Само собой )
Fess_blaga
Блоки никуда не уйдут.
не даёт выровнять блоки по ширине, используя text-align: justify;В блоке с классом .box размер шрифта обнуляется. По этому, кстати, и размер шрифта в rem))
P.S. Сам так делаю. Ибо
daggert
После более глубокого копания в данной теме сегодня — думаю что вы правы. Видать мои сведения устарели, по поводу шрифта = 0.
LestaD
Полоса прокрутки — да, но рамок окон нет в Ubuntu, MacOS
babenkoma
Вы уже второй пишете про рамки. Можете уточнить, что имеете ввиду?
Mr_Franke
Я думаю имелось в виду то, что у окна с разрешением 1920px полоса прокрутки отъедает часть ширины/высоты экрана, а значит нужно учитывать этот момент.