Глава 12. HTML и CSS: интерфейс, который работает до JavaScript

Документ раньше компонентов

Заголовки формируют структуру смысла, main обозначает основное содержимое, nav — набор переходов, button — действие, а link — навигацию. Универсальный div с click требует вручную вернуть клавиатуру, фокус, роль и состояния, которые уже есть у нативного элемента.

Порядок DOM должен оставаться логичным без CSS. Визуальное перемещение grid-area не должно заставлять пользователя клавиатуры прыгать по странице в неожиданной последовательности.

Форма говорит сама за себя

Каждое поле получает видимый label, связанный через for и id. Ошибка связывается через aria-describedby, а общая сводка получает фокус после неуспешной отправки. Placeholder показывает пример, но не заменяет подпись: после ввода он исчезает.

Не отключайте кнопку навсегда из-за клиентской проверки. Пользователь должен понять причину и способ исправления; сервер всё равно повторит проверку.

CSS как система ограничений

Определите tokens для цвета, расстояний и размера текста, затем строьте компоненты. Grid подходит для двумерного размещения, flex — для распределения в одном направлении. Container queries полезны, когда компонент реагирует на своё место, а не на ширину всего viewport.

Не фиксируйте высоту блока с текстом. Увеличение шрифта, перевод или длинное имя должны расширить компонент, а не обрезаться.

Progressive enhancement

Фокус и динамика

Модальное окно удерживает фокус, закрывается Escape и возвращает фокус инициатору. После динамического обновления не переносите фокус без причины; сообщайте результат через спокойную live-region. Анимация учитывает prefers-reduced-motion.

Контраст проверяйте инструментом, а не субъективным впечатлением. Состояние focus-visible должно быть заметно на всех интерактивных элементах.

Производительность интерфейса

Указывайте width и height изображения, используйте современные форматы и загружайте тяжёлое ниже первого экрана лениво. Критический интерфейс не должен ждать сторонний шрифт или библиотеку. Измеряйте layout shift и размер ресурсов на реальной странице.

Локальные библиотеки с фиксированной версией дают воспроизводимость и уменьшают внешние запросы; удаляйте код, который можно заменить платформой без потери совместимости.

Практика главы

Сверстайте карточку задачи, фильтр и форму создания так, чтобы основной маршрут работал без JavaScript. Затем добавьте JS-подтверждение и обновление списка, сохранив обычный POST как fallback.

Перелинковка со справочником