Needless UI được xây dựng trên các phần tử native và những tính năng mới của nền tảng web, như Popover API. Thư viện hỗ trợ các trình duyệt bên dưới kể từ phiên bản được liệt kê. Ở các phiên bản cũ hơn, menu, select và popover sẽ không mở được.
Trình duyệt được hỗ trợ
| Trình duyệt | Từ phiên bản | Cần cho |
|---|---|---|
| Chrome và Edge, trên máy tính và Android | 120 | Biểu tượng vẽ bằng CSS mask, và :dir() cho văn bản viết từ phải sang trái |
| Firefox, trên máy tính và Android | 125 | Popover API |
| Safari trên Mac | 17 | Popover API |
| Mọi trình duyệt trên iPhone và iPad | iOS 17 | Popover API |
| Trình duyệt Samsung Internet | 25 | Giống như Chrome |
Các trình duyệt khác dựa trên Chromium, như Opera và Brave, đi theo phiên bản của Chrome. Bản thân Angular 22 cần Chrome, Edge và Firefox 119 cùng Safari 17. Internet Explorer và Edge cũ, từ trước khi chuyển sang Chromium, không được hỗ trợ.
Trình duyệt được kiểm thử
Với mỗi thay đổi, bộ kiểm thử của từng component đều được chạy trên engine của Chrome, Firefox và Safari. Trước mỗi bản phát hành, từng trang của tài liệu này được kiểm tra trên mọi engine, trên máy tính và trên điện thoại dùng cảm ứng: trang phải tải được, mở được mọi menu và popup, vừa khít màn hình và vượt qua các bước kiểm tra khả năng tiếp cận.
| Engine | Phiên bản | Kiểm thử trên |
|---|---|---|
| Chromium (engine của Chrome và Edge) | 153 | Máy tính, và điện thoại Android dùng cảm ứng |
| Firefox | 155 | Máy tính, và màn hình cảm ứng cỡ điện thoại |
| WebKit (engine của Safari) | 26.6 | Máy tính, và iPhone dùng cảm ứng |
| Safari trên iPhone | iOS 17.5 và 18.6 | Trình mô phỏng iPhone |
Các phiên bản nằm giữa phiên bản cũ nhất được hỗ trợ và các phiên bản được kiểm thử không được kiểm thử riêng từng bản: chúng vẫn được hỗ trợ vì có đủ mọi tính năng mà các component cần.
Điểm cộng trên trình duyệt mới
Một vài chi tiết dùng những tính năng chỉ có ở trình duyệt mới hơn. Các trình duyệt khác bỏ qua chúng, và không có gì bị hỏng:
| Chi tiết | Trình duyệt | Ở trình duyệt khác |
|---|---|---|
| Popover, menu và hộp thoại có hiệu ứng khi xuất hiện và biến mất | Chrome và Edge, Firefox 129, Safari 17.5 | Xuất hiện và biến mất ngay lập tức |
Góc bo kiểu squircle (corner-shape) | Chrome và Edge 139 | Góc bo tròn |
| Lấy màu từ bất kỳ đâu trên màn hình | Chrome và Edge trên máy tính | Không có nút hút màu |
| Chọn cả một thư mục trong vùng thả tệp | Trình duyệt trên máy tính | Chỉ chọn được tệp |
| Vòng tròn trên nút tự động chuyển của carousel đầy dần một cách mượt mà | Chrome và Edge, Firefox 128, Safari | Đầy ngay lập tức |
Điện thoại và màn hình cảm ứng
Mọi component đều dùng được bằng cảm ứng. Tay nắm của bộ chia ngăn, vùng màu, cạnh cột và toast di chuyển theo ngón tay mà không làm cuộn trang, carousel được vuốt nhờ chính cơ chế cuộn của trình duyệt, và nhấn giữ sẽ nhấc một sự kiện trong bộ lập lịch lên để kéo. Trên màn hình cảm ứng, chữ trong các ô nhập có cỡ ít nhất 16px, nên iPhone không tự phóng to khi bạn nhập, và những từ đến từ bàn phím ghép chữ trong lúc gõ, như bàn phím Android, được nhận trọn vẹn.
Màn hình cảm ứng không có thao tác hover, nên hovercard chỉ bổ sung cho những gì đã có trên trang: đừng đặt thứ gì thiết yếu vào đó. Trên điện thoại, phím Return của chat sẽ xuống dòng, còn nút gửi mới gửi tin nhắn.
Bàn phím trong Safari
Theo mặc định, phím Tab trong Safari chỉ di chuyển giữa các ô nhập văn bản và menu bật lên. Để đến được mọi nút và liên kết, hãy bật “Nhấn Tab để tô sáng từng mục trên trang web” trong cài đặt Nâng cao của Safari, hoặc nhấn Option-Tab. Safari cũng không focus vào nút khi nút được bấm; các component bù lại điều đó, nên thao tác bàn phím vẫn tiếp tục sau cú nhấp như ở các trình duyệt khác.