Использование метода Grid Shepherd для упорядочивания данных с CSS

От автора: при работе с данными программисты часто не знают, правильно ли они отфильтрованы или отсортированы. Это особенно болезненно, когда вы перебираете массив, затем отображает данные на сайте, не зная местоположений каждого элемента, получающего их. Grid Shepherd — это метод, который помогает позиционировать и сортировать элементы там, где вы хотите, использовать CSS Grid вместо JavaScript.

Об этом мы и расскажем в этом посте. Техника Grid Shepherd поможет навести порядок и структурировать данные, с которыми мы работаем, и в то же время дать нам более четкое представление о том, где и как они используются.

Сортировка с помощью JavaScript

Мы начнем с перебора неупорядоченного множества сельскохозяйственных животных. Представьте, что на полях счастливо пасутся коровы и овцы. Они могут быть сгруппированы вместе программно с помощью метода Array.prototype.sort и перечислены на странице:

let animals = [ { name: 'Edna', animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink', animal: 'sheep' }, { name: 'Olga', animal: 'cow' },
]
let sortedAnimals = animals.sort((a, b) => { if (a.animal < b.animal) return -1 if (a.animal > b.animal) return 1 return 0
})
console.log(sortedAnimals)
/* Returns: [ { name: 'Elga', animal: 'cow' }, { name: 'Olga', animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink', animal: 'sheep' } ]
*/

Встречайте Grid Shepherd

Метод Grid Shepherd позволяет сортировать данные без использования JavaScript. Вместо этого мы полагаемся на CSS Grid. Структура точно такая же, как у массива объектов JavaScript выше, только она представлена в узлах DOM.

<main> <div class="cow">Edna</div> <div class="sheep">Liam</div> <div class="sheep">Jenn</div> <div class="cow">Fink</div>
</main>

Чтобы собрать животных, нам нужно загнать их в общую зону, что мы и делаем с помощью <main&t;. Устанавливая display: grid, мы создаем контекст форматирования сетки, где мы можем определить колонку (или ряд), которые должно занимать каждое животное.

.sheep { grid-column: 1; }
.cow { grid-column: 2; }

И grid-auto-flow: dense задает то, что каждое животное упорядочивается в первую доступную точку каждой определенной области. Это также может быть использовано с любым количеством различных вариантов сортировки — просто определите другую колонку, и данные будут волшебным образом перенесены в нее.

main display: grid; grid-auto-flow: dense;
} .sheep { grid-column: 1; }
.cow { grid-column: 2; }

Pro Shepherding

Мы можем продолжить наш пример скотоводства с помощью CSS Counters. Таким образом, мы можем подсчитать, сколько животных у нас есть в каждом столбце и — применяя количественные запросы Хейдона Пикеринга, описанные в докладе Леи Веру в 2011 году — условно стилизовать их в зависимости от того, сколько их есть в наличии.

Количественные запросы полагаются на определенный селектор для подсчета классов — что было бы замечательно использовать с нотацией псевдо-класса :nth-child(An+B [of S]?), но в настоящее время она доступна только в Safari. Это означает, что мы должны использовать в качестве обходного пути селектор :nth-of-type().

Нам нужны новые типы элементов, чтобы это работало. Это может быть реализовано через веб-компоненты или переименование любого HTML-элемента. Это работает, даже если этих элементов нет в спецификации HTML, так как браузеры используют неопределенные теги HTMLUnknownElement, в результате чего они ведут себя как div. Теперь документ выглядит так:

<fence> <sheep>Lisa</sheep> <sheep>Bonnie</sheep> <cow>Olaf</cow> <sheep>Jenn</sheep>
</fence>

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

sheep:nth-last-of-type(n+10),
sheep:nth-last-of-type(n+10) ~ sheep,
cow:nth-last-of-type(n+10),
cow:nth-last-of-type(n+10) ~ cow, { background-color: red;
}

Кроме того, счетчики могут быть просто реализованы с помощью counter-reset: countsheep countcow; для родительского элемента и с помощью селектора before для выбора каждого элемента и подсчета.

sheep::before { counter-increment: countsheep; content: counter(countsheep); }

Здесь мы собираемся обратиться к Vue, чтобы динамически добавлять и удалять животных, используя переходы Vue с двумя различными вариантами сортировки. Обратите внимание, как животные естественным образом занимают соответствующие столбцы:

Grid Shepherd также может использоваться с любыми неупорядоченными данными для того чтобы:

Shepherding и доступность

grid-auto-flow: dense не меняет структуру DOM сетки — это просто визуально изменяет порядок элементов. Побочный эффект можно увидеть в последнем примере при сортировке по алфавиту, когда числа перемешаны. Изменение структуры DOM влияет не только на людей, которые используют программы чтения с экрана, но также на обход вкладок.

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

Заключение

Довольно приятно видеть, как можно использовать такой мощный CSS инструмент макета, как grid, для сценариев использования, которые выходят за рамки традиционных потребностей макетов, и для вещей, которых в прошлом мы могли достичь только с помощью других языков. В этом случае мы можем увидеть, как объединяются преимущества компоновки CSS Grid и возможности динамической обработки данных в JavaScript и как это дает нам больше возможностей визуализировать данные по нашему желанию.

Автор: David Bernegger

Источник: https://css-tricks.com

Редакция: Команда webformyself.