Needless UI si basa su elementi nativi e su funzionalità recenti della piattaforma web, come l’API Popover. Supporta i browser qui sotto a partire dalla versione indicata. Nelle versioni precedenti, menu, select e popover non si aprono.
Browser supportati
| Browser | Dalla versione | Necessaria per |
|---|---|---|
| Chrome ed Edge, su computer e Android | 120 | Icone disegnate con le maschere CSS e :dir() per il testo da destra a sinistra |
| Firefox, su computer e Android | 125 | L’API Popover |
| Safari su Mac | 17 | L’API Popover |
| Tutti i browser su iPhone e iPad | iOS 17 | L’API Popover |
| Samsung Internet su Android | 25 | Come per Chrome |
Gli altri browser basati su Chromium, come Opera e Brave, seguono le versioni di Chrome. Angular 22 di per sé richiede Chrome, Edge e Firefox 119, oltre a Safari 17. Internet Explorer e il vecchio Edge, precedente a Chromium, non sono supportati.
Browser testati
A ogni modifica, i test di tutti i componenti girano nei motori di Chrome, Firefox e Safari. Prima di una release, ciascuna pagina di questa documentazione viene verificata in tutti i motori, su un computer e su un telefono con input touch: deve caricarsi, aprire ogni menu e popup, stare nello schermo e superare i controlli di accessibilità.
| Motore | Versione | Testato su |
|---|---|---|
| Chromium (in Chrome ed Edge) | 153 | Un computer e un telefono Android con input touch |
| Firefox | 155 | Un computer e uno schermo touch grande come un telefono |
| WebKit (in Safari) | 26.6 | Un computer e un iPhone con input touch |
| Safari su iPhone | iOS 17.5 e 18.6 | Il simulatore di iPhone |
Le versioni intermedie, tra la più vecchia supportata e quelle testate, non vengono verificate una per una: sono supportate perché hanno tutte le funzionalità che servono ai componenti.
Extra nei browser più recenti
Alcuni dettagli usano funzionalità che hanno solo i browser più recenti. Gli altri browser li tralasciano, senza che si rompa nulla:
| Dettaglio | Browser | Altrove |
|---|---|---|
| Popover, menu e dialog si animano in entrata e in uscita | Chrome ed Edge, Firefox 129, Safari 17.5 | Compaiono e scompaiono all’istante |
Angoli squircle (corner-shape) | Chrome ed Edge 139 | Angoli arrotondati |
| Prelevare un colore da qualsiasi punto dello schermo | Chrome ed Edge su computer | Nessun pulsante contagocce |
| Scegliere un’intera cartella nella dropzone | Browser su computer | Solo file |
| L’anello sul controllo della rotazione del carosello si riempie in modo fluido | Chrome ed Edge, Firefox 128, Safari | Si riempie di colpo |
Telefoni e schermi touch
Ogni componente funziona al tocco. Le maniglie dello splitter, l’area del colore, i bordi delle colonne e i toast seguono il dito senza far scorrere la pagina, lo swipe del carosello usa lo scorrimento nativo del browser, e una pressione prolungata afferra un evento del pianificatore. Sugli schermi touch il testo dei campi è di almeno 16px, così gli iPhone non fanno zoom su di essi, e le parole che alcune tastiere compongono, come quelle Android, arrivano intere.
Gli schermi touch non conoscono l’hover, quindi una hovercard si limita ad arricchire ciò che c’è già nella pagina: non metterci niente di essenziale. Su un telefono, il tasto Invio della chat va a capo, e il pulsante invia.
La tastiera in Safari
Di default, in Safari il tasto Tab si sposta solo tra campi di testo e menu a comparsa. Per raggiungere ogni pulsante e link, attiva «Premi Tab per evidenziare ogni elemento di una pagina web» («Press Tab to highlight each item on a webpage») nelle impostazioni Avanzate di Safari, oppure premi Opzione + Tab. Inoltre Safari non dà il focus a un pulsante quando lo si clicca; i componenti rimediano, così dopo un clic la tastiera riprende da lì come negli altri browser.