23.06.2026 13:02
melnik909 10 16000 Источник

Хабр, привет!

Многие фронтенд-разработчики часто отдают предпочтение 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 ООО «МТ ФИНАНС»

Комментарии (10)


  1. radtie
    23.06.2026 14:10
    #30144006

    По этой причине нужно добавлять атрибут inert при открытии модального окна, чтобы все интерактивные элементы на странице стали недоступны пользователю. Пока полностью кроссбраузерного решения нет. Поэтому нам по-прежнему потребуется использовать JavaScript.


    А разве showModal для dialog не делает то что нужно, можно даже без js


    1. alexnozer
      23.06.2026 14:10
      #30147690

      Делает, но поддержка Invoker Commands пока не такая хорошая. Применение Popover API к <dialog> позволяет создавать только немодальные диалоги, которые не блокируют остальной интерфейс. Чтобы создать модальный диалог, его нужно открыть в соответствующем режиме через вызов showModal() или декларативно через command="show-modal". Тогда браузер сам поставит inert, вынесет окно в отдельный слой и так далее.


  1. qrKot
    23.06.2026 14:10
    #30144326

    .pagination:has(li:first-child [aria-current="page"]) .pagination__prev {
	display: none;
}

    А я ведь правильно понимаю, что эта штука сломается, как только я, например, порядок элементов поменяю? Тупо, например, подложу li с какой-нибудь стильной стрелочкой перед номером страницы?

    Ну или решу отображать список страниц по 10 штук (1-10, 11-20) - и на 11-й странице у меня кнопки "назад" не будет?


  1. radtie
    23.06.2026 14:10
    #30144584

    Ага, но можно навесить больше мета-данных, что то вроде aria-posinset="1” и уже их использовать в селекторе


  1. zrtash
    23.06.2026 14:10
    #30144684

    спасибо хорошая статья


  1. accXak
    23.06.2026 14:10
    #30145410

    Оглавления не хватает. Узнал пару новых штук, которые не смогу использовать еще пару лет. Остальное знал. Много воды. Скажите, вам что-то помогало в написании это текста?


    1. melnik909 Автор
      23.06.2026 14:10
      #30147458

      10 лет опыта и чай


  1. Anton-Sergeevich
    23.06.2026 14:10
    #30145996

    Тема близка, хоть я и с бэкенд-стороны. Когда проектируешь админки и интерфейсы для управления сложными Telegram-ботами, часто встаёт вопрос: делать микрофронтенд на Vue/React или обойтись серверным рендерингом с HTML/CSS и минимумом JS. В итоге для большинства внутренних дашбордов мы пошли именно по второму пути: интерактивные элементы на details/summary, попапы на чистом CSS с :target, а логику вынесли на сервер через htmx. Получилось удивительно быстро и без лапши из скриптов.

    Из опыта: иногда CSS-решения действительно выглядят как «костыли», но в сочетании с современными возможностями (контейнерные запросы, has(), popover) уже спокойно перекрывают 80% потребностей, не плодя лишних зависимостей. Спасибо за подборку техник, некоторые взял на заметку для своих админок. А где, на ваш взгляд, проходит граница, после которой без JS уже не обойтись — когда дело доходит до реального времени или сложной валидации форм?


    1. melnik909 Автор
      23.06.2026 14:10
      #30147456

      где интерфейс становится сложным для взаимодействия пользователем. Например, я не буду использовать технику с :target поскольку пользователям скринридера это приносит сложности.

      Но в тоже время, если ваши пользователи не используют скринридер, то данная техника может существовать.


  1. proneta
    23.06.2026 14:10
    #30147476

     Пользователь может закрыть модальное окно с помощью клавиатуры или кликнуть в любое место. Браузеры всё поймут и сделают без проблем. И всё это благодаря паре атрибутов.

    попробуйте на WB написать отзыв, разнести его в Не/Нравится, загрузить Фото/Видео by Drag'n'Drop !!! из внешнего Проводника без единой ошибки -- и после случайно кликнуть вне формы. Вы услышите кучу проклятий в свой адрес и адрес WB, поровну.
    Так всегда бывает, когда на сайт приходит дизайнер, но сам на нем никогда ничего не покупает :) .
    Это новый модный способ закрытия формы внешним кликом уже на каждом сайте заставляет внутренне собраться, представить минное поле, писать текст в стороннем Notepad++, отслеживать каждое свое движение, выравнивать страницу заранее, чтобы не перемещать ее в процессе.

    В итоге, перечитать этот абзац, и плюнуть на отзывы, feedback для юзеров. Купил и забыл. А плюсами и минусами пусть делятся другие, кто согласен на этот квест.

    И все почему: кому-то в W3C показалось очень стильным убрать стильный крест из угла.

    -------

    И с вашим статическим hidden не все понятно.

    -------

    на форуме Bitwarden эта война юзеров с внешним кликом (напомню, что Bitwarden -- суть двух входов в форму : логин и пароль, все работает только при идеальной настройке, все попытки редактирования на открытой странице уничтожаются именно этой стратегией закрытия) длится уже 8 лет. Но модные дизайнеры BW свой собственный форум не читают , дизайн -- наше все.

    Особенно доставляет видеть такой же стон юзера с биркой "Moderator" :)