Needless UI опирается на нативные элементы и новые возможности веб-платформы, такие как Popover API. Библиотека поддерживает перечисленные ниже браузеры начиная с указанных версий. В более старых версиях меню, выпадающие списки и popover не открываются.
Поддерживаемые браузеры
| Браузер | С версии | Нужна для |
|---|---|---|
| Chrome и Edge на компьютерах и Android | 120 | Иконки, нарисованные CSS-масками, и :dir() для текста справа налево |
| Firefox на компьютерах и Android | 125 | Popover API |
| Safari на Mac | 17 | Popover API |
| Все браузеры на iPhone и iPad | iOS 17 | Popover API |
| Браузер Samsung Internet | 25 | То же, что для Chrome |
Другие браузеры на основе Chromium, такие как Opera и Brave, следуют за версиями Chrome. Самому Angular 22 нужны Chrome, Edge и Firefox 119, а также Safari 17. Internet Explorer и старый Edge, выпущенный до перехода на Chromium, не поддерживаются.
Тестируемые браузеры
При каждом изменении тесты всех компонентов запускаются в движках Chrome, Firefox и Safari. Перед релизом каждая страница этой документации проверяется во всех движках — на компьютере и на телефоне с сенсорным вводом: страница должна загрузиться, все её меню и всплывающие окна должны открываться, а сама она — помещаться на экране и проходить проверки доступности.
| Движок | Версия | На чём тестируется |
|---|---|---|
| Chromium (движок Chrome и Edge) | 153 | Компьютер и телефон на Android с сенсорным вводом |
| Firefox | 155 | Компьютер и сенсорный экран размером с телефон |
| WebKit (движок Safari) | 26.6 | Компьютер и iPhone с сенсорным вводом |
| Safari на iPhone | iOS 17.5 и 18.6 | Симулятор iPhone |
Версии между минимальной поддерживаемой и протестированными не проверяются по отдельности: они поддерживаются, потому что в них есть все возможности, которые нужны компонентам.
Что добавляют новые браузеры
Некоторые детали используют возможности, которые есть только в новых браузерах. Остальные браузеры просто обходятся без них, и ничего не ломается:
| Деталь | Браузеры | В остальных |
|---|---|---|
| Popover, меню и диалоги появляются и исчезают с анимацией | Chrome и Edge, Firefox 129, Safari 17.5 | Появляются и исчезают мгновенно |
Углы в форме сквиркла (corner-shape) | Chrome и Edge 139 | Скруглённые углы |
| Выбор цвета в любой точке экрана | Chrome и Edge на компьютерах | Нет кнопки пипетки |
| Выбор целой папки в зоне загрузки | Браузеры на компьютерах | Только файлы |
| Кольцо на кнопке автопрокрутки карусели заполняется плавно | Chrome и Edge, Firefox 128, Safari | Заполняется сразу |
Телефоны и сенсорные экраны
Все компоненты работают с сенсорным вводом. Ручки разделителя, область выбора цвета, края столбцов и toast-уведомления следуют за пальцем, не прокручивая страницу; карусель листается свайпом за счёт собственной прокрутки браузера, а долгое нажатие подхватывает событие в планировщике. На сенсорных экранах размер текста в полях не меньше 16px, поэтому iPhone не увеличивает масштаб при вводе в них, а слова с клавиатур, которые собирают их по ходу набора (так работают клавиатуры Android), приходят целиком.
На сенсорных экранах нет наведения, поэтому hovercard лишь дополняет то, что уже есть на странице: не помещайте в неё ничего важного. На телефоне клавиша Return в чате переносит строку, а сообщение отправляет кнопка.
Клавиатура в Safari
По умолчанию клавиша Tab в Safari переходит только между текстовыми полями и всплывающими меню. Чтобы переходить ко всем кнопкам и ссылкам, включите параметр «При нажатии Tab выделяются все объекты веб-страницы» в настройках Safari на панели «Дополнения» или нажимайте Option-Tab. Кроме того, Safari не переводит фокус на кнопку при клике; компоненты это компенсируют, поэтому после клика работа с клавиатуры продолжается с того же места, как и в других браузерах.