Needless UI 以原生元素和較新的 Web 平台功能(例如 Popover API)為基礎。它從下表所列的版本起支援以下瀏覽器。在更舊的版本中,選單、Select 和 Popover 將無法開啟。
支援的瀏覽器
| 瀏覽器 | 最低版本 | 所需功能 |
|---|---|---|
| 電腦和 Android 上的 Chrome 與 Edge | 120 | 以 CSS 遮罩繪製的圖示,以及用於由右至左文字的 :dir() |
| 電腦和 Android 上的 Firefox | 125 | Popover API |
| Mac 上的 Safari | 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,以及改用 Chromium 之前的舊版 Edge。
經過測試的瀏覽器
每次變更都會在 Chrome、Firefox 和 Safari 的引擎中執行每個元件的測試。每次發布前,本文件的每一頁都會在每種引擎中,分別於電腦和支援觸控的手機上接受檢查:頁面必須能正常啟動、開啟每個選單和彈出視窗、符合螢幕大小,並通過無障礙檢查。
| 引擎 | 版本 | 測試環境 |
|---|---|---|
| Chromium(Chrome、Edge) | 153 | 電腦,以及支援觸控的 Android 手機 |
| Firefox | 155 | 電腦,以及手機大小的觸控螢幕 |
| WebKit(Safari) | 26.6 | 電腦,以及支援觸控的 iPhone |
| iPhone 上的 Safari | 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 鍵盤那樣先組字再送出的鍵盤,輸入的字詞也會完整送達。
觸控螢幕無法懸停,所以懸停卡片只能補充頁面上已有的內容:請勿在其中放置任何必要的內容。在手機上,聊天元件的 Return 鍵會換行,送出則由按鈕完成。
Safari 中的鍵盤操作
預設情況下,Safari 的 Tab 鍵只會在文字欄位和彈出式選單之間移動。若要移到每個按鈕和連結,請在 Safari 的「進階」設定中開啟「按下 Tab 鍵來特別標明網頁上的每個項目」,或按 Option + Tab 鍵。此外,Safari 不會讓被點擊的按鈕取得焦點;元件會彌補這一點,因此點擊之後,也能像在其他瀏覽器中一樣繼續使用鍵盤操作。