Needless UI 基于原生元素和较新的 Web 平台特性(例如 Popover API)构建。它从下表所列的版本起支持以下浏览器。在更旧的版本中,菜单、选择器和弹出框无法打开。

支持的浏览器

支持的最低版本
浏览器最低版本所需特性
电脑和 Android 上的 Chrome 与 Edge120用 CSS 遮罩绘制的图标,以及用于从右到左文本的 :dir()
电脑和 Android 上的 Firefox125Popover API
Mac 上的 Safari17Popover API
iPhone 和 iPad 上的所有浏览器iOS 17Popover API
Samsung Internet(三星浏览器)25与 Chrome 相同

其他基于 Chromium 的浏览器(例如 Opera 和 Brave)跟随 Chrome 的版本。Angular 22 本身就要求 Chrome、Edge 和 Firefox 不低于 119,Safari 不低于 17。不支持 Internet Explorer,以及改用 Chromium 之前的旧版 Edge。

经过测试的浏览器

每次改动都会在 Chrome、Firefox 和 Safari 的引擎中运行每个组件的测试。每次发布前,本文档的每个页面都会在每种引擎中,分别在电脑和支持触摸的手机上接受检查:页面必须能正常启动、打开每个菜单和弹出层、适配屏幕,并通过无障碍检查。

测试所用的浏览器
引擎版本测试环境
Chromium(Chrome、Edge)153电脑,以及支持触摸的 Android 手机
Firefox155电脑,以及手机尺寸的触摸屏
WebKit(Safari)26.6电脑,以及支持触摸的 iPhone
iPhone 上的 SafariiOS 17.5 和 18.6iPhone 模拟器

介于最低支持版本与测试版本之间的版本不会逐一测试:它们具备组件所需的全部特性,因此同样受支持。

新版浏览器中的额外功能

少数细节用到了只有新版浏览器才有的特性。其他浏览器会省略这些细节,但不会出现任何问题:

需要新版浏览器的细节
细节浏览器其他浏览器中
弹出框、菜单和对话框的入场与退场动画Chrome 与 Edge、Firefox 129、Safari 17.5立即出现和消失
超椭圆圆角(corner-shape)Chrome 与 Edge 139普通圆角
从屏幕上任意位置取色电脑上的 Chrome 与 Edge没有吸管按钮
在文件拖放区中选择整个文件夹电脑上的浏览器只能选择文件
轮播的自动轮播按钮上,圆环平滑地填满Chrome 与 Edge、Firefox 128、Safari一次性填满

手机和触摸屏

每个组件都支持触摸操作。分隔面板的分隔条、颜色选择器的取色区域、数据表格的列边界和 Toast 都会跟随手指移动,而不会滚动页面;轮播借助浏览器自身的滚动来滑动;长按日程表中的日程即可拖动它。在触摸屏上,输入框的文字至少为 16px,因此 iPhone 不会放大输入框;像 Android 键盘那样先组字再上屏的键盘,输入的词语也会完整送达。

触摸屏无法悬停,所以悬停卡片只能补充页面上已有的内容:不要把任何必不可少的内容放在其中。在手机上,聊天组件的 Return 键会换行,发送则由按钮完成。

Safari 中的键盘操作

默认情况下,Safari 中的 Tab 键只会在文本框和弹出式菜单之间移动。要移到每个按钮和链接,请在 Safari 的“高级”设置中打开“按下 Tab 键以高亮标记网页上的每一项”,或按 Option + Tab 键。此外,Safari 不会让被点击的按钮获得焦点;组件弥补了这一点,因此点击之后也能像在其他浏览器中一样继续用键盘操作。