Novità di Chrome 104

Pete LePage

Tieni presente quanto segue:

Mi chiamo Pete LePage. Vediamo quali sono le novità di Chrome 104 per gli sviluppatori.

Specificare un'area di ritaglio con l'acquisizione della regione

getDisplayMedia() consente di creare uno stream video dalla scheda corrente. Tuttavia, a volte non ti serve l'intera scheda, ma solo una piccola parte. Fino a oggi, l'unico modo per farlo era ritagliare manualmente ogni singolo frame del video.

Con la funzionalità di acquisizione di regioni, un'app web può definire l'area specifica della schermata che vuole condividere. Ad esempio, Presentazioni Google può consentirti di rimanere nella visualizzazione di modifica standard e condividere la slide corrente.

Screenshot di una finestra del browser con un'app web che evidenzia l'area dei contenuti principali e un iframe cross-origin.
La sezione dei contenuti principali è in blu e l'iframe cross-origin è in rosso.

Per usarlo, seleziona l'elemento da condividere, quindi crea un nuovo CropTarget basato su quell'elemento. Ora avvia la condivisione schermo chiamando il numero getDisplayMedia(). L'utente viene quindi invitato a concedere l'autorizzazione per condividere lo schermo. Quindi, chiama track.cropTo() e passa il cropTarget creato in precedenza.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Per ulteriori dettagli, consulta Migliorare la condivisione delle schede con la funzionalità di acquisizione della regione.

Query sui contenuti multimediali più semplici con sintassi e valutazione di livello 4

Le query supporti sono fondamentali per il responsive design, in quanto ti consentono di definire stili specifici per diverse dimensioni dell'area visibile. Tuttavia, a meno che non li utilizzi ogni singolo giorno, la sintassi può essere un po' confusa.

Chrome 104 aggiunge il supporto per le query sui media - Livello 4 - Sintassi e valutazione, consentendoti di scrivere query sui media utilizzando operatori di confronto matematico ordinari.

Quindi, invece di qualcosa di simile per indicare un viewport compreso tra 400 e 600 pixel:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Può essere scritto in questo modo:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Oltre a rendere le query sui contenuti multimediali meno verbose, la nuova sintassi può essere più accurata. Le query min- e max- sono inclusive, ad esempio: min-width: 400px esegue test per una larghezza di almeno 400 px. La nuova sintassi consente di essere più espliciti su ciò che si intende.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

È già supportato in Firefox e esiste un plug-in PostCSS che riscriverà la nuova sintassi nella vecchia sintassi, garantendo la compatibilità del browser.

Per maggiori dettagli, consulta l'articolo di Rachel Nuova sintassi per le query sui media con intervallo in Chrome 104.

Le transizioni degli elementi condivisi avviano una nuova prova dell'origine

In genere, le app specifiche per le piattaforme presentano transizioni fluide tra le diverse visualizzazioni, hanno un aspetto accattivante, tengono l'utente nel contesto e migliorano le prestazioni dell'esperienza. Invece, sul web, una navigazione completa può essere brusca e a volte comporta una schermata vuota momentanea. Per un'app a pagina singola può essere migliore, ma le transizioni sono ancora difficili.

Le transizioni di elementi condivisi, che avviano una nuova prova dell'origine in Chrome 104, ti consentono di fornire transizioni fluide, indipendentemente dal fatto che siano tra documenti (ad esempio in un'app con più pagine) o all'interno di un documento (ad esempio in un'app a pagina singola).

Ecco un esempio approssimativo di come funzionano le transizioni per un'app a pagina singola. Nella funzione di navigazione, recupera i nuovi contenuti della pagina, quindi controlla se le transizioni sono supportate. In caso contrario, aggiorna la pagina senza transizioni. In questo caso, crea un transition() e chiama start(), comunicando all'API quando la modifica del DOM è completata.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Sotto il cofano, le transizioni degli elementi condivisi utilizzano le animazioni CSS, quindi puoi passare da un effetto di dissolvenza all'entrata scorrevole o a qualsiasi altro effetto.

Ho appena sfiorato la superficie, quindi guarda il video di Jake Bringing Page Transiziones to the Web o approfondisci la spiegazione.

E tanto altro.

Naturalmente c'è molto altro.

  • Quando i cookie vengono impostati con un attributo Expires o Max-Age esplicito, il valore ora non potrà superare i 400 giorni.
  • Sono stati apportati miglioramenti all'API Multi-screen Windowplacement.
  • La proprietà CSS overflow-clip-margin specifica fino a che punto i contenuti di un elemento possono essere visualizzati prima di essere ritagliati.

Per approfondire

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

Iscriviti

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Mi chiamo Pete LePage e non appena uscirà Chrome 105, saranno qui per dirti le novità di Chrome.