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 poiché il numero della versione principale è passato da una a due cifre. Ci auguriamo di averti insegnato qualcosa che ti semplificherà la transizione 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ì.

Ciò ha portato a alcuni problemi segnalati, 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 ulteriori dettagli, consulta Chrome e Firefox raggiungeranno presto la versione principale 100 su web.dev.

100 Cool Web Moments

Immagine promozionale di 100 momenti web interessanti

È 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 sono stati i momenti che ti hanno colpito di più. Se abbiamo perso qualcosa (e ne siamo sicuri), scrivici un tweet a @Chromiumdev con #100CoolWebMoments. Buon divertimento!

Stringa 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 per sostituire 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 User Agent Reduction Origin Trial and Dates 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 fare una presentazione, voglio che le diapositive vengano visualizzate a schermo intero sul display principale e che le mie note dell'oratore vengano 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 impostare i tag NFC in modo da essere di sola lettura in modo permanente.

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

Per approfondire

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

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

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