Novità sulla piattaforma web a settembre

Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta nel corso di settembre 2024.

Rachel Andrew

Release stabili del browser

A settembre 2024, Firefox 130, Safari 18 e Chrome 129 sono diventati stabili. Questo post esamina le nuove funzionalità aggiunte alla piattaforma web.

Accordioni esclusivi con l'attributo name per <details>

Firefox 130 supporta l'attributo name dell'elemento <details>. Questo raggruppa gli elementi<details>, in cui è possibile aprire un solo elemento alla volta all'interno di un gruppo. In questo modo puoi creare una sezione a scomparsa esclusiva senza utilizzare JavaScript.

Supporto dei browser

  • Chrome: 120.
  • Bordo: 120.
  • Firefox: 130.
  • Safari: 17.2.

Animazione automatica (e altro ancora)

Chrome 129 aggiunge la proprietà CSS interpolate-size e la funzione calc-size().

La proprietà CSS interpolate-size consente a una pagina di attivare animazioni e transizioni di parole chiave per il dimensionamento intrinseco del CSS come auto, min-content e fit-content, nei casi in cui queste parole chiave possono essere animate.

Supporto dei browser

  • Chrome: 129.
  • Edge: non supportato.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

La funzione CSS calc-size() è una funzione CSS simile a calc(), ma supporta anche le operazioni su una sola parola chiave relativa alle dimensioni supportata. Le parole chiave per le dimensioni supportate sono auto, min-content, max-content e fit-content.

Supporto dei browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Scopri di più su Animate to height: auto; (e altre parole chiave di dimensionamento intrinseco) in CSS.

Formattare le durate in JavaScript

Sempre in Chrome 129 è disponibile Intl.DurationFormat, che fornisce un metodo di durata della formattazione, ad esempio "1 h 40 min 30 sec", che supporta più impostazioni internazionali.

Supporto dei browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: non supportato.
  • Safari: 16.4.

Origine

API WebCodecs

L'API Web Codecs è ora supportata su computer in Firefox 130, offrendo agli sviluppatori web l'accesso a basso livello ai singoli frame di uno stream video e ai chunk di audio. Le nuove interfacce includono: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame e VideoColorSpace. Questa API non rende ancora disponibile Baseline Newly in quanto non è ancora supportata su Firefox per Android, tuttavia è disponibile il supporto di Firefox Nightly per Android.

Supporto dei browser

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Origine

Query di stile CSS per le proprietà personalizzate

Safari 18 supporta diverse nuove funzionalità, tra cui le query CSS Style. Le query sugli stili consentono di creare stili riutilizzabili e di applicarli come gruppo. Ad esempio, quando hai un componente riutilizzabile con più varianti.

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: non supportato.
  • Safari: 18.

Origine

Scopri di più sulle query sullo stile CSS.

Le stesse transizioni tra visualizzazioni del documento

Safari 18 supporta anche le transizioni tra visualizzazioni dello stesso documento per le SPA, consentendoti di creare transizioni visive tra stati diversi di un'app.

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: non supportato.
  • Safari: 18.

Origine

Scopri di più sulle transizioni tra le visualizzazioni dello stesso documento

Release beta del browser

Le versioni beta del browser ti offrono un'anteprima delle funzionalità che saranno disponibili nella successiva versione stabile del browser. È un'ottima occasione per testare nuove funzionalità o rimuovere elementi che potrebbero influire sul tuo sito prima che la release venga resa disponibile a livello mondiale. Le nuove beta sono Firefox 131, Chrome 130 e Safari 18.1. Queste release offrono alla piattaforma molte funzionalità interessanti. Per tutti i dettagli, consulta le note di rilascio. Eccone solo alcuni.

Firefox 131 include nuovi helper per l'iteratore JavaScript e l'opzione Cookies With Independent Partitioned State (CHIPS) è ora attiva.

Chrome 130 include il supporto per box-decoration-break: clone sia per la frammentazione in linea (layout a riga) che per la frammentazione dei blocchi (frammenti creati per la stampa e multicol). Inoltre, in IndexedDB sono disponibili segnalazioni di errori migliori e un nuovo attributo connected per l'interfaccia Web Serial SerialPort.

Safari 18.1 è una versione di correzioni di bug per funzionalità esistenti.