Комментарии 44
Зачем js? Чем flexbox не угодил?
Данная статья предлагает один из методов решения проблемы, так как в некоторых случаях flex не подходит. Например если мы верстаем под поддержку более ранних версий IE и других браузеров, или используем в работе сетку grid встречаемую в Bootstrap или другом подобном наборе инструментов
http://caniuse.com/#feat=flexbox — 97%. Оставшимся 3-м можно намекнуть про современный мир. А чтобы они не сильно расстраивались из-за кривой вёрстки в их, можно подключить modernizr и подключать js-решения.
Фреймворки с гридами надо выбирать нормальные. 4-й бутстрап может сетку через flex делать, почему бы не использовать его? Плюс, флекс — это не только сетка, это ещё куча крутых возможностей. А проблема отсутствия поддержки флекса всё больше становится гипотетической, нежели реальной.
Я в целом поддерживаю решение с флексбоксом, но нужно понимать, что статистика caniuse — это средняя температура по больнице. Я знаю реальные сайты с такой аудиторией, где поддержка флекса менее 90%.
И намекнуть проблематично — обычно люди сидят на старых браузерах не из вредности, а есть какие-то вынуждающие факторы.
И намекнуть проблематично — обычно люди сидят на старых браузерах не из вредности, а есть какие-то вынуждающие факторы.
Тем, что приходится поддерживать IE8.
Зачем? Это реальная надобность или так сказали? Ну и опять же, что мешает подключить modernizr и добавить фолбэк на случай старых ослов?
Для IE8 можно тупо воткнуть заведомо достаточный фиксированный height и фиг с ним.
Для такого хлама нет никакого смысла делать красиво — достаточно, чтобы можно было пользоваться.
Для такого хлама нет никакого смысла делать красиво — достаточно, чтобы можно было пользоваться.
Зачем js? Чем flexbox не угодил?
Как мне кажется, этот скрипт решает чуть больше проблем, чем может решить флексбокс. Т.е. сами карточки сделать одинаковой высоты можно и флексбоксом, но как с помощью флексбокса сделать одинаковыми по высоте внутренние элементы соседних карточек? Насколько я понял, этот скрипт подобную проблему решает, а флексбокс — нет.
Да, внутренние элементы уже нельзя выровнять (хотя изначально. Но если смотреть на примеры из статьи, то лучше было бы не выводить длинный текст целиком, а использовать text-overflow: elipsis;.
В идеале, увеличение высоты надо учитывать на этапе дизайна. Если всё сделано хорошо, надобности в костылях не будет. Но даже если они нужны — вставлять их надо грамотно.
Да, внутренние элементы уже нельзя выровнять (хотя изначально. Но если смотреть на примеры из статьи, то лучше было бы не выводить длинный текст целиком, а использовать text-overflow: elipsis;.
к сожалению, у верстальщика не всегда есть возможность связаться с дизайнером и повлиять на это. Т.е. если нарисовано, что размеры элементов могут быть разные, но при этом должны выравниваться, то надо это реализовывать. И без скриптов это сделать, к сожалению, не всегда получается.
Не получится рассчитать оптимальную высоту, чтобы подходила для всех вариантов.
Не выдумывайте и используйте flexbox
НЛО прилетело и опубликовало эту надпись здесь
И зачем на JS решать задачи вёрстки, когда есть а) флексбоксы (почти все браузеры), б) старая статья «Список блоков с разным вертикальным выравниванием» (с ограничениями, но тут можно приспособить)?
Если у карточки товара более 1 элемента с плавающей высотой, а уровнять нужно все, то этот способ не подойдёт, к сожалению.
НЛО прилетело и опубликовало эту надпись здесь
Как в ситуации, когда нужно выровнять не только сами карточки, но и их содержимое по соседним элементам, поможет флексбокс? Имею ввиду нечто подобное — ссылка — пример утрированный, но вполне отображает суть проблемы — сами карточки товара одинаковой высоты, а вот внутренние элементы у соседних карточек совсем не по сетке и разной высоты. Скрипт автора статьи решает эту задачу в том числе. Если подскажете, как подобное реализовать на флексбоксе — буду очень благодарен.
PS я к скрипту этому не имею никакого отношения.
PS я к скрипту этому не имею никакого отношения.
НЛО прилетело и опубликовало эту надпись здесь
Скрипт же уравнивает общую высоту и только, тоже что и делает флексбокс по умолчанию.
Видимо, вы совершенно невнимательно читали статью:
GreatBalancer(".product-card",".product-title",".price-min",".product-image");
Обратите внимание! Первым аргументом вы должны указать карточку товара. Далее в любом порядке перечень тех элементов, которые необходимо уровнять, функция может принять и обработать любое число элементов!
т.е. скрипт делает именно то, о чём мы с вами говорили. Вот вам мой же пример, но с подключенным скриптом — ссылка
P.S. — скрипт как раз таки уравнивает _только_ внутренние элементы, не трогая сами карточки почему-то. т.е. если я перечислю не все внутренние элементы или вообще не перечислю, то никакого выравнивания вообще не будет…
НЛО прилетело и опубликовало эту надпись здесь
Давно есть скрипт matchHeight именно для этой задачи
Если саппортить старые ie то вполне сойдет, в ином случае согласен со всеми ко советовал flexbox
Я бы функцию назвал GreatEqualizer.
>и нестандартных решений!
Это как бы стандартное костыльное решение.
В 99% случаев нужно просто выставить одну и туже высоту блоку с изменяемым текстом и всё, т.к. один фиг если строки с этими блоками будут разными по высоте выглядеть это будет не очень.
Это как бы стандартное костыльное решение.
В 99% случаев нужно просто выставить одну и туже высоту блоку с изменяемым текстом и всё, т.к. один фиг если строки с этими блоками будут разными по высоте выглядеть это будет не очень.
Блин, самая первая картинка глаза аж режет
Автор, джаваскрипт тебя подери! Я же читал… и перестал на слове function… Велосипеда тебе уникального, тёплого и лампового.
Уважаемый автор! До того момента, как вы добавили свои постскриптумы с рекламой уроков по js, статья выглядела, как обычная попытка начинающего яваскриптера изобрести «серебряную пулю». Теперь же даже не знаю, как её воспринимать. Мало того, что вы забыли объявить переменную в коде (в данном случае это не страшно, особенно, если автор — новичок), так ещё и ваши примеры походят на примеры «как нарисовать сову» — только что ещё в некоторых карточках не было старой цены вовсе и уже на следующем скриншоте — тадам! у нас там точки вместо отсутствующих элементов. Т.е. складывается впечатление, что ваш скрипт это сделал. Однако же, это не так. Если какой-то элемент будет отсутствовать в коде (хотя бы один, самый последний), то фактически выравнивание карточек не произойдёт, не смотря на то, что их внутренние элементы выровняются. Опять же — почему скриншоты и только? Где живой пример «до» и живой пример «после»? Ведь судя по комментариям вы даже не смогли донести свою идею. Большинство комментирующих явно не догадались о том, что вы выравниваете не сами карточки, а их содержимое.
Кроме того, в начале статьи вы упоминаете адаптивность и т.п., но по факту ваш скрипт ну совершенно никак с ней не работает.
Повторюсь, это не страшно, решаемо и вполне допустимые оплошности для новичка, но никак не для человека, который настолько владеет предметом, что преподаёт его другим. Большей антирекламы, чем ваша же статья, вашим курсам придумать сложно.
Кроме того, в начале статьи вы упоминаете адаптивность и т.п., но по факту ваш скрипт ну совершенно никак с ней не работает.
Повторюсь, это не страшно, решаемо и вполне допустимые оплошности для новичка, но никак не для человека, который настолько владеет предметом, что преподаёт его другим. Большей антирекламы, чем ваша же статья, вашим курсам придумать сложно.
Если действительно так необходимо поддерживать IE8 и ниже (или для каких браузеров автор так заморочился?), то решение нормальное. Хотя я почти уверен, что подобное решение не зря называется «велосипедом» — он у каждого, как и полагается, свой.
Другое дело — стоит ли поддерживать настолько устаревшие браузеры? В чём реальная необходимость? Я понимаю, что не всегда требования к совместимости зависят от разработчика (даже если он ведущий), но поддерживать в конце 2016 года тот же IE8 — это какое-то поклонение культу смерти. Ну то есть можно, конечно, создать сайт, который поддерживает все браузеры последних лет 20-ти и порадовать этим заказчика, обладающего смутными представлениями о здравом смысле, но зачем? Мало того, что усложняется поддержка такого кода, так ещё и разработчики таким образом продлевают жизнь реликтовым видам браузеров.
Удивляют люди/компании, которые вместо того, чтобы научиться говорить заказчику/шефу/внутреннему идеалисту «нет» и с чистой совестью развивать (или хотя бы использовать) современные технологии начинают заниматься археологией себе на голову.
Это моё сугубо личное мнение, разумеется. Не хочу никого обидеть, тем более — автора и его коллег.
Другое дело — стоит ли поддерживать настолько устаревшие браузеры? В чём реальная необходимость? Я понимаю, что не всегда требования к совместимости зависят от разработчика (даже если он ведущий), но поддерживать в конце 2016 года тот же IE8 — это какое-то поклонение культу смерти. Ну то есть можно, конечно, создать сайт, который поддерживает все браузеры последних лет 20-ти и порадовать этим заказчика, обладающего смутными представлениями о здравом смысле, но зачем? Мало того, что усложняется поддержка такого кода, так ещё и разработчики таким образом продлевают жизнь реликтовым видам браузеров.
Удивляют люди/компании, которые вместо того, чтобы научиться говорить заказчику/шефу/внутреннему идеалисту «нет» и с чистой совестью развивать (или хотя бы использовать) современные технологии начинают заниматься археологией себе на голову.
Это моё сугубо личное мнение, разумеется. Не хочу никого обидеть, тем более — автора и его коллег.
Я с Вами согласен. В абсолютном большинстве случаев IE ниже 9 поддерживать ни к чему.
Но вот конкретно в моей практике есть клиент, у которого 200000 (двести тысяч) сотрудников, у которых на рабочих машинах IE8, и которые должны иметь доступ пусть не к полному, но более-менее достаточному функционалу приложения и не в расползающемся дизайне. А что самое главное — клиент за этот геморой платит. И платит достаточно много, чтобы не отказываться от него.
Поэтому меня задевают вопросы «зачем велосипед, если есть современный способ». Да, есть-то он есть, и в полной версии системы он у меня тоже есть. Но фолбэк-то я тоже как-то должен писать. Так почему бы не быть на Хабре статье о старых технологиях?
Но вот конкретно в моей практике есть клиент, у которого 200000 (двести тысяч) сотрудников, у которых на рабочих машинах IE8, и которые должны иметь доступ пусть не к полному, но более-менее достаточному функционалу приложения и не в расползающемся дизайне. А что самое главное — клиент за этот геморой платит. И платит достаточно много, чтобы не отказываться от него.
Поэтому меня задевают вопросы «зачем велосипед, если есть современный способ». Да, есть-то он есть, и в полной версии системы он у меня тоже есть. Но фолбэк-то я тоже как-то должен писать. Так почему бы не быть на Хабре статье о старых технологиях?
Пускай статьи будут. Но на мой взгляд, в таких статьях нужно обязательно упоминать про современные альтернативы. И ещё крайне желательно упомянуть о минусах описанного подхода. Например, в данном случае скорее всего будут проблемы с производительностью на большом количестве элементов, да и некоторые стили из css станут работать не совсем так, как задумывалось. Уж сеньёры должны знать о подводных камнях, так почему бы не описать их подробнее?
Автор, не слушай про flexbox! JS тоже нужен, флексом не все сделаешь. Спасибо за скрипт, положу в копилку
Для карточек
.card {
display: inline-block;
vertical-align: top;
}
не? Не пробовали?
.card {
display: inline-block;
vertical-align: top;
}
не? Не пробовали?
Отличный пост, года эдак для 2007-го)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
«Великий уравнитель» или способ решить проблему выравнивания по высоте