Needless UI builds on native elements and recent web platform features, such as the Popover API. It supports the browsers below from the version listed on. In older ones, menus, selects and popovers don’t open.
Supported browsers
| Browser | From version | Needed for |
|---|---|---|
| Chrome and Edge, on computers and Android | 120 | Icons drawn with CSS masks, and :dir() for right-to-left text |
| Firefox, on computers and Android | 125 | The Popover API |
| Safari on Mac | 17 | The Popover API |
| Every browser on iPhone and iPad | iOS 17 | The Popover API |
| Samsung Internet | 25 | The same as Chrome |
Other browsers built on Chromium, such as Opera and Brave, follow Chrome’s versions. Angular 22 itself needs Chrome, Edge and Firefox 119 and Safari 17. Internet Explorer and the old Edge, from before Chromium, aren’t supported.
Tested browsers
Every change runs each component’s tests in the engines of Chrome, Firefox and Safari. Before a release, each page of these docs is checked in every engine, on a computer and on a phone with touch: it has to start, open each menu and popup, fit the screen and pass the accessibility checks.
| Engine | Version | Tested on |
|---|---|---|
| Chromium (Chrome, Edge) | 153 | A computer, and an Android phone with touch |
| Firefox | 155 | A computer, and a phone-sized touch screen |
| WebKit (Safari) | 26.6 | A computer, and an iPhone with touch |
| Safari on iPhone | iOS 17.5 and 18.6 | The iPhone simulator |
Versions between the oldest supported and the ones tested aren’t tested one by one: they’re supported because they have every feature the components need.
Extras in newer browsers
A few details use features only newer browsers have. Other browsers leave them out, and nothing breaks:
| Detail | Browsers | Elsewhere |
|---|---|---|
| Popovers, menus and dialogs animate in and out | Chrome and Edge, Firefox 129, Safari 17.5 | They appear and disappear at once |
Squircle corners (corner-shape) | Chrome and Edge 139 | Round corners |
| Picking a color from anywhere on the screen | Chrome and Edge on computers | No eyedropper button |
| Choosing a whole folder in the dropzone | Browsers on computers | Files only |
| The ring of the carousel’s rotation control fills smoothly | Chrome and Edge, Firefox 128, Safari | It fills at once |
Phones and touch screens
Every component works with touch. Splitter handles, the color area, column edges and toasts follow a finger without scrolling the page, the carousel swipes with the browser’s own scrolling, and a long press picks a scheduler event up. On touch screens, fields have at least 16px of text, so iPhones don’t zoom in on them, and words from keyboards that compose them, as Android keyboards do, arrive whole.
Touch screens can’t hover, so a hovercard only adds to what’s on the page: don’t put anything essential in one. On a phone, the chat’s Return key makes a new line, and its button sends.
The keyboard in Safari
By default, the Tab key in Safari moves only between text fields and pop-up menus. To reach every button and link, turn on “Press Tab to highlight each item on a webpage” in Safari’s Advanced settings, or press Option-Tab. Safari also doesn’t focus a button when it’s clicked; the components make up for that, so the keyboard carries on after a click as in other browsers.