Needless UI se basa en elementos nativos y en funciones recientes de la plataforma web, como la API Popover. Es compatible con los siguientes navegadores a partir de la versión indicada. En versiones anteriores, los menús, los selects y los popovers no se abren.
Navegadores compatibles
| Navegador | Desde la versión | Necesaria para |
|---|---|---|
| Chrome y Edge, en escritorio y en Android | 120 | Iconos dibujados con máscaras CSS y :dir() para el texto de derecha a izquierda |
| Firefox, en escritorio y en Android | 125 | La API Popover |
| Safari en Mac | 17 | La API Popover |
| Todos los navegadores en iPhone y iPad | iOS 17 | La API Popover |
| Samsung Internet en Android | 25 | Lo mismo que Chrome |
Otros navegadores basados en Chromium, como Opera y Brave, siguen las versiones de Chrome. El propio Angular 22 necesita Chrome, Edge y Firefox 119, además de Safari 17. Internet Explorer y el antiguo Edge, anterior a Chromium, no son compatibles.
Navegadores probados
Con cada cambio, las pruebas de cada componente se ejecutan en los motores de Chrome, Firefox y Safari. Antes de publicar una versión, cada página de esta documentación se comprueba en todos los motores, en escritorio y en un móvil con entrada táctil: tiene que cargar, abrir cada menú y cada elemento emergente, caber en la pantalla y superar las comprobaciones de accesibilidad.
| Motor | Versión | Probado en |
|---|---|---|
| Chromium (en Chrome y Edge) | 153 | Escritorio y un móvil Android con entrada táctil |
| Firefox | 155 | Escritorio y una pantalla táctil del tamaño de un móvil |
| WebKit (en Safari) | 26.6 | Escritorio y un iPhone con entrada táctil |
| Safari en iPhone | iOS 17.5 y 18.6 | El simulador de iPhone |
Las versiones intermedias, entre la más antigua compatible y las probadas, no se comprueban una por una: son compatibles porque tienen todas las funciones que necesitan los componentes.
Extras en navegadores recientes
Algunos detalles usan funciones que solo tienen los navegadores más recientes. Los demás navegadores los omiten sin que nada se rompa:
| Detalle | Navegadores | En los demás |
|---|---|---|
| Los popovers, los menús y los diálogos se animan al abrirse y al cerrarse | Chrome y Edge, Firefox 129, Safari 17.5 | Aparecen y desaparecen al instante |
Esquinas squircle (corner-shape) | Chrome y Edge 139 | Esquinas redondeadas |
| Tomar un color de cualquier punto de la pantalla | Chrome y Edge de escritorio | Sin botón de cuentagotas |
| Elegir una carpeta entera en la zona de arrastre | Navegadores de escritorio | Solo archivos |
| El anillo del control de rotación del carrusel se llena con suavidad | Chrome y Edge, Firefox 128, Safari | Se llena de golpe |
Móviles y pantallas táctiles
Todos los componentes funcionan con entrada táctil. Los divisores del splitter, el área de color, los bordes de las columnas y los toasts siguen al dedo sin desplazar la página, el carrusel se desliza con el desplazamiento nativo del navegador y, en el planificador, una pulsación larga levanta un evento. En las pantallas táctiles, el texto de los campos mide al menos 16 px, para que los iPhone no hagan zoom sobre ellos, y las palabras que algunos teclados van componiendo, como los de Android, llegan enteras.
Las pantallas táctiles no permiten pasar el puntero por encima, así que una hovercard solo complementa lo que ya hay en la página: no pongas en ella nada esencial. En el móvil, la tecla Intro del chat añade un salto de línea y el botón envía.
El teclado en Safari
Por defecto, en Safari la tecla Tab solo pasa por campos de texto y menús desplegables. Para llegar a todos los botones y enlaces, activa «Pulsar Tab para resaltar cada elemento de una página web» («Press Tab to highlight each item on a webpage») en la sección Avanzado de los ajustes de Safari, o pulsa Opción + Tab. Además, Safari no pone el foco en un botón al hacer clic en él; los componentes lo compensan, así que después de un clic el teclado sigue desde ahí, como en otros navegadores.