На пост именно с таким заголовком я наткнулся в блоге Джима Нильсена. Вопреки, речь пойдёт не об ИИ, поэтому добавил звёздочку. Речь о подходе, который автор назвал «Lots of little HTML pages», сокращённо LLMS.
С помощью Cross-document View Transition можно создавать плавные переходы между разными страницами на CSS. BFCache делает переходы «вперёд»/«назад» мгновенными. Маленькие и лёгкие страницы загружаются быстро.
Эти три особенности позволяют вместо кнопки бургер-меню на JS сделать ссылку на отдельную страницу с меню, которая быстро загружается за счёт малого размера и плавно отображается за счёт View Transition.
Аналогично можно реализовать всплывающее окно поиска, которое на самом деле отдельная страница с формой. Так же можно поступить с фильтрами: загружать страницу с отфильтрованными элементами и анимацией.
Именно так бургер-меню, поиск и фильтрация реализованы в блоге Джима. Чтобы наглядно увидеть суть, советую пощёлкать сайт. А реализация предельно простая: несколько отдельных страниц и обычные ссылки
<a>.Для работы не требуется JS. Даже если вы не собираетесь делать поиск или меню отдельными страницами, как минимум это рабочий способ прогрессивного улучшения: сначала ссылки на страницы, потом кнопки с попапами на JS.
Минус подхода — зависимость от сети. Попап на странице есть здесь и сейчас, а страницу, пусть и лёгкую, нужно загрузить и отрисовать. На слабом соединении это займёт достаточно времени, что скажется на отзывчивости и анимации.
Всё равно стоит взять на вооружение как лёгкий и быстрый способ делать разного рода всплывающие попапы, сортировки или фильтрации. Неплохо подойдёт для статических блогов, персональных сайтов и других подобных проектов.
#html #css #ui