Novità sulla piattaforma web ad agosto

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

Release stabili del browser

Ad agosto 2024, Firefox 129 e Chrome 128 sono diventati stabili. Questo post esamina le nuove funzionalità aggiunte alla piattaforma web.

Aggiornamenti alla formattazione del codice Ruby

L'elemento HTML <ruby> è un potente strumento per migliorare la presentazione del testo, in particolare per le lingue dell'Asia orientale. Questo elemento ti consente di visualizzare annotazioni fonetiche o altre informazioni supplementari sopra o accanto al testo di base. A partire da Chrome 128, l'annotazione ruby è spezzata a capo e puoi applicare uno stile al testo ruby con la proprietà CSS ruby-align.

Scopri di più nella sezione Proprietà <ruby> e ruby-align CSS con possibilità di interruzione a riga.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties per la funzionalità di inchiostro con più penne

Questa modifica, disponibile in Chrome 128, offre un modo sicuro e affidabile per identificare i singoli pennini (cursori) che interagiscono con lo schermo per impostare colori o forme specifiche per ogni dispositivo che interagisce con il digitizer. Espande l'interfaccia PointerEvent per includere un nuovo attributo, deviceProperties. Questo contiene l'attributo uniqueId, che rappresenta un identificatore univoco persistente per la sessione e isolato dal documento che puoi utilizzare in modo affidabile per identificare i singoli pen che interagiscono con la pagina.

Promise.try

Inoltre, in Chrome 128, Promise.try semplifica la gestione degli errori con le promesse. Esiste un pattern in cui hai una funzione, f. Questa funzione può essere asincrona e restituire una promessa oppure no. Per utilizzare la semantica delle promesse per gestire gli errori in entrambi i casi, devi racchiudere la funzione in una promessa. In genere questo viene ottenuto con new Promise(resolve => resolve(f())).

Promise.try è un modo più semplice per ottenere lo stesso risultato. Ti consente di avviare una catena di promesse che intercetta tutti gli errori negli handler .catch anziché dover gestire i flussi di eccezione sia sincroni che asincroni.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

Animare gli effetti di entrata

Firefox 129 include due funzionalità CSS utilizzate per animare gli effetti di inserimento, che ora sono disponibili come base di riferimento.

La regola @starting-style definisce gli stili iniziali di un elemento prima che venga visualizzato nella pagina. Questo è necessario per gli elementi che vengono animati da display: none, in quanto hanno bisogno di uno stato da cui eseguire l'animazione.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Gli effetti di immissione richiedono anche l'animazione di proprietà discrete, ovvero quelle che non possono eseguire l'interpolazione tra i valori. Ora puoi ottenere questo risultato con transition-behavior: allow-discrete o il valore allow-discrete nella scorciatoia di transizione. Questa funzionalità è ora supportata anche in Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

Scopri di più nella sezione Ora in Base di riferimento: animazione degli effetti di entrata.

Aggiunte a PerformanceResourceTiming

Firefox 129 aggiunge le proprietà contentType e responseStatus dell'interfaccia PerformanceResourceTiming. Indicano rispettivamente il tipo di contenuto della risorsa recuperata e il codice di stato della risposta HTTP restituito durante il recupero della risorsa.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Metodi toJSON() di geolocalizzazione

Anche in Firefox 129 sono presenti GeolocationCoordinates.toJSON() e GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 ora supporta WebDriver BiDi. Ciò significa che puoi utilizzare Puppeteer con Chrome o Firefox per le automazioni. Scopri di più in WebDriver BiDi pronto per la produzione in Firefox, Chrome e Puppeteer e Annuncio del supporto ufficiale di Puppeteer per Firefox.

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 130 e Chrome 129. La beta di Safari 18 è ancora in corso. Queste release offrono alla piattaforma molte funzionalità interessanti. Consulta le note di rilascio per tutti i dettagli. Ecco alcuni punti salienti.

Firefox 130 supporta l'attributo name dell'elemento <details> che raggruppa 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.

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

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

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

In Chrome 129 è presente anche Intl.DurationFormat, che fornisce un metodo per formattare le durate, ad esempio "1 ora 40 min 30 sec", che supporta più impostazioni internazionali.