Size: a a a

HTML/CSS — русскоговорящее сообщество

2020 July 24

L

LZD in HTML/CSS — русскоговорящее сообщество
iwahid
Верстаю карточки товаров

Когда в баре кликаю по кнопкам меняющим вид раскладки карточек - сетка вывода карточек должна меняться (ну это понятно ))
Вопрос в том, как сделать лучше перестроение этого списка (и изменение самих карточек).
1. Я могу сверстать широкую карточку, а после, через классы или медиазапросы перестроить ей в меньший вариант с отключением некоторых элементов/полей. Это хороший вариант?
2. Или, лучше делать два разных вида карточек и показывать сперва один вариант, а при смене варианта отображения - другие карточки.

Какой из этих вариантов лучше?
Какой из них лучше, если в последствии планируется собрать магазин на фреймворке?
1 вариант
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
iwahid
По карточкам

Посмотрел сайт в примере через инспектор - карточка остаётся той же самой, просто отключают часть элементов.
Но как мне кажется, способ с рендером новых карточек - лучше. По сути, данные же остаются на странице в DOM дереве, это больше 15 элементов на одну карточку. В сумме больше 300-500 элементов в дом дереве, которые просто не видны визуально.

Склоняюсь к варианту с использованием полностью разных карточек
но браузер не рендерит эти элементы
да, они будут в DOM, но браузер не будет тратить ресурсы на их построение
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
Zahar Avsievich
но браузер не рендерит эти элементы
да, они будут в DOM, но браузер не будет тратить ресурсы на их построение
Когда ты будешь их генерировать динамически
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
Neo Makela
Когда ты будешь их генерировать динамически
не, я про элементы с display: none
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
При смене этой штуки, как карточки выводить будешь, у тебя браузер будет скрипт прогонять заного, тем самым скорость уменьшиться, стили намного проще поменять, нежели заного тянуть данные с бэка, либо костылить и сохранять их где-то и при смене выводить уже новые
источник

i

iwahid in HTML/CSS — русскоговорящее сообщество
Neo Makela
Наоборот
Ха, писал-писал, и понял где я не прав )
Имелось ввиду, что при смене раскладки - я не буду делать повторные запросы на сервер.
К примеру, в реакте, все данные уже будут лежать в стейте. И при смене отображения - я только генерирую новые карточки с нужным набором данных (под большую - все данные, под маленькую - только часть данных)
В этом случае - нет же разницы ни по запросам на сервер, ни по оптимизации. Только на выбор один из двух циклов рендера
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
Neo Makela
При смене этой штуки, как карточки выводить будешь, у тебя браузер будет скрипт прогонять заного, тем самым скорость уменьшиться, стили намного проще поменять, нежели заного тянуть данные с бэка, либо костылить и сохранять их где-то и при смене выводить уже новые
ну так да, плюс запросы
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
Так что лучше делать один элемент и писать для него логику со стилями
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
iwahid
Ха, писал-писал, и понял где я не прав )
Имелось ввиду, что при смене раскладки - я не буду делать повторные запросы на сервер.
К примеру, в реакте, все данные уже будут лежать в стейте. И при смене отображения - я только генерирую новые карточки с нужным набором данных (под большую - все данные, под маленькую - только часть данных)
В этом случае - нет же разницы ни по запросам на сервер, ни по оптимизации. Только на выбор один из двух циклов рендера
Го данные в стэйт сохранять без надобности
источник

i

iwahid in HTML/CSS — русскоговорящее сообщество
D
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
можно гридами легко перестроить по классу
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
вообще не так сильно меняется карточка
источник

ЕК

Евгений Кравцов... in HTML/CSS — русскоговорящее сообщество
Всем привет, подскажите почему так ведет себя border-radius в сафари
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
Подсказываю
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
Евгений Кравцов
Всем привет, подскажите почему так ведет себя border-radius в сафари
как? закругляет углы?
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
ты, скорее всего, меняешь бордер-радиус внутренний, а у тебя ещё он у карточки есть
ну или наоборот
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
в код надо смотреть, codepen.io
источник

ЕК

Евгений Кравцов... in HTML/CSS — русскоговорящее сообщество
это именно в сафари
источник

ЕК

Евгений Кравцов... in HTML/CSS — русскоговорящее сообщество
бордер радиус вообще не меняется
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
Zahar Avsievich
в код надо смотреть, codepen.io
.
источник