Novità di Chrome 100

Pete LePage

Tieni presente quanto segue:

Mi chiamo Pete LePage. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 100.

Guida introduttiva di Chrome

Quando i browser hanno raggiunto per la prima volta la versione 10, si sono verificati alcuni problemi in quanto il numero della versione principale è passato da una cifra a due. Speriamo che abbiamo imparato alcune cose per facilitare il passaggio da due cifre a tre.

Logo di Chrome e Firefox

Chrome 100 è attualmente disponibile, mentre Firefox 100 verrà rilasciato a breve. Questi numeri di versione a tre cifre potrebbero causare problemi sui siti che si basano sull'identificazione della versione del browser in qualche modo. Negli ultimi mesi, il team di Firefox e quello di Chrome hanno condotto esperimenti in cui il browser riportava la versione numero 100, anche se non lo era.

Questo ha portato alla segnalazione di alcuni problemi, molti dei quali sono già stati risolti. Ma abbiamo ancora bisogno del tuo aiuto.

  • Se sei un gestore di siti web, provalo con Chrome e Firefox 100.
  • Se sviluppi una libreria di analisi dello user agent, aggiungi test per analizzare versioni superiori e uguali alla 100.

Per maggiori dettagli, dai un'occhiata a Chrome e Firefox presto per raggiungere la versione principale 100 su web.dev.

100 momenti fantastici sul web

Immagine promozionale 100 Cool Web Moments

È stato emozionante osservare la crescita del web e vedere tutte le fantastiche cose che hai creato nelle ultime 100 release di Chrome. Abbiamo pensato che sarebbe stato divertente fare un tuffo nella memoria e festeggiare i #100CoolWebMoments che si sono verificati negli ultimi 14 anni.

Dicci quali momenti ti sono piaciuti di più. Se abbiamo tralasciato qualcosa (e siamo sicuri di averlo fatto, inviaci un tweet a @Chromiumdev con #100CoolWebMoments). Buon divertimento!

Stringa dello user agent ridotta

A proposito dello user agent, Chrome 100 sarà l'ultima versione a supportare una stringa user agent non ridotta per impostazione predefinita. Questo fa parte di una strategia per sostituire l'utilizzo della stringa User-Agent con la nuova API User-Agent Client Hints.

A partire dalla versione 101 di Chrome, lo user agent verrà ridotto gradualmente.

Consulta Prova e date della prova dell'origine della riduzione dello user agent sul [blog di Chromium][crblog] per scoprire di più su cosa verrà rimosso e quando.

API per il posizionamento di finestre multischermo

Per alcune app, aprire nuove finestre e posizionarle in punti specifici o visualizzare display specifici è una funzionalità importante. Ad esempio, quando utilizzo Presentazioni per fare una presentazione, voglio che le slide vengano visualizzate a schermo intero sul display principale e le note del relatore sull'altro display.

L'API Multi-Screen Window Placement consente di enumerare i display connessi alla macchina dell'utente e di posizionare le finestre su schermate specifiche.

Puoi controllare rapidamente se al dispositivo sono collegati più schermi con window.screen.isExtended.

const isExtended = window.screen.isExtended;
// returns true/false

Tuttavia, la funzionalità principale è in window.getScreenDetails(), che fornisce dettagli sui display collegati.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Ad esempio, puoi determinare la schermata principale, quindi usare requestFullscreen() per visualizzare un elemento a schermo intero su quel display.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Inoltre, offre un modo per ascoltare i cambiamenti, ad esempio se viene collegato o rimosso un nuovo display, la risoluzione cambia e così via.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Per un approfondimento più dettagliato, leggi l'articolo aggiornato di Tom Gestire più display con l'API Multi-Screen Window Placement su web.dev.

E tanto altro.

Ovviamente c'è molto altro.

Per i dispositivi HID è disponibile un nuovo metodo forget() che consente di revocare un'autorizzazione per un dispositivo HID concessa da un utente.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Per quanto riguarda WebNFC, il metodo makeReadOnly() consente di rendere i tag NFC definitivamente di sola lettura.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 100.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 101 di Chrome, sarò qui per raccontarti le novità di Chrome.