Novità di Chrome 100

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 100.

Chrome 100

Quando i browser hanno raggiunto per la prima volta la versione 10, si sono verificati alcuni problemi perché il numero di versione principale è passato da una cifra a due. Spero che abbiamo imparato alcune cose che semplificano il passaggio da due cifre a tre.

Logo di Chrome e Firefox

Chrome 100 è già disponibile e Firefox 100 sarà disponibile a breve. Questi numeri di versione di tre cifre possono causare problemi sui siti che si basano sull'identificazione della versione del browser in qualche modo. Negli ultimi mesi, il team di Firefox e il team di Chrome hanno eseguito esperimenti in cui il browser segnalava il numero di versione 100, anche se non era così.

Di conseguenza sono stati segnalati alcuni problemi, molti dei quali sono già stati risolti. Tuttavia, abbiamo ancora bisogno del tuo aiuto.

  • Se sei un gestore di siti web, testa il tuo sito con Chrome e Firefox 100.
  • Se sviluppi una libreria di analisi dello user agent, aggiungi test per analizzare le versioni superiori o uguali a 100.

Per maggiori dettagli, visita la pagina relativa a Chrome e Firefox che presto raggiungeranno la versione principale 100 su web.dev.

100 Cool Web Moments

Immagine promozionale di 100 momenti web cool

È stato emozionante vedere crescere il web e tutte le cose fantastiche che avete creato nelle ultime 100 release di Chrome. Abbiamo pensato che sarebbe stato divertente fare un breve ripasso e celebrare i #100CoolWebMoments che si sono verificati negli ultimi 14 anni.

Raccontaci quali momenti hai amato di più. Se abbiamo perso qualcosa (e ne siamo sicuri), scrivici un tweet a @Chromiumdev con #100CoolWebMoments. Buon divertimento!

Stringa dello user agent ridotta

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

A partire da Chrome 101, lo user agent verrà ridotto gradualmente.

Consulta la pagina Data e prova Origin per la riduzione dell'intestazione User-Agent sul [blog di Chromium][crblog], per scoprire di più su cosa verrà rimosso e quando.

API Posizionamento finestra multischermo

Per alcune app, l'apertura di nuove finestre e il loro posizionamento in punti specifici o su display specifici è una funzionalità importante. Ad esempio, quando utilizzo Presentazioni per la presentazione, voglio che le slide siano visualizzate a schermo intero sul display principale e le note del relatore siano visualizzate sull'altro display.

L'API Multi-Screen Window Placement consente di enumerare i display collegati al computer dell'utente e di posizionare le finestre su schermate specifiche.

Puoi controllare rapidamente se è presente più di uno schermo connesso al dispositivo 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 utilizzare 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, fornisce un modo per rilevare le modifiche, 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 approfondire, consulta l'articolo aggiornato di Tom Gestire più display con l'API Multi-Screen Window Placement su web.dev.

E tanto altro.

Ovviamente ce ne sono molti altri.

Esiste un nuovo metodo forget() per i dispositivi HID che consente di revocare un'autorizzazione a 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 WebNFC, il metodo makeReadOnly() consente di rendere i tag NFC di sola lettura permanente.

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

Per approfondire

Descrive solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 100.

Iscriviti

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

Sono Pete LePage e, non appena verrà rilasciato Chrome 101, sarò qui per dirti le novità di Chrome.