Novità sulla piattaforma web a maggio

Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta a maggio 2023.

Release del browser stabile

A maggio 2023, Firefox 113, Chrome 113, Chrome 114 e Safari 16.5 sono diventati stabili. Vediamo cosa comporta tutto ciò per la piattaforma web.

WebGPU

Chrome 113 include WebGPU, il successore delle API grafiche WebGL e WebGL 2 per il web. Offre funzionalità moderne come calcolo GPU, accesso overhead ridotto all'hardware GPU, possibilità di eseguire il rendering su più canvas da un singolo dispositivo grafico e prestazioni migliori e più prevedibili.

Supporto dei browser

  • 113
  • 113
  • x

Fonte

Insiemi proprietari

Gli insiemi proprietari (FPS) fanno parte di Privacy Sandbox. Consente alle organizzazioni di dichiarare relazioni tra siti, in modo che i browser possano decidere quando consentire l'accesso limitato ai cookie di terze parti per i siti all'interno di un insieme. FPS ha iniziato un'implementazione graduale in Chrome 113.

Funzionalità multimediali CSS e altro

Per quanto riguarda il CSS, Chrome 113 include le funzionalità multimediali overflow-inline e overflow-block.

Supporto dei browser

  • 113
  • 113
  • 66
  • 17

Fonte

E la funzionalità multimediale update.

Supporto dei browser

  • 113
  • 113
  • 102
  • 17

Fonte

È inclusa anche la funzione di easing di linear(), su cui puoi trovare ulteriori informazioni nell'articolo Creare curve di animazione complesse in CSS con la funzione di easing di linear().

Supporto dei browser

  • 113
  • 113
  • 112
  • 17,2

Funzionalità di Livello di colore 4 CSS

Firefox 113 include le notazioni funzionali color(), lab(), lch(), oklab(), oklch() e color-mix(), insieme alla proprietà forced-color-adjust. Ciò significa che i nuovi spazi colore e le nuove funzioni sono ora supportati in tutti e tre i motori principali. Scopri di più su questi spazi colore e funzioni nella guida ai colori CSS ad alta definizione.

Supporto dei browser

  • 111
  • 111
  • 113
  • 16.2

Fonte

Più controllo sulle selezioni :nth-child()

Firefox 113 aggiunge anche la possibilità di passare un elenco di selettori in :nth-child() e nth-last-child(). Scopri di più al riguardo e guarda gli esempi nel post More control over :nth-child() with the of S sintassi.

Supporto dei browser

  • 111
  • 111
  • 113
  • 9

API Compressions Streams

Ora supportata in tutti e tre i motori principali grazie all'inclusione in Firefox 113, l'API Compressions Streams consente la compressione e la decompressione dei flussi. Ciò significa che le applicazioni JavaScript non devono più raggruppare una libreria di compressione.

Supporto dei browser

  • 80
  • 80
  • 113
  • 16.4

Fonte

Nidificazione CSS

Safari 16.5 ha risolto principalmente i problemi, ma aggiunge anche il supporto per la nidificazione dei CSS, con il nuovo selettore di nidificazione >, utilizzato per nidificare le regole di stile correlate, in modo familiare agli sviluppatori che hanno utilizzato i pre-processori:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Supporto dei browser

  • 120
  • 120
  • 117
  • 17,2

Fonte

Trova un equilibrio tra i titoli e text-wrap: balance

A partire dalla versione 114 di Chrome puoi usare la versione text-wrap: balance. In questo modo puoi bilanciare i titoli, evitando il problema di dover inserire una sola parola nell'ultima riga e ottenendo un risultato più piacevole e leggibile. Per saperne di più, consulta Testo a capo del CSS: saldo.

Supporto dei browser

  • 114
  • 114
  • 121
  • 17,4

Fonte

CHIPS: cookie con stato partizionato indipendente

Nell'ambito del processo di eliminazione graduale dei cookie di terze parti, CHIPS consente di attivare il partizionamento dei cookie di terze parti da parte del sito di primo livello utilizzando il nuovo attributo dei cookie Partitioned. CHIPS sono disponibili in Chrome 114.

L'API Popover

Sempre in Chrome 114 è disponibile l'API Popover, che semplifica la creazione di elementi di interfaccia utente (UI) temporanei che vengono visualizzati nella parte superiore di tutte le altre UI delle app web.

Questi includono elementi interattivi per l'utente come menu di azioni, suggerimenti per gli elementi dei moduli, selettori di contenuti e UI per l'insegnamento.

Il nuovo attributo popover consente la visualizzazione automatica di qualsiasi elemento nel livello superiore. Ciò significa che non dovrai più preoccuparti di posizionamento, sovrapposizione di elementi, stato attivo o interazioni da tastiera per lo sviluppatore.

Scopri di più nella pagina Introduzione all'API popover.

Supporto dei browser

  • 114
  • 114
  • 120
  • 17

Fonte

Release del browser beta

Le versioni beta del browser offrono un'anteprima degli elementi che saranno disponibili nella versione stabile successiva del browser. È un ottimo momento per testare le nuove funzionalità, o le rimozioni, che potrebbero avere un impatto sul tuo sito prima dell'uscita ufficiale. Le nuove versioni beta sono Firefox 114, Chrome 115 e Safari 16.6. Queste release introducono molte fantastiche funzionalità nella piattaforma. Consulta le note di rilascio per tutti i dettagli, ecco alcune delle principali novità.

Chrome 115 include più valori per la proprietà CSS display. Ciò significa che display: flex diventa display: block flex e display: block diventa display: block flow. I singoli valori vengono mantenuti come parole chiave precedenti e, una volta in Chrome stabile, i vari valori diventano disponibili in tutti i motori.

Sempre in Chrome 115 sono presenti le estensioni ScrollTimeline e ViewTimeline della specifica delle animazioni web. Queste consentono di attivare le animazioni con scorrimento tramite CSS e JavaScript.

Firefox 114 include l'API WebTransport, un aggiornamento moderno di WebSocket che supporta flussi multipli, flussi unidirezionali e distribuzione fuori ordine.

Parte della Nuova serie web