Needless UI 以原生元素和較新的 Web 平台功能(例如 Popover API)為基礎。它從下表所列的版本起支援以下瀏覽器。在更舊的版本中,選單、Select 和 Popover 將無法開啟。

支援的瀏覽器

支援的最低版本
瀏覽器最低版本所需功能
電腦和 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 模擬器

介於最低支援版本和測試版本之間的版本不會逐一測試:它們具備元件所需的所有功能,因此同樣受到支援。

新版瀏覽器的額外功能

少數細節用到只有新版瀏覽器才有的功能。其他瀏覽器會省略這些細節,但不會因此出錯:

需要新版瀏覽器的細節
細節瀏覽器其他瀏覽器中
Popover、選單和對話框的進場與退場動畫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 不會讓被點擊的按鈕取得焦點;元件會彌補這一點,因此點擊之後,也能像在其他瀏覽器中一樣繼續使用鍵盤操作。