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