Swipe Views с помощью CSS Snap Points: Создание более эффективной мобильной веб-навигации

Swipe Views с помощью CSS Snap Points: Создание более эффективной мобильной веб-навигации

От автора: мобильная навигация должна быть эффективной. За последние год-два мобильный Интернет добился больших успехов, и я с радостью заменил на своем телефоне несколько собственных приложений с их веб-альтернативами, и сегодня я являюсь полноправным пользователем Twitter Lite и Instagram PWA.

В течение долгого времени адаптивная мобильная Сеть характеризовалась вертикальной иерархией, однако нативные приложения немного меняли вертикальную иерархию, с их основными представлениями и реализацией очень популярного шаблон, иногда называемого “horizontal paging”, который предоставляет пользователям эффективную горизонтальную навигацию с одной вкладки на другую, используя простые движения вправо / влево, и делает релевантные данные или контент более доступными на разных экранах.

Не к удивительно, что Twitter и Instagram PWA — которые, как уже упоминалось, я использую каждый день, и которые являются двумя из моих самых любимых веб-приложений — ввели в свои приложения такие навигационные панели. Однако — и это меня тоже не удивляет — они не поддерживают движений горизонтального протягивания пальцем, и их отсутствие это не ограничения приложений, а, к сожалению, на мой взгляд, ограничение веб-платформы.

Instagram PWA слева, Twitter PWA справа — Навигация с вкладками Twitter чрезвычайно сложна с помощью одной руки, так как навигационная панель находится дальше на больших экранах.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Проблемы с традиционной «Каруселью»

Проблемы с традиционными, кросс-браузерными каруселями начинаются с требований к реализации:

Контейнер со скрытым контентом, выходящим за границы

Широкий контейнер в пикселях.

Минимум 7 различных прослушивателей событий: mousedown, mouseup, mouseleave, mousemove, touchstart, touchhend, touchmove.

При перемещении мыши или касания мы переходим к более широкому контейнеру.

CSS will-change:transform и любая другая магия, которую мы можем добавить, чтобы сделать этот переход максимально плавным.

Следуя этим требованиям, мы можем предоставить приличную карусель с 50 багами или, возможно, что-то, что хорошо подходит для hero-баннера, но если мы хотим использовать это для представлений приложений, у которых есть сложный иерархический макет, списки постов, комментарии, изображения и т. д., это будет работать не очень хорошо по многим причинам:

Сложность кода связана с необходимостью иметь дело с 7 различными JavaScript-событиями мыши и касания.

Если какие-либо дочерние элементы предназначены для приема событий мыши или касания, решение о том, должно ли поведения передаваться в родительский элемент, или он должен действовать первым, может быть сложным, и для этого нам нужно дополнительно использовать pointer-events и touch-events, чтобы разрешить или запрещать в некоторых случаях определенным элементам принимать события мыши или касания.

Определение того, где переход должен остановиться, также может быть сложным, особенно для дочерних элементов разного размера или при изменении размера контейнера, когда размер дочерних элементов может измениться, и в этом случае требуется пересчет JavaScript.

via GIPHY

На помощью приходит CSS Scroll Snap Points

Модуль CSS Scroll Snap Points помогает нам указать, где порт прокрутки контейнера должен остановиться после завершения операции прокрутки. Узнать об этом больше вы можете на MDN, совместимость с браузерами вы можете проверить на Can I Use. Он хорошо поддерживается во всех основных браузерах, только в Chrome не реализована поддержка флагов, но хорошая новость заключается в том, что они активно и почти ежедневно работают над этим, посмотрите здесь, как происходит исправление ошибок (Go Chrome!)

Несколько проблем, которые решает CSS Scroll Snap Points

Сокращает сложность кода JavaScript, так как нам не нужно прослушивать события мыши или касания.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Более эффективный способ реагирования на события мыши и касания в дочерних элементах, так как нам больше не требует родитель, нет необходимости проверять, должна ли родительская оболочка отвечать или перенимать поведение.

Возможность легко работать с дочерними элементами разного размера или после изменения ширины дочерних элементов, например, из-за изменения размера контейнера. CSS Snap Points всегда привязываются к дочернему элементу или любой точке, которую мы указываем, используя свойство scroll-snap-coordinate без необходимости вычисления ширины элемента.

Простая демо-версия с использованием только CSS

Если вы используете Edge, Safari или FireFox, вы можете посмотреть мою демо-версию представления с горизонтальным перетягиванием, созданную с использованием CSS Snap Points:

Кроме того, вы можете посмотреть это видео, которое я записал по этой демо-версии:

CSS Snap Points выглядит многообещающе

Кажется, что у Snap Points есть все, что мне нужно, чтобы заменить 100 строк кода карусели, в которых необходимо реализовать 7 разных событий JavaScript и кучу математики и логики, на буквально 4 строками CSS, и результаты, безусловно, будут более естественны и эффективны.

Расширенное использование: 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

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

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree