Novità sulla piattaforma web a giugno

Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta nel mese di giugno 2022.

Rachel Andrew

Release stabili del browser

A giugno, Chrome 103 e Firefox 102 sono diventati stabili.

Trasforma stream e stream di byte leggibili

Firefox 102 include il supporto per Transform Streams. In questo modo puoi eseguire il piping da ReadableStream a WritableStream, eseguendo una trasformazione sui chunk. È fantastico che questa funzionalità sia disponibile in tutti e tre i motori, quindi è un'ottima occasione per scoprire di più su Streams.

Supporto dei browser

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Origine

Anche gli stream di byte leggibili sono ora supportati in Firefox 102, il che consente di utilizzare un lettore BYOB (Bring Your Own Buffer) con l'interfaccia ReadableStreamBYOBReader. Può essere utilizzato per trasmettere in streaming i dati forniti dallo sviluppatore.

Supporto dei browser

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: non supportato.

Origine

Accedere ai caratteri installati localmente

Chrome 103 include l'API Local Fonts Access, che consente di accedere ai caratteri installati localmente dall'utente. Dopo aver richiesto l'accesso ai caratteri installati sul dispositivo, chiama window.queryLocalFonts() per ottenere un array dei caratteri installati.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

La funzionalità dei contenuti multimediali update

Firefox 102 include la funzionalità multimediale update. Viene utilizzato per verificare se il dispositivo di output può modificare l'aspetto dei contenuti dopo il rendering.

Supporto dei browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Origine

Un nuovo codice di stato HTTP: 103 early hints

Chrome 103 aggiunge un nuovo codice di stato HTTP 103 Early Hints. Se il server o la CDN sa che è necessario un determinato insieme di risorse secondarie per caricare una pagina, può consigliare al browser di eseguire la preconnessione alle origini o addirittura precaricare le risorse quando viene visualizzata la pagina che le richiede. Per usufruire della funzionalità, sono necessari aggiornamenti al server o alla CDN. Scopri di più sugli indicatori precoci.

Release beta del browser

Le versioni beta del browser ti offrono un'anteprima delle funzionalità che saranno disponibili nella prossima versione stabile del browser. È un'ottima occasione per testare nuove funzionalità o rimozioni che potrebbero influire sul tuo sito prima che la release venga resa disponibile a livello globale.

Le nuove beta di aprile sono state Chrome 104, Firefox 103 e Safari 16.

Nuova sintassi per le query sui media con intervallo

Chrome 104 include la nuova sintassi per le query sui media con intervallo, dalla specifica Media Queries Level 4. Ad esempio, una query sui contenuti multimediali scritta in precedenza come segue:

@media (min-width: 400px) { … }

Ora può essere scritto come segue:

@media (width >= 400px) { … }

Supporto dei browser

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Origine

API Region Capture

Chrome 104 per computer include anche l'API Region Capture. In questo modo, puoi ritagliare e rimuovere contenuti dal video acquisito prima di condividerlo.

Safari 16 offre al browser diverse funzionalità chiave

Safari 16 sembra essere un'altra release entusiasmante del team di Safari. Questa release aggiunge molte delle funzionalità incluse in Interop 2022. È fantastico vedere così tante novità in questo periodo di metà anno. Qui evidenzio alcune delle mie funzionalità preferite, ma per saperne di più, consulta le note di rilascio.

Insieme a molti altri sviluppatori, sono davvero entusiasta di vedere il supporto delle query sulle dimensioni per le query sui contenitori, una funzionalità che al momento è anche dietro un flag in Chrome.

Anche in Safari 16 è supportato il valore subgrid per grid-template-columns e grid-template-rows. Questa funzionalità è già disponibile in Firefox e in fase di sviluppo in Chrome e consente di ereditare le dimensioni delle tracce della griglia dalle griglie nidificate.

Supporto dei browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Origine

Inoltre, per il layout a griglia è possibile animare le tracce della griglia.

Supporto dei browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

È incluso il metodo showPicker(), che consente un modo canonico per mostrare un selettore del browser per date, ora, colore e file. Scopri di più in Mostrare un selettore del browser per data, ora, colore e file.

Supporto dei browser

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Origine

Sono stati risolti anche i problemi di accessibilità per display: contents, rendendo questa utile funzionalità sicura da usare senza il rischio di rimuovere elementi dall'albero di accessibilità.

Queste funzionalità beta saranno presto disponibili nei browser stabili.

Componente della serie Novità sul web