Парсеры не писал и в AST деревьях не ковырялся. Это не мешает мне понимать, почему данный подход работает и почему он существует.
Но сетка, которая зависит от закрытого/незакрытого тега — априори прохой варинт.
А если мне по семантике не подходит использовать li. Что тогда?
У вас в коде есть момент который вы никак не описали в статье: inline-block учитывает пробельные симоволы между элементами (в даном случае между .cell). И это влияет на геометрию. Поэтому когда вы задаете ширину в 20% — на самом деле это 20% + пробел. И пять элементов в ряд не станут. Для этого нужно обнулять размер шрифта родителю (что вы и сделали в коде). Этот момент очень критичен для инлайновых сеток, его стоило бы пояснить детально.
Одновременно это хак еще и самый большой минус таких сеток. Потому что никак нельзя использовать наследование размера шрифта и em для колонок.
Если вам нужно поддерживать древние браузеры, то в сетке на инлайнах есть смысл, скорее всего em и rem там тоже не поддерживаются, поэтому минус хака с font-size не критичен.
Всега было "поднимается" ну или "всплыввает", зачем вводить новое понятие да еще и такое запутанное.
Все же четко: объявление переменной "поднимается" в начало области видимости (функции). И не нужно объяснять почему переменная настолько вредная, что "проникает" в другие блоки
В статье вопрос «с чего бы» не поднимался.
Здесь описано решение для тех, кто уже решил для себя этот вопрос (или решили за него, поставив конкретную задачу).
Если этот шрифт мелкий, так передайте в функцию тот, который Вы считаете нормальным для даного экрана. Размеры в примере взяты с потолка и к реальным устройтвам не имеют никакого отношения.
На выходе мы получем размер в тех величинах, которые задали. Вьюпорт здесь выступает в роли коефициента.
Парсеры не писал и в AST деревьях не ковырялся. Это не мешает мне понимать, почему данный подход работает и почему он существует.
Но сетка, которая зависит от закрытого/незакрытого тега — априори прохой варинт.
А если мне по семантике не подходит использовать
li. Что тогда?можно, а еще можно отрицательны
margin. Но я сознательно упустил эти способы, так как они зависят от окружающих условийУдалить пробелы надежнее??? Или может не закрыть тег надежнее? Вы серьезно?
Костыли, которые завязаны на разметке даже не рассматриваю. Это хрупко и ненадужно
У вас в коде есть момент который вы никак не описали в статье:
inline-blockучитывает пробельные симоволы между элементами (в даном случае между.cell). И это влияет на геометрию. Поэтому когда вы задаете ширину в 20% — на самом деле это 20% + пробел. И пять элементов в ряд не станут. Для этого нужно обнулять размер шрифта родителю (что вы и сделали в коде). Этот момент очень критичен для инлайновых сеток, его стоило бы пояснить детально.Одновременно это хак еще и самый большой минус таких сеток. Потому что никак нельзя использовать наследование размера шрифта и
emдля колонок.Если вам нужно поддерживать древние браузеры, то в сетке на инлайнах есть смысл, скорее всего
emиremтам тоже не поддерживаются, поэтому минус хака сfont-sizeне критичен.Всега было "поднимается" ну или "всплыввает", зачем вводить новое понятие да еще и такое запутанное.
Все же четко: объявление переменной "поднимается" в начало области видимости (функции). И не нужно объяснять почему переменная настолько вредная, что "проникает" в другие блоки
Avocode
Здесь описано решение для тех, кто уже решил для себя этот вопрос (или решили за него, поставив конкретную задачу).
На выходе мы получем размер в тех величинах, которые задали. Вьюпорт здесь выступает в роли коефициента.