Pull to refresh

Comments 58

При ховере есть неприятный скачёк — видимо из-за тени.
В версии для телефона невозможно нажать на кнопки — их просто нет.
При масштабе 150% и наведении мышки на плитку:
Скриншот с Оперы
image
А что делать, если контент-менеджер ввёл в названии 2-3 строки текста, а у соседей только по одной?
Заголовок спойлера

Я вот тоже об этом подумал. Автору надо использовать Flex.
Я одного не пойму, почему как только нужна группа каких-то однородных элементов, так сразу непременно используется ul и его друзья? В каждой второй верстке обязательно ul. Особенно на плагинах, которые должны выдавать иерархию, будь то меню или дерево — обязательно висит ul. Да в половине сладеров-крутилок — обязательно ul. Сидишь и наблюдаешь, как дерево с точками красиво трансформируется в то что надо.

Почему бы не использовать просто div? И не надо ничего обнулять, ничего не надо очищать, стилизуй сразу как надо, не задумываясь о том, как списки в том или ином браузере отображаются по умолчанию.

Загадка…

Что работает как список, выглядит как список или подразумевается как список — должно быть списком. Если есть еще более глубокая семантика, выбираем, например, nav или menu.
Мне кажется, что понятие список настолько растяжимое, что лично я бы не стал в данном случае говорить о семантике. Анонсы статей на сайте — список? Логотипы компаний-рекламодетелей список? Аватары топовых авторов? Номера страниц? Список тегов?

Особенно, я не стал бы говорить про то, как выглядит список. По мне выглядит как список только, собственно, список и все. То есть тот самый, который по умолчанию, нумерованный-ненумерованный с некоторой степенью стилизации. Это и есть список, для которого используются эти теги.

Список товаров так, как он представлен на картинках, это не список.

Мне так кажется.

Мысленно сотрите css, оставив только браузерные стили. Как лучше представить товар?
Правильно, таблицами. Но таблицы в вебе крайне неадекватны.
На втором месте будет список. Визуально отделен для людей, логически является списком для роботов и скриптов.

Никогда не путайте 'чем является' и 'как выглядит'. Меню — всегда список, акцентрирование внимания — strong, и т.д. А то, что визульно я сделал меню в виде бегающих анимированых человечков, а важные элементы обвожу рамочкой — это уже работа по юзабилити и дизайну, что не касается html.

Если вы придумали более удобные универсальные теги — поделитесь. Никто не доволен li, но лучше пока что то не получается. Конкретно Div сливаются с текстом без доп стилей и не несет в себе логическое заключение 'мой сосед — такой же, как я'. Т.е. допустим плагин на браузер, позволяющий свернуть большие объемы однотипных данных, уже не сработает. А кому то может очень надо. Ну и т.д.
Здесь к вопросу можно подойти с другой стороны: вы просто реализуете товар в виде div, а затем всю эту пачку div'ов оборачиваете либо в список, либо в таблицу, либо еще во что то, в зависимости от того, как вы хотите их представить — списком, таблично, иерархией и т.д.
Обернуть можно, да, но мне до сих пор непонятно, зачем в данном случае использовать этот списочный неудобный тег. Неудобный по причине дефолтных стилей, которые придется специально обрабатывать и все.

Доводы DrMeJI мне не показались убедительными. Например я не считаю,, что меню это список. Это иерархия — да, и списки тоже могут быть иерархическими да, но я не считаю что всю подряд иерархию нужно оформлять списочным тегом.

И я не считаю, что нужно мысленно стирать CSS, зачем? Если у меня должен получится список, я использую списочный тег. Если мое меню должно выглядеть как список, как раньше делали во фреймах, то я использую тег списка. Если у меня есть список категорий, которые должны выглядеть как список, то я использую тег списка. Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.

Помогают ли эти теги роботам? Сомневаюсь. Для людей — соглашусь, по тегам сразу видно иерархию и 'мой сосед — такой же, как я'. Но я тоже самое гораздо внятней увижу по классам.

Ну вот зачем в каждом слайдере-крутилке с плоским набором картинок понатыкан ul+li?

Поэтому мое мнение пока неизменно: списки — для списков. Если список похож на то, что выдают эти теги по умолчанию, используем ul а если нет, то и ну их к бесу.

Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.

Что в правиле list-style: none; такого мучительного?

Кстати, а почему автор не воспользовался для вёрстки каким-нибудь фреймворком? Например — Bootstrap?

Добрый день.


Думаю, что данный пост больше как для практики и поделиться опытом. Для сетки использовать целый фреймворк или библиотеку, это уж слишком

А можно врспользоваться еще и верстальщиком.

Ну а если серьезно, то в вебе большинство магазинов на 100 — 300 товаров с посещаемрстью в 100 -500 чел. в день. И если вы не поставили на него готовый шаблон, а пишите сами, то использовать bootsrtrap, это как пушкой по воробьям. Ставить фреймворк, чтобы использовать 5% от его возможностей — это лишние байты, более сложная архитектура и поддержка.
А разве bootstrap запрещает использовать его модульно?
UFO just landed and posted this here

С препроцессором можно тянуть части (модули) бутстрапа. Единственное, что нужно вытягивать и зависимости используемых модулей, которые не всегда очевидны.

Использование всем известного фреймворка как раз упрощает поддержку — нет необходимости тратить время на то, чтобы понять что было в голове у человека, который это навоял…
UFO just landed and posted this here
В Chrome(Версия 55.0.2883.87 m) скачков не наблюдаю.
Решить бы еще проблему с заголовком в две строки.
Типичная ошибка, когда дизайнер и верстальщик полагают, что название всегда поместится в одну строку, а описание товара всегда будет не больше 4х строчек.
Скриншот проблемы

UFO just landed and posted this here
UFO just landed and posted this here
Почему никто не использует inline-block? Гибче же, чем врапперы на каждую строку или display: table.
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Затем, чтобы не случалось «вёрстки лесенкой» например.
На мой взгляд clearfix куда большее колдунство, чем «font-size: 0».
это же всего один дополнительный класс в html и одно правило в css, а фонт сайз надо прописывать и родителю и потомкам, так сказать, дублирование кода)
Ну если писать модульный css, то стили потомков не будут зависеть от стилей контейнера. Да и «вёрстка лесенкой» даже с clearfix никуда не денется.
Красиво, но плохо. Кнопка «В корзину» пропадает. А что это за магазин такой в котором нужно ловить самую важную кнопку для него? Вот если бы она была постоянно, а при наведении выплывала другая маловажная информация, то было бы лучше.
А по поводу верстки, не пробовали через flexbox? В последнее время для такого рода задач только ее и использую.
Пробовала, очень удобно. В последних проектах использовали Pure.css, в котором адаптивные сетки выполнены на flexbox.

Добрый день.


Исправим это с помощью отрицательного значения margin-right у родителя.

А как вы с этим боритесь на разных разрешениях, мобильных девайсах?

Добрый день. На мобильных девайсах отрицательный margin тоже хорошо работает.
А почему бы не сделать вот так
.product-wrapper { display: inline-block; vertical-align:top; }
Тогда плитки не будет играть в лесенку.
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Интересная идея про srcset, спасибо за наводку.

Но грузится все-таки медленно… почти три секунды — и это же еще через СDN, да?
ну и верстка в стиле деревенского забора = криво-косо 8-) Все элементы разные по высоте. надо бы поправить 8-)
Статья по созданию карточек полезна, но то, что в 2017 году мы упорно по инерции продолжаем использовать float-сетку с костылями типа margin: 0 -20px 0 0; меня печалит.
Не пора ли уже использовать flexbox? Поддержка устройств доросла до 97%. Пора бы.
Насчет фото товаров: давно использую технику через background-image и background-size: contain. Мне кажется, она более универсальная — красивее, когда все фотки квадратные, даже если оригиналы вытянуты (предпочтительнее сцентрировать и обрезать выступающие за края части а не вписывать прямоугольники). Типа https://jsfiddle.net/kasheftin/avqdpsgs/. Тег img имеет opacity:0 и нужен только чтобы фотку можно было потащить мышкой.

Где поддержка нескольких строк в названии? Где поддержка нескольких строк в описании?
Где, балин, приложенная машина времени, чтобы отвезти этот макет в девяностые?? Когда же современные UX "специалисты" осознают, что мы живём в мире мобильников и планшетов с тач-экранами? Сколько можно делать интерфейсы, которые при использовании на телефоне вызывают один негатив?

Автор просто поделилась идеями, наработками, которые помогут кому-то. Не нужно использовать приведенный пример в качестве шаблона. Допиливайте сами и главное не забывать про тестирование)
Спасибо за статью.
Хотелось бы еще узнать мнение по поводу скачков выпадающих кнопок. Появляются они плавно, однако исчезают резко. Если сделать плавное исчезание, то вылезет баг с z-index, при ховере на нижний элемент будет резкое перекрытие. Кто как решает подобную проблему?
margin -20px у родителя напрочь убивает всю красоту решения.

кто-нибудь может поделиться примером реализации сего чуда на флексе?

https://jsfiddle.net/yaLkw88v/1/ буквально за 20 секунд (правда тут без медиа квери, хотяяяя и без них вполне ок. И без рюшек в виде цветного фона и анимашек, но, как и ожидалось, с поддержкой разной высоты блоков)

Не хочется придераться, но на мобилке если отображать товары списком, верстка немного плавает.
Все же решение flex в данном случае будет рациональным
Простите, это ниочем.
Тут не затронуты самые важные вопросы витрины инетмага: что делать с разнородными товарами. например, что делать, если фотографии разные по высоте? Что, если одно описание состоит из 2 строк, а другое — из 5? Что, если на экране количество объектов не кратно сетке (например, 7)?

Высоту прибить гвоздями всякий сумеет. А вот отобразить витрину с разными товарами культурно — это уже сложнее. Но тоже можно 8-)
.product {height: 300px}

Жесткое задание высоты блока может вызвать ситуацию, когда из-за длинного описания товара контент выйдет за границы блока. Если переписать вашу сетку на 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>
...


В этом случае плитки всё же разъезжаются, это уже надо переверстать саму плитку.
Друзья, а кто может подсказать, как сделать Переключение вида карточек товаров на флексе?
Sign up to leave a comment.

Articles