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