Novità di Chrome 104

Tieni presente quanto segue:

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

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, Google Presentazioni potrebbe 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 utilizzarlo, seleziona l'elemento da condividere, quindi crea un nuovo CropTarget in base a quell'elemento. Quindi, avvia la condivisione schermo chiamando 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'area visibile compresa tra 400 e 600 pixel:

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

Può essere scritto come segue:

@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, garantendo la compatibilità con i 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

Le app specifiche per la piattaforma in genere hanno transizioni fluide tra le diverse visualizzazioni, sono belle da vedere, mantengono l'utente nel contesto e contribuiscono a rendere l'esperienza più performante. 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 meglio, ma le transizioni sono ancora difficili.

Le transizioni tra 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 navigate, recupera i contenuti della nuova pagina, quindi controlla se le transizioni sono supportate. In caso contrario, aggiorna la pagina senza transizione. 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 scalfito la superficie, quindi dai un'occhiata al video di Jake Introduzione delle transizioni di pagina sul web o consulta l'articolo esplicativo.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • 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 di posizionamento della finestra multischermo.
  • 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 dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 104.

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 105, sarò qui per dirti le novità di Chrome.