Используйте количественные запросы, чтобы сделать ваш CSS ориентированным на количество

Количественные запросы – это специально настроенные CSS-селекторы, которые позволяют разработчикам учитывать их количество. В адаптивном дизайне мы обычно используем медиазапросы, чтобы адаптировать наш дизайн к различным областям просмотра. Однако в некоторых случаях мы можем захотеть переключиться на другой макет или использовать другие размеры или эстетику после того, как на экране появится определенное количество контента того же типа.

Читайте также: Просмотр уровня приоритета стиля CSS

На динамических веб-сайтах часто возникают проблемы, и мы не всегда заранее знаем, сколько элементов будет на экране. Подумайте о тегах в конце постов блога, фильтрах по конкретным продуктам при навигации по сайтам электронной коммерции или результатах поиска на месте. Это когда количественные запросы могут дать нам элегантное решение только для CSS и избавить нас от хлопот с использованием JavaScript.
Как составляются количественные запросы
Мы можем построить три вида количественных запросов:

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

По крайней мере, запросы, когда на экране присутствует более определенного количества контента одного типа.
«Максимум» запросов, когда на экране меньше определенного количества контента одного типа.
Запросы «между», когда на экране больше, чем определенное количество, но меньше, чем другое количество контента того же типа.

Все три типа количественных запросов строятся с использованием : П-й последний ребенок Псевдокласс CSS и общий выбор сестер (~), в то время как запросы «at-most» и «Между» также используют :Первый ребенок псевдо-класс.

Псевдокласс: nth-last-child ведет себя аналогично : П-й ребенок, однако он начинает отсчет с последнего потомка, в то время как общий селектор брата (~) выбирает все элементы, которые идут после определенного брата.

Рекомендуемое чтение: веб-дизайн: руководство по псевдоклассам CSS3

“По крайней мере” запросы
Самая важная вещь для понимания – это то, что количественные запросы выбирают все элементы, которые принадлежат одному и тому же родительскому элементу, поскольку цель состоит в том, чтобы назначить один и тот же дизайн всем элементам, которые соответствуют количественным критериям.

В приведенном ниже фрагменте кода мы выбираем все

элементы в неупорядоченном списке, который содержит минимум пять элементов списка.

/ * Запрос «Как минимум» * /
ul li: nth-last-child (n + 5),
ul li: nth-last-child (n + 5) ~ li {
цвет фона: оранжевый;
}

Как видите, запрос «как минимум» состоит из двух селекторов CSS. Первый селектор ul li: nth-last-child (n + 5) выбирает все

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

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

элементы будут сохранять свой цвет по умолчанию (синий). Вы можете проверить в реальном времени, как работает запрос «по крайней мере», с помощью пера Codepen ниже.

Увидеть перо Количество запросов как минимум HONGKIAT (@hkdc) на CodePen,
«Максимум» запросов
Запросы «по большей части» также состоят из двух селекторов, однако они полагаются не только на псевдокласс: nth-last-child, но и на: first-child. Пример кода ниже выбирает все

элементы, принадлежащие неупорядоченному списку, которые имеют максимум пять элементов списка.

/ * Запрос “Самое большее” * /
ul li: nth-last-child (-n + 5): первый ребенок,
ul li: nth-last-child (-n + 5): первый ребенок ~ li {
цвет фона: оранжевый;
}

Первая часть первого селектора, nth-last-child (-n + 5), использует отрицательное значение, которое меняет направление выбора – оно все еще считает от последнего потомка (что является встроенной природой : nth-last-child псевдо-класс), однако теперь он выберет последние пять элементов (то есть элементы, которые находятся на расстоянии не менее пяти элементов от последнего дочернего элемента). Этот селектор выбирает последние пять элементов любого неупорядоченного списка, однако мы хотим выбрать только те, которые имеют максимум пять элементов (так как будут выбраны все элементы).

Вот почему нам нужно объединить его с псевдоклассом: first-child, который выберет первые элементы ранее выбранных элементов списка, но только для тех, которые также являются первыми дочерними элементами их списка.

ul> parent, что верно только для неупорядоченных списков, содержащих максимум пять

элементы.

Теперь нам не нужно ничего делать, кроме как добавить второй селектор, который выберет общих братьев и сестер из ранее выбранных элементов: первый-дочерний. И на этом все, наш «максимум» запрос выполнен. Вы можете поиграть с кодом CSS в демоверсии ниже, чтобы увидеть, как он работает.

Увидеть перо Количество запросов «максимум» HONGKIAT (@hkdc) на CodePen,
«Между» запросами
Запрос «между» объединяет код, который мы использовали для запросов «минимум» и «максимум». В приведенном ниже примере кода выбираются все элементы неупорядоченных списков, которые содержат минимум пять, но максимум шесть элементов списка.

/ * Запрос “Между” * /
ul li: nth-last-child (n + 5): nth-last-child (-n + 6): первый ребенок,
ul li: nth-last-child (n + 5): nth-last-child (-n + 6): first-child ~ li {
цвет фона: оранжевый;
}

Чтобы построить «между запросами», мы объединяем CSS-селекторы, относящиеся к соответствующим запросам «минимум» и «максимум». Запрос “по крайней мере” в нашем примере: nth-last-child (n + 5), тогда как запрос “по крайней мере”: nth-last-child (-n + 6): first-child, мы просто присоедините их к двоеточию.

Увидеть перо Количество запросов между HONGKIAT (@hkdc) на CodePen,
Случаи использования
Количество запросов имеет много интересных вариантов использования от навигации с учетом содержимого до автоматических систем сетки, вот коллекция из лучших:
Инструменты для построения количественных запросов
Есть несколько отличных инструментов для разработчиков, которые могут помочь вам легче создавать количественные запросы.
Построитель количественных запросов
Это удобно построитель количественных запросов делает создание количественных запросов простым и понятным. Вам нужно только заполнить три поля ввода (подсчитываемые элементы, тип запроса, количество элементов), и инструмент сгенерирует запрос количества, который вам нужен.
Количество запросов миксинов для SASS
Вы можете использовать эти простые количество запросов в ваших проектах Sass. Автор, Дэниел Гиллан, также создал Codepen демо где вы можете проверить mixins в действии.
Плагин PostCSS для количественных запросов
Эта PostCSS плагин построен на основе вышеупомянутых миксинов количественных запросов и позволяет включать количественные запросы в рабочий процесс PostCSS.