От автора: мобильная навигация должна быть эффективной. За последние год-два мобильный Интернет добился больших успехов, и я с радостью заменил на своем телефоне несколько собственных приложений с их веб-альтернативами, и сегодня я являюсь полноправным пользователем Twitter Lite и Instagram PWA.
В течение долгого времени адаптивная мобильная Сеть характеризовалась вертикальной иерархией, однако нативные приложения немного меняли вертикальную иерархию, с их основными представлениями и реализацией очень популярного шаблон, иногда называемого “horizontal paging”, который предоставляет пользователям эффективную горизонтальную навигацию с одной вкладки на другую, используя простые движения вправо / влево, и делает релевантные данные или контент более доступными на разных экранах.
Не к удивительно, что Twitter и Instagram PWA — которые, как уже упоминалось, я использую каждый день, и которые являются двумя из моих самых любимых веб-приложений — ввели в свои приложения такие навигационные панели. Однако — и это меня тоже не удивляет — они не поддерживают движений горизонтального протягивания пальцем, и их отсутствие это не ограничения приложений, а, к сожалению, на мой взгляд, ограничение веб-платформы.
Instagram PWA слева, Twitter PWA справа — Навигация с вкладками Twitter чрезвычайно сложна с помощью одной руки, так как навигационная панель находится дальше на больших экранах.
Проблемы с традиционной «Каруселью»
Проблемы с традиционными, кросс-браузерными каруселями начинаются с требований к реализации:
Контейнер со скрытым контентом, выходящим за границы
Широкий контейнер в пикселях.
Минимум 7 различных прослушивателей событий: mousedown, mouseup, mouseleave, mousemove, touchstart, touchhend, touchmove.
При перемещении мыши или касания мы переходим к более широкому контейнеру.
CSS will-change:transform и любая другая магия, которую мы можем добавить, чтобы сделать этот переход максимально плавным.
Следуя этим требованиям, мы можем предоставить приличную карусель с 50 багами или, возможно, что-то, что хорошо подходит для hero-баннера, но если мы хотим использовать это для представлений приложений, у которых есть сложный иерархический макет, списки постов, комментарии, изображения и т. д., это будет работать не очень хорошо по многим причинам:
Сложность кода связана с необходимостью иметь дело с 7 различными JavaScript-событиями мыши и касания.
Если какие-либо дочерние элементы предназначены для приема событий мыши или касания, решение о том, должно ли поведения передаваться в родительский элемент, или он должен действовать первым, может быть сложным, и для этого нам нужно дополнительно использовать pointer-events и touch-events, чтобы разрешить или запрещать в некоторых случаях определенным элементам принимать события мыши или касания.
Определение того, где переход должен остановиться, также может быть сложным, особенно для дочерних элементов разного размера или при изменении размера контейнера, когда размер дочерних элементов может измениться, и в этом случае требуется пересчет JavaScript.
На помощью приходит CSS Scroll Snap Points
Модуль CSS Scroll Snap Points помогает нам указать, где порт прокрутки контейнера должен остановиться после завершения операции прокрутки. Узнать об этом больше вы можете на MDN, совместимость с браузерами вы можете проверить на Can I Use. Он хорошо поддерживается во всех основных браузерах, только в Chrome не реализована поддержка флагов, но хорошая новость заключается в том, что они активно и почти ежедневно работают над этим, посмотрите здесь, как происходит исправление ошибок (Go Chrome!)
Несколько проблем, которые решает CSS Scroll Snap Points
Сокращает сложность кода JavaScript, так как нам не нужно прослушивать события мыши или касания.
Более эффективный способ реагирования на события мыши и касания в дочерних элементах, так как нам больше не требует родитель, нет необходимости проверять, должна ли родительская оболочка отвечать или перенимать поведение.
Возможность легко работать с дочерними элементами разного размера или после изменения ширины дочерних элементов, например, из-за изменения размера контейнера. CSS Snap Points всегда привязываются к дочернему элементу или любой точке, которую мы указываем, используя свойство scroll-snap-coordinate без необходимости вычисления ширины элемента.
Простая демо-версия с использованием только CSS
Если вы используете Edge, Safari или FireFox, вы можете посмотреть мою демо-версию представления с горизонтальным перетягиванием, созданную с использованием CSS Snap Points:
Кроме того, вы можете посмотреть это видео, которое я записал по этой демо-версии:
CSS Snap Points выглядит многообещающе
Кажется, что у Snap Points есть все, что мне нужно, чтобы заменить 100 строк кода карусели, в которых необходимо реализовать 7 разных событий JavaScript и кучу математики и логики, на буквально 4 строками CSS, и результаты, безусловно, будут более естественны и эффективны.
overflow-x: auto; scroll-snap-coordinate: 0 0; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory;
Расширенное использование: CSS Grid с CSS Snap points
CSS Grid + CSS Snap Points = 0 JavaScript, 0 CSS медиа-запросов
CSS Grid привнесла много гибкости и магии в то, как работают макет для браузеров, вот демо-версия, в которой я сделал полностью адаптивное представление (Карусель) с помощью CSS Grid и Snap Points, в котором не используются ни JavaScript, ни медиа-запросы CSS.
Достойный вариант
На мой взгляд, Snap Points, похоже, является вариантом для создания Swipe Views, которые позволяют просматривать веб-приложения на различных экранах и воспринимать их контент более свободно. Они также помогают нам избавиться от десятков строк код JavaScript, если все, что нам нужно, это простая минимальная веб-карусель.
Я планирую еще больше экспериментировать с ними в ближайшем будущем и узнать больше об их «минусах» в реальных приложениях. Я также поэкспериментирую с созданием динамической карусели, а затем, скорее всего, опубликую пост второй части в качестве продолжения.
До тех пор, если вы экспериментировали с модулем CSS Snap Points и имеете, что сказать по этому поводу, напишите об этом в комментариях! Спасибо за внимание.
Автор: Zouhir
Источник: https://medium.com/
Редакция: Команда webformyself.