[Из песочницы] Сортировка списков на CSS21.02.2018 18:03

Знаю, звучит толсто. Но это правда возможно. Почти. Предлагаемый мной способ вряд ли применим в крупных проектах, но в мелких, для себя, типа «сайтов про кота», вполне рабочее решение. Возможность сортировки нам предоставит flexbox и css-переменные (они же custom properties) и js тут не потребуется.

Для начала создадим простой список критериев сортировки, который можно видеть почти в каждом интернет-магазине — по умолчанию, по цене (возрастание/убывание), по алфавиту (возрастание/убывание):

По умолчанию



По цене, по возрастанию



По цене, по убыванию



По алфавиту, по возрастанию



По алфавиту, по убыванию

А так же сам сортируемый список. В этом списке каждый элемент имеет название товара (в данном случае «Первый», «Второй» и т.п. и цену товара).

	   
Первый - 20000
	   
Второй - 17550
	   
Третий - 17549
	   
Четвертый - 17549
	   
Пятый  - 17549

.wrapper {
	display: flex;
	flex-direction: column;
}

Что означает отсортировать список? Это значит, нам нужно поменять взаимное расположение элементов в списке. Потомкам flex-блока можно задать свойство order для изменения порядка их следования в блоке. Если order не задан для элемента, его значение равно нулю. Элемент с большим значением order будет поставлен ближе к концу блока, элемент с меньшим — ближе к началу. Таким образом, нам нужно всего лишь добавить некие сведения о порядке расположения элементов списка в свойство order каждого элемента. В этом нам помогут css-переменные (inline-css тут для наглядности).

	   

	   	   Первый - 20000
           
	   

	   	   Второй - 17550
           
	   

	   	   Третий - 17549
	   
	   

	   	   Четвертый - 17549
	   
	   

	   	   Пятый  - 17549
	   

И подставив в order значение из css-переменной мы получим элементы расставленные в нужном порядке.

/* по умолчанию */
#q1:checked ~ .wrapper > .item {
	order: var(--default);
}
/* по цене */
#q2:checked ~ .wrapper > .item,
#q3:checked ~ .wrapper > .item {
	order: var(--cost);
}
/* по алфавиту */
#q4:checked ~ .wrapper > .item,
#q5:checked ~ .wrapper > .item {
	order: var(--title);
}

Для сортировки по возрастанию/убыванию можно использовать свойство flex-direction:

#q3:checked ~ .wrapper,
#q5:checked ~ .wrapper {
	flex-direction: column-reverse;
}

К сожалению, сразу становится очевидна проблема «почти», о которой я упомянул в начале — порядок следования элементов, заданный в css-переменных должен быть определен заранее. И если с ценой это не представляет особой проблемы, можно просто указать значение в переменной --cost как есть, то с остальными сортировками, по умолчанию и по алфавиту, придется заранее раздать элементам индексы. К плюсам решения можно отнести то, что изменения в порядке сортировки применяются мгновенно.

Вот рабочий прототип

© Habrahabr.ru