Novità di Chrome 100

Pete LePage

Ecco cosa devi sapere:

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 fantastici momenti web

È 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 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 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 saperne di più, 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 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 cosa c'è di nuovo in Chrome.