⁣CSS :user-invalid и :user-valid: отложенная валидация без JS и без мигания ошибок

Классическая боль любой формы: input:invalid срабатывает сразу при рендере. Пользователь ещё ничего не вводил, а поле уже красное. Дальше - три костыля на выбор: :not(:placeholder-shown), класс .touched из JS или novalidate + ручная валидация.

Селекторы уровня 4 закрывают это нативно.

Как это работает

:user-invalid матчится, только если элемент одновременно:

1. кандидат на constraint validation и сейчас невалиден,
2. был «изменён пользователем» (user interacted).

Второй пункт - ключевой. По HTML-спеке флаг выставляется, когда пользователь изменил значение или попытался отправить форму. То есть до первого реального действия с полем оно остаётся нейтральным, а после сабмита все проблемные поля подсвечиваются разом - именно тот UX, к которому мы руками приходили через JS.

:user-valid - зеркало: валидно и было взаимодействие. Полезно, чтобы не красить зелёным пустые нетронутые поля.

Код

/* Плохо: красное с первого кадра рендера */
input:invalid { border-color: #e5484d; }

/* Ок: ошибка - только после взаимодействия */
input:user-invalid { border-color: #e5484d; }
input:user-valid   { border-color: #30a46c; }

/* сообщение без JS: заранее в разметке, показ через CSS */
.field .msg       { visibility: hidden; }
.field:has(:user-invalid) .msg { visibility: visible; }
.field:has(:user-invalid) .msg::before { content: attr(data-msg); }

<div class="field">
  <input type="email" required>
  <span class="msg" data-msg="Похоже, в адресе опечатка"></span>
</div>

Работает с input, select, textarea, любым типом и любым ограничением: required, pattern, minlength, type="email". Реагирует и на «ввёл - стёр», и на попытку сабмита.

Подводные камни

* Поддержка - Baseline с конца 2023 (Chrome 119+, Firefox 88+, Safari 16.5+). Для более старых - тот же селектор в :where()-фолбэке или @supports selector(:user-invalid).
* Blur сам по себе флаг не ставит. Если нужно «валидировать по потере фокуса, даже если значение не менялось» - это по-прежнему JS. Но в 95% форм такое поведение и не нужно.
* required никуда не делся. :user-invalid меняет момент показа, а не правила валидации.
* A11y не бесплатно. Псевдоклассы не выставляют aria-invalid - скринридер про ошибку не узнает. Либо дублируйте состояние атрибутом, либо полагайтесь на нативную браузерную валидацию при сабмите.
* Не стилизуйте :invalid вообще в формах с ранним показом - иначе правила конфликтуют и «мигание» возвращается.

Итого

:user-invalid убирает целый слой JS-состояния: флаг «тронуто/не тронуто» больше не нужно тащить в классы и стейт-менеджер. Разметка описывает намерение, CSS - момент показа. Классический кейс, где платформа догнала практику.

⁣content-visibility: auto: рендер-виртуализация без JS

Браузер по умолчанию считает layout и paint для всей страницы, даже если 80% контента за фолдом. content-visibility: auto говорит: пока элемент не «релевантен пользователю», пропускай style/layout/paint его поддерева. DOM, a11y-дерево и поиск по странице при этом работают - в отличие от content-visibility: hidden.

Но есть цена: у пропущенного элемента нет внутреннего размера, и его block-size схлопывается. Скроллбар прыгает, scrollHeight врёт, anchor-ссылки и scroll-restore уезжают.

Лечится contain-intrinsic-size - placeholder-размер, который подставляется вместо настоящего, пока секция не отрендерена:

.feed > article {
  content-visibility: auto;
  /* 420px - оценка; после первого рендера запомнится реальная высота */
  contain-intrinsic-size: auto 420px;
}

Ключевое слово здесь - auto. Без него placeholder всегда будет тем, что вы написали. С ним браузер запоминает последний отрендеренный размер и дальше использует его как placeholder - при повторном выезде элемента скролл уже не дёргается. Поэтому оценку берите близкой к реальности: от неё зависит длина скроллбара и позиция скролла до первого рендера.

Нужны две оси - используйте две величины (width height) или логические contain-intrinsic-block-size / contain-intrinsic-inline-size.

Где ломается

1. content-visibility: auto неявно включает contain: layout style paint. Элемент становится containing block для absolute/fixed потомков, а overflow обрезается. position: fixed внутри секции перестаёт цепляться к вьюпорту, sticky ведёт себя иначе, выносы отрицательными margin обрезаются.

Claude Code наконец-то завёз поддержку AGENTS.md

Никаких допнастроек: теперь Claude Code по умолчанию первым делом читает AGENTS.md, а если файла нет — подхватывает CLAUDE.md.

Доступно с версии 2.1.277. 💬