Novità di Chrome 104

Pete LePage

Tieni presente quanto segue:

Mi chiamo Pete LePage. Analizziamo in dettaglio le novità di Chrome 104 per gli sviluppatori.

Specifica un'area ritagliata con acquisizione dell'area

getDisplayMedia() consente di creare un video stream dalla scheda corrente. Tuttavia, a volte non vuoi l'intera scheda, ma solo una piccola parte. Finora, l'unico modo era ritagliare manualmente ogni fotogramma del video.

Con Region Capture, un'app web può definire l'area specifica dello schermo che vuole condividere. Ad esempio, Presentazioni Google ti consente di rimanere nella visualizzazione di modifica standard e di condividere la slide corrente.

Screenshot di una finestra del browser con un'app web che evidenzia l'area dei contenuti principale e un iframe multiorigine.
L'area dei contenuti principale è in blu, mentre l'iframe multiorigine è in rosso.

Per utilizzarlo, seleziona l'elemento da condividere, quindi crea un nuovo CropTarget in base all'elemento. Dopodiché, avvia la condivisione schermo chiamando il numero getDisplayMedia(). In questo modo viene richiesto all'utente l'autorizzazione a condividere lo schermo. Quindi, chiama track.cropTo() e passa il metodo 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 Condivisione delle schede migliorata con Acquisizione regione.

Query supporti più semplici con sintassi e valutazione di livello 4

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

Chrome 104 aggiunge il supporto per Query supporti - Livello 4 - Sintassi e valutazione, consentendo di scrivere query supporti utilizzando normali operatori di confronto matematico.

Invece di qualcosa del genere 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 nel seguente modo:

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

Oltre a rendere meno dettagliate le query supporti, la nuova sintassi può essere più precisa. Le query min- e max- sono inclusive, ad esempio: min-width: 400px esegue test per una larghezza di almeno 400 px. La nuova sintassi ti consente di essere più esplicito riguardo a ciò che intendi.

@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à supportata in Firefox ed è disponibile un plug-in PostCSS che riscrive la nuova sintassi con la vecchia sintassi, garantendo la compatibilità del browser.

Per ulteriori dettagli, consulta l'articolo di Rachel Nuova sintassi per le query supporti intervalli in Chrome 104.

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

Le app specifiche per le piattaforme in genere hanno transizioni fluide tra le diverse visualizzazioni, hanno un aspetto accattivante, mantengono l'utente nel contesto e contribuiscono a migliorare le prestazioni dell'esperienza. Sul web, invece, una navigazione completa può essere complicata e a volte si tratta di una schermata vuota. Per un'app su una sola pagina, può essere migliore, ma le transizioni sono comunque difficili.

Le transizioni degli elementi condivisi, avviando una nuova prova dell'origine in Chrome 104, consentono di offrire transizioni fluide, indipendentemente dal fatto che le transizioni siano cross-document (ad esempio in un'app con più pagine) o intra-documenti (ad esempio in un'app a pagina singola).

Di seguito è riportato un esempio approssimativo di come funzionano le transizioni per un'app a pagina singola. Nella funzione di navigazione, visualizza i contenuti della nuova pagina, poi verifica se le transizioni sono supportate. In caso contrario, aggiorna la pagina senza una transizione. Se lo sono, crea un transition() e chiama start() per comunicare all'API quando la modifica del DOM è completa.

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));
}

In background, la funzionalità Transizioni degli elementi condivisi utilizza le animazioni CSS, per passare da una dissolvenza in effetto a una dissolvenza in entrata o a scorrimento.

Ho appena sbirciato la superficie, quindi guarda il video di Jake Bringing Page Transactions to the Web o immergiti nell'spiegazione.

E tanto altro.

Ovviamente c'è molto altro.

  • Quando i cookie vengono impostati con un attributo esplicito Expires o Max-Age, il valore verrà ora limitato a un massimo di 400 giorni.
  • Sono stati apportati miglioramenti all'API di posizionamento della finestra multischermo.
  • Inoltre, la proprietà CSS overflow-clip-margin specifica in che misura è possibile dipingere i contenuti di un elemento prima di essere ritagliati.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 104.

Abbonati

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

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 105 di Chrome, sarò qui per farti conoscere le novità di Chrome.