Google ha annunciato che, a partire dalla versione 135, Chrome per Android supporterà la visualizzazione edge-to-edge per offrire un’esperienza di navigazione più immersiva ai propri utenti. Questa funzionalità consente infatti al contenuto di un sito web di estendersi fino ai bordi dello schermo di un dispositivo, integrandosi con la barra per la navigazione gestuale.
Come funzionerà la visualizzazione edge-to-edge su Chrome
La barra di navigazione gestuale di Android appare oggi su uno sfondo monocolore separato dal contenuto web. Con questo nuovo aggiornamento Chrome estenderà il contenuto fino al bordo inferiore del display del device, facendo in modo che la “pillola” per la navigazione gestuale si sovrapponga al contenuto durante lo scorrimento. Quando l’utente non scorre e la barra degli indirizzi è visibile, quella di navigazione mantiene lo sfondo tradizionale.
Chrome introdurrà ora una nuova “barra inferiore dinamica” denominata “mento” (“chin“), che si sovrapporrà all’area della barra di navigazione gestuale. Sia quella degli URL che il chin si ritireranno dinamicamente durante lo scorrimento della pagina, espandendo il viewport e permettendo al contenuto web di estendersi fino al bordo inferiore. Tale cambiamento non influirà sulla barra di stato superiore che contiene le icone di notifica e di sistema.
Le implicazioni nello sviluppo di pagine web
Il supporto edge-to-edge per Chrome su dispositivi con schermo di dimensioni ridotte sarà introdotto con la versione 135 la cui distribuzione stabile è prevista per il 1° aprile 2025. I test sono però già in corso con versioni precedenti a quest’ultima. Il supporto per device con schermo più esteso sarà implementato in una futura release di Chrome.
Con l’adozione della visualizzazione edge-to-edge, gli sviluppatori web devono assicurarsi che il contenuto dei loro siti sia compatibile con questa nuova modalità. Gli elementi posizionati più in basso potrebbero essere coperti infatti dalla barra di navigazione gestuale. Per evitare sovrapposizioni è consigliabile utilizzare le variabili CSS safe-area-inset-* in modo da adattare il layout delle pagine alle aree sicure dello schermo.
Per restare sempre aggiornato seguici su Google News!
