Технологии отображения

Сегодня разберёмся, как скрыть элемент, но оставить сторонним приложениям доступ к его контенту. Также посмотрим, как Google Chrome внедряет поддержку автопереходов для SPA. На сладкое поразмышляем, почему веб по-прежнему оперирует двумя измерениями. Приятного чтения!

Нативный .visually-hidden

Есть минимум три способа удалить элементы из поля зрения:

• display: none
• visibility: hidden
• атрибут hidden

Эти способы работают хорошо, но имеют побочный эффект. Браузер считает, что визуальное скрытие автоматически приводит и к полному запрету доступа к скрытому контенту. Если при этом клиент использует приложение для чтения с экрана, то это нарушит его работу. Веб-разработчику остаётся один вариант — надо скрыть элемент, чтобы браузер не исключал элемент из доступности.

Решением может стать служебный класс вида .visually-hidden. Его содержимое заставляет занимать элемент нулевое место:

.visually-hidden:not(:focus):not(:active) {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

Браузер на такой «финт ушами» не реагирует и не пытается ограничить доступ к контенту. Звучит отлично, но это всё же вынужденная мера. Любое существенное обновление браузеров способно разрушить работу этого приёма. Было бы здорово, если бы имелся нативный способ визуально скрывать элементы, но не убирать доступ к контенту для сторонних приложений.

Давайте представим, как должен выглядеть такой способ. В идеальном мире это называлось бы display: visually-hidden с поведением display: none, но без потери доступа к контенту. Ещё одним грамотным способом было бы новое свойство CSS, условно element-visibility: visually-hidden. Это дало бы возможность использовать его со всеми запросами, псевдоклассами и тому подобным. Проблема лишь в том, что совместное использование могло бы приводить к конфликтам, вот пара гипотетических примеров:

element-visibility: visually-hidden;
display: none;

element-visibility: visually-hidden;
display: block;

Понятное дело, что в спецификации всегда можно задать приоритет, но это не будет интуитивным для разработчика. Так что вариант с display: visually-hidden выглядит интереснее. Это не новая идея, её уже предлагали почти 7 лет назад, «а воз и ныне там». Может пора это изменить?

Ещё один отличный переход

Разработчики Chrome объявили, что начиная с версии 111 появились переходы между представлениями SPA. Эту функцию очень ждали, теперь она доступна всем пользователям версии 111 stable или 112 beta. В Chrome Canary функция пока сломана, но это нормально для канареечного релиза. В отличие от ранних прототипов, переходы получились красивыми и достаточно гибкими:

 

Чтобы корректно создавать переходы, веб-разработчикам необходимо задействовать отдельный View Transition API (демо-сайт), доступный пока не во всех браузерах. Его основное назначение: за один шаг обновлять DOM, генерируя автоматический переход между двумя состояниями.

Пока нет уверенности, что другие браузеры примут View Transitions API в качестве стандарта, но первые упоминания уже появились. В документации Mozilla функция уже размещена в документации раздела экспериментальных технологий. Edge версии 111, основанный на той же технологии, что и Chrome, включил функцию в статусе Preview. Не отстают и разработчики Opera.

Появление View Transition API — важный шаг на пути совершенствования SPA и улучшения опыта разработки. Проект планируют развивать сразу в нескольких направлениях:

• оптимизация производительности;
• позволять нескольким компонентам запускать переходы независимо;
• улучшить перемещение из контейнера в контейнер с поддержкой клиппинга родительским элементом;
• преодоление ограничений нейминга, путём создания соответствующих классов;
• возможность игнорирования элементов за пределами области просмотра;
• дать доступ JS к псевдоэлементам и API для индикации завершения анимации.

Планы очень крутые и амбициозные. Помочь разработчикам можно, оставив отзывы или демонстрации созданных переходов. Вас готовы выслушать в Twitter или Mastodon.

3D в двухмерном интернете

Одним из первопроходцев создания общедоступного 3D виртуального мира стала компания Linden Lab, представившая в 2003 году Second Life. Это была попытка сделать настоящий трёхмерный интернет. Аналогами браузеров стали вьюверы, общающиеся с серверами Linden Lab через API. Виртуальная валюта могла быть конвертирована в реальную, что позволяло создавать настоящие бизнес-схемы. Реальные корпорации, университеты и даже NASA открывали представительства в Second Life, воспринимая это, как неизбежное будущее.

Но Second Life так и не смогла стать по-настоящему массовой. За год до пандемии коронавируса эта сеть представляла собой унылое зрелище. Огромные покинутые пространства, заброшенные клубы и малое количество пользователей в отдельно взятых локациях. Карантины из-за COVID-19 действительно резко увеличили онлайн, но со снятием ограничений пользователи вновь стали уходить. Так нужен ли вообще трёхмерный интернет? На этот вопрос нет однозначного ответа. А вот внедрять элементы 3D в обычные веб-страницы часто бывает полезным.

Самым популярным инструментом для этого можно назвать библиотеку three.js. Она заставляет браузер на полную катушку использовать возможности WebGL. Даже простые примеры выглядят интересно. Библиотека предоставляет загрузчики для всех популярных форматов 3D-моделей. Предпочтение рекомендуют отдать формату glTF, как наиболее компактному и быстрому для загрузки.

Разобраться с нюансами будет непросто, но спасает грамотная документация. Там подробно описано, как работать со всеми элементами трёхмерной графики. three.js совместим с множеством сторонних библиотек и плагинов для реализации физики, систем частиц и 3D-текста. На Хабре была отличная вводная статья, объясняющая, как начать работать с three.js и создать свою первую трёхмерную сцену. Это увлекательный процесс, рекомендуем попробовать.

Митапы