Современные нативные интерфейсы: учебный каталог
Собираем учебный каталог «Полка» на HTML, CSS и JavaScript без внешних пакетов. Основное чтение работает обычными ссылками; dialog, popover, anchor positioning, переходы и шкалы добавляются постепенно. Новые CSS-возможности имеют базовые ветки и конкретные условия поддержки.
Нужны основы HTML, CSS и JavaScript. Архив содержит четырнадцать полных состояний. Выбирайте одну папку lesson-NN, не смешивая файлы разных этапов.
| Урок | Результат |
|---|---|
| 1. Каталог как основа прогрессивного улучшения | Задать доступный каталог со ссылками и отдельным слоем улучшений. |
| 2. Карточка урока в нативном диалоге | Открывать дополнительную карточку через showModal и возвращать фокус. |
| 3. Всплывающая справка без управления слоями | Добавить немодальный popover с доступной текстовой альтернативой. |
| 4. Привязка справки к кнопке через CSS | Разместить popover рядом с anchor без вычисления координат JavaScript. |
| 5. Запасные позиции у края экрана | Задать flip-block и flip-inline и ограничить размер панели. |
| 6. Плавная смена фильтра с View Transitions | Обновлять список внутри одного документа с обходом неподдерживаемого API. |
| 7. Переходы между страницами каталога | Включить переходы между двумя документами одного происхождения. |
| 8. Полоса чтения с прокруткой документа | Создать декоративный индикатор на scroll timeline без scroll-обработчика. |
| 9. Появление карточек на view timeline | Связать небольшое изменение карточки с её видимостью, сохранив базовое содержимое. |
| 10. Согласование движения и пользовательских настроек | Отключить необязательные эффекты в CSS и JavaScript при reduced motion. |
| 11. Плотность карточек через запросы стиля | Передавать семантическую плотность через custom property и style query. |
| 12. Типизированные атрибуты для визуальной шкалы | Использовать attr с числовым типом только для дополнительного отображения длительности. |
| 13. Контрастный текст и цветовой fallback | Добавить contrast-color как улучшение поверх заранее выбранной пары цветов. |
| 14. Передача интерфейса с матрицей возможностей | Зафиксировать клавиатурные маршруты, деградацию и бюджет ресурсов. |
Все материалы опубликованы. Установка, выполнение учебных программ, браузерные сценарии, тесты и публикация учебных приложений не проводились.