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.
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.
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.
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.
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
responseStatus
Metodi toJSON()
di geolocalizzazione
Anche in Firefox 129 sono presenti GeolocationCoordinates.toJSON()
e GeolocationPosition.toJSON()
.
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.