Создание компонента фильтра данных на чистом CSS

Создание компонента фильтра данных на чистом CSS

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

Над чем мы работаем

У каждого автора здесь на Tuts + есть собственная страница архива. Мы собираемся воссоздать такой список руководств, используя собственную разметку. Затем мы реализуем компонент, который будет фильтровать записи на основе категорий, к которым они принадлежат. Вот наш окончательный проект:

Давайте построим его!

1. Начинаем с HTML-разметки

Мы начнем с определения категорий фильтров в нашем компоненте. В этом примере мы будем использовать семь фильтров:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

All

CSS

JavaScript

jQuery

WordPress

Slider

fullPage.js

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

Затем мы создаем упорядоченный список, который содержит метки, связанные с этими переключателями. Помните, что мы связываем переключатель с меткой, устанавливая его значение id равным значению for метки:

Затем мы настраиваем другой упорядоченный список, включающий элементы, которые мы хотим фильтровать (наши карточки). Каждый из отфильтрованных элементов будет иметь собственный атрибут data-category, значение которого представляет собой список фильтров, разделенных пробелами:

В нашем случае фильтруемые элементы будут постами. Таким образом, разметка, которую мы будем использовать для описания поста вместе с его мета-данными (заголовок, изображение, категории), выглядит следующим образом:

Когда разметка готова, давайте обратим внимание на необходимые стили.

2. Определение стилей

Сначала мы визуально скрываем переключатели:

Затем мы добавляем несколько стилей для фильтров:

CSS Grid Layout

Далее мы укажем некоторые стили для фильтруемых элементов. Самое главное, мы используем CSS Grid, чтобы уложить их по-разному в зависимости от размера экрана:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Примечание. Для удобства чтения мы не группируем в CSS общие правила.

Добавление стилей фильтрации

Идея здесь удивительно проста. Каждый раз, когда мы нажимаем на фильтр, должны отображаться только соответствующие отфильтрованные элементы (посты). Для реализации этого функционала мы будем использовать комбинацию следующих вещей:

Псевдо-класс :checked

Обратный псевдо-класс ( :not())

Селекторы атрибутов

Общий комбинатор элементов одного уровня ( ~) переименованный в CSS4 в «последовательно-одноуровневый селектор»

Когда мы нажимаем на фильтр «All», отображаются все посты, имеющие атрибут data-category:

Когда мы нажимаем на любую другую категорию фильтра, будут видны только целевые посты:

Например, когда мы нажимаем на категорию фильтра «Slider «, будут отображаться только посты, принадлежащие этой категории.

Создание компонента фильтра данных на чистом CSS

Компонент фильтра на чистом CSS в действии

Стоит отметить, что в приведенных выше стилях вместо синтаксиса [att~=val] мы могли бы в равной степени использовать синтаксис [att*=val]. Вот как будет выглядеть это изменение:

Быстрое пояснение CSS-селектора

Что именно указывает этот селектор? Первая часть [value="CSS"]:checked ищет выбранные переключатели с определенным значением (в данном случае «CSS»).

После этого тильда (~) — это то, что мы сейчас называем «последовательно-одноуровневым селектором». Он выбирает элементы, у которых тот же родительский элемент, что и у предыдущего элемента, даже если они в разметке расположены не рядом. Так что ~ .posts .post ищет элементы, .posts .post, у которых тот же родительский элемент, что и у выбранного переключателя.

Чтобы еще повысить специфичность, мы уточняем наш селектор :not([data-category~="CSS"]), чтобы он выбирал только те элементы .post, у которых атрибут data-category не содержит значение «CSS» где-то внутри разделенного пробелами списка.

Затем он применяет display: none; к любым элементам, которые соответствуют этим критериям. Это довольно сложный селектор, хотя он вполне логичен. Человеческим языком вы можете описать это как: «Когда выбран переключатель со значением«CSS», найти все элементы, которые не содержат «CSS» в списке категорий данных, и скрыть их».

Завершающие стили

В качестве последнего шага мы добавим правило, которое выделяет активную категорию фильтра:

3. Доступность

Эта фильтрация доступна по умолчанию; благодаря тому, как работают радио-кнопки и метки, мы можем фильтровать элементы с помощью клавиатуры. Сначала нажмите клавишу Tab, чтобы переместить фокус на выбранный переключатель. Затем нажмите клавиши со стрелками, чтобы переместить фокус и выбрать другие переключатели. Попробуйте сами:

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

Заключение

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

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий