Tieni presente quanto segue:
- Ora puoi specificare un'area di ritaglio utilizzando l'acquisizione della regione
quando usi
getDisplayMedia()
per acquisire la scheda corrente. - La sintassi delle query sui media può essere scritta utilizzando operatori di confronto matematico.
- Transizioni di elementi condivisi avvia una prova dell'origine.
- E c'è molto altro.
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.

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
oMax-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.
- Novità di Chrome DevTools (104)
- Ritiro e rimozione di funzionalità in Chrome 104
- Aggiornamenti di ChromeStatus.com per Chrome 104
- Elenco delle modifiche al repository di origine di Chromium
- Calendario delle release di Chrome
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.