Хабр, привет!
Многие фронтенд-разработчики часто отдают предпочтение JavaScript при реализации интерфейсных элементов. Я же разработчик старой формации. Мы тогда стремились сделать всё с помощью HTML и CSS.
Так в интернете зародилось множество HTML- и CSS-решений. Думаю, вы видели эти костыли с переключением радиокнопок и стилизацией других элементов. У меня был период, когда я тоже загонялся по ним.
Честно говоря, это всё баловство. Но с развитием HTML и CSS появились классные подходы, которые частично заменяют логику, написанную на JavaScript. И мне хочется, чтобы вы использовали их как можно чаще. Поэтому сегодня я поделюсь с вами несколькими техниками, которые вы уже можете использовать в своих проектах.
Давайте посмотрим, что я вам подготовил.
Стилизация элементов с помощью псевдо-класса :has() вместо переключения классов
В интерфейсах обычное дело, когда стилизация компонента зависит от каких-то условий. Например, всем известная пагинация.
Если пользователь находится на первой странице, то ему не должна быть доступна кнопка переключения назад. Её обычно делают неактивной или совсем скрывают. Для этого используют реализацию с добавлением и удалением классов или атрибутов — тут кому что нравится.
Для демонстрации я буду использовать способ с классами.
<body>
<nav class="pagination">
<button class="pagination__prev pagination__prev_disabled">
<!-- здесь иконка -->
</button>
<ul class="pagination__list">
<li><a href="#0" class="pagination__poin pagination__point_current">1</a></li>
<li><a href="#0" class="pagination__point">2</a></li>
<li><a href="#0" class="pagination__point">3</a></li>
</ul>
<button class="pagination__next">
<!-- здесь иконка -->
</button>
</nav>
</body>Когда пользователь находится на любой другой странице, то кнопка «Назад» должна стать активной. Поэтому у неё нужно удалить класс .pagination__prev_disabled.
<body>
<nav class="pagination">
<button class="pagination__prev">
<!-- здесь иконка -->
</button>
<ul class="pagination__list">
<li><a href="#0" class="pagination__poin">1</a></li>
<li><a href="#0" class="pagination__point pagination__point_current">2</a></li>
<li><a href="#0" class="pagination__point">3</a></li>
</ul>
<button class="pagination__next">
<!-- здесь иконка -->
</button>
</nav>
</body>Таким образом получается следующая задача: «Если пользователь находится на любой странице, кроме первой, нам нужно отобразить кнопку переключения на предыдущую. Если же он находится на первой странице, то кнопка должна быть скрыта». Давайте напишем решение без удаления класса у кнопки.
Наша реализация будет построена на псевдо-классе :has(), с помощью которого мы отследим момент, когда пользователь будет на втором пункте. Чтобы всё работало правильно, нужно как-то обозначить это состояние. Можно использовать класс, но есть и другое решение.
Поскольку я продвигаю соблюдение правил цифровой доступности, то для обозначения текущего пункта я буду использовать ARIA-атрибут. В частности, атрибут aria-current со значением page, который обозначает текущий элемент.
Когда он будет находиться внутри первого элемента li, то браузеры должны скрыть кнопку.
<body>
<nav class="pagination">
<button class="pagination__prev">
<!-- здесь иконка -->
</button>
<ul class="pagination__list">
<li><a href="#0" class="pagination__point" aria-current="page">1</a></li>
<li><a href="#0" class="pagination__point">2</a></li>
<li><a href="#0" class="pagination__point">3</a></li>
</ul>
<button class="pagination__next">
<!-- здесь иконка -->
</button>
</nav>
</body>.pagination:has(li:first-child [aria-current="page"]) .pagination__prev {
display: none;
}
Браузер скрыл кнопку переключения на предыдущую страницу. Теперь переставим атрибут aria-current на второй пункт.
<body>
<nav class="pagination">
<button class="pagination__prev">
<!-- здесь иконка -->
</button>
<ul class="pagination__list">
<li><a href="#0" class="pagination__point">1</a></li>
<li><a href="#0" class="pagination__point" aria-current="page">2</a></li>
<li><a href="#0" class="pagination__point">3</a></li>
</ul>
<button class="pagination__next">
<!-- здесь иконка -->
</button>
</nav>
</body>
Отлично! Кнопка отобразилась. Всё работает, как задумывалось.
Точно так же можно поступить с кнопкой «Вперёд», когда пользователь окажется на последнем пункте. Но сейчас я не буду писать код. Я думаю, что это отличная возможность для вас потренироваться!
Модальные окна и другие всплывающие элементы
В начале моей карьеры всплывающие элементы всегда делались с помощью библиотеки jQuery. На любой вкус было множество плагинов. Так и появлялась куча загружаемых файлов, чтобы отобразить модальное окно или всплывающую подсказку.
Потом появились решения для стека React, Angular, Vue. А были и те, кто просто писал на чистом JavaScript. В общем, коллеги, теперь можно обойтись без всего этого, используя только HTML и CSS.
Сейчас в большинстве браузеров работает Popover API. Одной из его фишек являются атрибуты popover и popovertarget. По сути они работают так же, как атрибуты for и id для элементов label и input. Сейчас всё покажу.
Нам сначала нужно добавить атрибут popover для элемента, который обозначает модальное окно. У него же нужно объявить атрибут id .
Далее требуется добавить атрибут popovertarget для элемента, с помощью которого будет происходить отображение модального окна. Значение атрибута должно совпадать с ранее объявленным значением атрибута id.
Давайте для демонстрации сделаем разметку модального окна, которое будет появляться по нажатию на кнопку «Войти».
<body>
<button popovertarget="auth-modal">
Войти
</button>
<dialog id="auth-modal" popover>
<form class="form">
<div class="form__group">
<label for="email">Электронная почта</label>
<input id="email" type="email">
</div>
<button>Отправить код</button>
</form>
<button popovertarget="auth-modal">
<!-- здесь иконка -->
<span class="sr-only">Закрыть</span>
</button>
</dialog>
</body>В этом решении мне ещё нравится то, что его можно улучшить атрибутом autofocus.
Если мы его добавим для первого поля ввода, то при появлении модального окна браузеры самостоятельно перенесут пользователя в него. И пользователь сможет сразу ввести данные.
<body>
<button popovertarget="auth-modal">
Войти
</button>
<dialog id="auth-modal" popover>
<form class="form">
<div class="form__group">
<label for="email">Электронная почта</label>
<input id="email" type="email" autofocus>
</div>
<button>Отправить код</button>
</form>
<button popovertarget="auth-modal" popovertargetaction="hide">
<!-- здесь иконка -->
<span class="sr-only">Закрыть</span>
</button>
</dialog>
</body>И никаких обработчиков событий, объявленных нами. Они работают сразу же. Пользователь может закрыть модальное окно с помощью клавиатуры или кликнуть в любое место. Браузеры всё поймут и сделают без проблем. И всё это благодаря паре атрибутов.
Но мне нужно быть честным. В текущей реализации при открытом модальном окне будут доступны все интерактивные элементы вне его. Для демонстрации я сфокусируюсь на кнопку «Войти» с помощью клавиши Tab.
По этой причине нужно добавлять атрибут inert при открытии модального окна, чтобы все интерактивные элементы на странице стали недоступны пользователю. Пока полностью кроссбраузерного решения нет. Поэтому нам по-прежнему потребуется использовать JavaScript.
Я не мог закончить на такой ноте, поэтому покажу ещё один классный пример применения Popover API. Это всплывающие подсказки. Часто их можно увидеть в интернет-магазинах или маркетплейсах, когда нужно дополнительно пояснить какую-то информацию.
Например, я недавно таким образом узнал больше о беспроводных интерфейсах при выборе приставки.
Этот случай идеально подходит для реализации с помощью атрибутов popover и popovertarget.
<body>
<button type="button" popovertarget="tooltip" aria-label="Узнать больше о беспроводных интерфейсах">
<!-- здесь иконка -->
</button>
<div id="tooltip" popover>
<p>
Беспроводные интерфейсы значительно расширяют функциональность устройства. Чип NFC дает возможность бесконтактной оплаты с помощью гаджета. Технология Bluetooth используется для бесконтактной передачи данных и связи устройств (беспроводных наушников, фитнес-браслетов).
</p>
</div>
</body>Выделение одного элемента в группе за счёт стилизации оставшихся
Часто дизайнеры любят выделять элемент, на который навёл курсор пользователь. Мне больше всего нравится реализация, когда выделение элемента происходит за счёт затемнения остальных интерактивных элементов. Например, такое поведение можно встретить в разных креативных раскладках карточек.
Данный эффект я рассмотрю на примере списка схематичных плиток. Представьте, что это карточки или красивые изображения. В общем, уверен, что у вас с фантазией всё в порядке.
Наша задача заключается в том, чтобы при наведении на любую плитку все остальные становились темнее. Для этого мы будем добавлять свойство background-color.
<body>
<ul class="cards">
<li class="cards__group"><a href="#0" class="cards__item">1</a></li>
<li class="cards__group"><a href="#0" class="cards__item">2</a></li>
<li class="cards__group"><a href="#0" class="cards__item">3</a></li>
<li class="cards__group"><a href="#0" class="cards__item">4</a></li>
</ul>
</body>.cards:has(.cards__item:hover) .cards__item:not(:hover) {
background-color: #02786d;
}
Сейчас объясню, как работает этот селектор.
Он состоит из двух частей. Сначала с помощью псевдо-класса :has() я выбираю момент, когда пользователь навёл курсор на элемент с классом .card__item. Вторая часть уже добавляет стили ко всем элементам, кроме того, на котором сработал псевдо-класс :hover.
Такой подход может работать и на других событиях. Например, можно использовать псевдо-класс :focus-within. Или можно пойти дальше и использовать псевдо-классы, обозначающие позицию элемента.
Отображение подсказок при вводе данных в форме
Обработка введённых данных в формах — это основа. Всегда нужно отображать подсказки, если пользователь ввёл не то, что мы ожидаем от него. Чаще всего для этой задачи фронтендеры используют JavaScript.
Все решения сводятся к двум подходам. В первом разработчики добавляют нужные классы, которые отобразят подсказку в случае ошибки. Во втором они делают ещё проще, а именно добавляют текст подсказки в пустой элемент div, который находится рядом с полем.
Давайте рассмотрим решение без единой строчки на JavaScript. Для начала создадим разметку поля для ввода электронной почты вместе с подсказкой.
<body>
<form class="form">
<div class="form__group">
<label for="email">Электронная почта</label>
<input id="email" type="email">
<span class="form__invalid-hint">Кажется, вы ввели не электронную почту</span>
</div>
<button class="form__button" type="submit">Отправить</button>
</form>
</body>Сейчас подсказка будет отображаться всегда. Мы можем скрыть её с помощью атрибута hidden.
<body>
<form class="form">
<div class="form__group">
<label for="email" class="form__label">Электронная почта</label>
<input id="email" type="email" class="form__field">
<span class="form__invalid-hint" hidden>Кажется, вы ввели не электронную почту</span>
</div>
<button class="form__button" type="submit">Отправить</button>
</form>
</body>Теперь, чтобы её отобразить, нам надо отследить событие, когда пользователь закончит ввод данных. Это можно сделать с помощью двух псевдо-классов :user-valid и :user-invalid.
Поскольку мы ждём, когда пользователь введёт ошибочные данные, то будем использовать второй.
.form__field:user-invalid + .form__invalid-hint {
display: block;
}Главная фишка псевдо-классов является то, что они начинают работать после начала взаимодействия пользователя с полем ввода. Это позволяет больше не отслеживать события. Браузеры сделают всё сами.
Заключение
Давайте подведём итог. В этой статье мы рассмотрели:
как стилизовать элементы без переключения классов при изменении состояния компонента;
реализацию модального окна и других всплывающих элементов с помощью атрибутов
popoverиpopovertarget;отображение подсказок при вводе данных в формах с помощью псевдо-классов
:user-invalid;подход выделения одного элемента в группе за счёт стилизации его соседей.
Надеюсь, вы нашли что-то интересное для себя. Также мне интересно, какие HTML- и CSS-подходы вы используете, чтобы заменить JavaScript-решения. Поделитесь ими, пожалуйста, в комментариях.
На этом всё. Спасибо за чтение!
P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.
© 2026 ООО «МТ ФИНАНС»