Комментарии 58
В версии для телефона невозможно нажать на кнопки — их просто нет.
![image](https://habrastorage.org/files/9d0/97b/37a/9d097b37af99429c8214e7a46c1e0d81.png)
Почему бы не использовать просто div? И не надо ничего обнулять, ничего не надо очищать, стилизуй сразу как надо, не задумываясь о том, как списки в том или ином браузере отображаются по умолчанию.
Загадка…
nav
или menu
.Особенно, я не стал бы говорить про то, как выглядит список. По мне выглядит как список только, собственно, список и все. То есть тот самый, который по умолчанию, нумерованный-ненумерованный с некоторой степенью стилизации. Это и есть список, для которого используются эти теги.
Список товаров так, как он представлен на картинках, это не список.
Мне так кажется.
Правильно, таблицами. Но таблицы в вебе крайне неадекватны.
На втором месте будет список. Визуально отделен для людей, логически является списком для роботов и скриптов.
Никогда не путайте 'чем является' и 'как выглядит'. Меню — всегда список, акцентрирование внимания — strong, и т.д. А то, что визульно я сделал меню в виде бегающих анимированых человечков, а важные элементы обвожу рамочкой — это уже работа по юзабилити и дизайну, что не касается html.
Если вы придумали более удобные универсальные теги — поделитесь. Никто не доволен li, но лучше пока что то не получается. Конкретно Div сливаются с текстом без доп стилей и не несет в себе логическое заключение 'мой сосед — такой же, как я'. Т.е. допустим плагин на браузер, позволяющий свернуть большие объемы однотипных данных, уже не сработает. А кому то может очень надо. Ну и т.д.
Доводы DrMeJI мне не показались убедительными. Например я не считаю,, что меню это список. Это иерархия — да, и списки тоже могут быть иерархическими да, но я не считаю что всю подряд иерархию нужно оформлять списочным тегом.
И я не считаю, что нужно мысленно стирать CSS, зачем? Если у меня должен получится список, я использую списочный тег. Если мое меню должно выглядеть как список, как раньше делали во фреймах, то я использую тег списка. Если у меня есть список категорий, которые должны выглядеть как список, то я использую тег списка. Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.
Помогают ли эти теги роботам? Сомневаюсь. Для людей — соглашусь, по тегам сразу видно иерархию и 'мой сосед — такой же, как я'. Но я тоже самое гораздо внятней увижу по классам.
Ну вот зачем в каждом слайдере-крутилке с плоским набором картинок понатыкан ul+li?
Поэтому мое мнение пока неизменно: списки — для списков. Если список похож на то, что выдают эти теги по умолчанию, используем ul а если нет, то и ну их к бесу.
Добрый день.
Думаю, что данный пост больше как для практики и поделиться опытом. Для сетки использовать целый фреймворк или библиотеку, это уж слишком
Ну а если серьезно, то в вебе большинство магазинов на 100 — 300 товаров с посещаемрстью в 100 -500 чел. в день. И если вы не поставили на него готовый шаблон, а пишите сами, то использовать bootsrtrap, это как пушкой по воробьям. Ставить фреймворк, чтобы использовать 5% от его возможностей — это лишние байты, более сложная архитектура и поддержка.
Решить бы еще проблему с заголовком в две строки.
![](https://habrastorage.org/files/fcd/e42/862/fcde428623e64923bfc2365e46fa5206.png)
На мой взгляд clearfix куда большее колдунство, чем «font-size: 0».
Добрый день.
Исправим это с помощью отрицательного значения margin-right у родителя.
А как вы с этим боритесь на разных разрешениях, мобильных девайсах?
.product-wrapper { display: inline-block; vertical-align:top; }
Тогда плитки не будет играть в лесенку.Не пора ли уже использовать flexbox? Поддержка устройств доросла до 97%. Пора бы.
Называется object-fit быстро накиданный пример
Для ie есть простенькие полифиллы весом в ~1кб.
Где поддержка нескольких строк в названии? Где поддержка нескольких строк в описании?
Где, балин, приложенная машина времени, чтобы отвезти этот макет в девяностые?? Когда же современные UX "специалисты" осознают, что мы живём в мире мобильников и планшетов с тач-экранами? Сколько можно делать интерфейсы, которые при использовании на телефоне вызывают один негатив?
Спасибо за статью.
кто-нибудь может поделиться примером реализации сего чуда на флексе?
https://jsfiddle.net/yaLkw88v/1/ буквально за 20 секунд (правда тут без медиа квери, хотяяяя и без них вполне ок. И без рюшек в виде цветного фона и анимашек, но, как и ожидалось, с поддержкой разной высоты блоков)
Все же решение flex в данном случае будет рациональным
Тут не затронуты самые важные вопросы витрины инетмага: что делать с разнородными товарами. например, что делать, если фотографии разные по высоте? Что, если одно описание состоит из 2 строк, а другое — из 5? Что, если на экране количество объектов не кратно сетке (например, 7)?
Высоту прибить гвоздями всякий сумеет. А вот отобразить витрину с разными товарами культурно — это уже сложнее. Но тоже можно 8-)
Жесткое задание высоты блока может вызвать ситуацию, когда из-за длинного описания товара контент выйдет за границы блока. Если переписать вашу сетку на flexbox, подобных проблем можно избежать.
Для обрезки текста
.product .cut {
white-space: nowrap;
text-overflow: ellipsis;
/*overflow: auto;*/
}
.product:hover .cut {
white-space: normal;
text-overflow: initial;
overflow: hidden;
}
...
<h2 class="produvt-name cut">Хавортия Хавортия Хавортия Хавортия Хавортия</h2>
...
В этом случае плитки всё же разъезжаются, это уже надо переверстать саму плитку.
Верстка интернет-магазина: список товаров