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.