Novità sulla piattaforma web a luglio

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

Rachel Andrew

Release del browser stabili

A luglio 2024, Firefox 128, Safari 17.6 e Chrome 127 sono diventati stabili. Questo post esamina le nuove funzionalità aggiunte alla piattaforma web.

Sintassi del colore relativo CSS

Firefox 128 include la sintassi del colore relativo CSS, che consente di creare un colore relativo a un colore di origine. Il seguente CSS desatura la metà del colore indigo utilizzando hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Puoi trovare molti altri esempi nel post del blog Sintassi del colore relativo CSS. La sintassi relativa dei colori è una delle aree di interesse di Interop 2024, quindi questo aggiornamento aiuta a migliorare il punteggio per la versione stabile di Firefox.

Testo alternativo per la proprietà content

Firefox 128 supporta il testo alternativo per la proprietà CSS content, quando include un'immagine. Il testo alternativo è esposto all'albero di accessibilità. Ciò significa che il testo alternativo è ora supportato da tutti i browser per content.

Un aggiornamento in Chrome 127 garantisce che Chrome accetti un numero arbitrario di elementi anziché una singola stringa, consentendo ad esempio l'utilizzo della funzione attr().

La proprietà font-size-adjust

Chrome 127 include font-size-adjust, anche un'area di interesse per Interop 2024. Questa proprietà è utile nelle situazioni in cui possono essere presenti caratteri di riserva, in quanto consente di abbinare le dimensioni di un carattere di riserva al carattere di prima scelta.

Con questa release di Chrome, la proprietà font-size-adjust diventa parte di Nuova disponibilità di base di riferimento.

Supporto per l'API View Transizione negli iframe

A partire da Chrome 127 saranno disponibili transizioni simultanee della visualizzazione dello stesso documento in un frame principale e in un iframe della stessa origine.

In precedenza, l'esecuzione di una transizione di visualizzazione utilizzando document.startViewTransition in un iframe dello stesso origine non funzionava se contemporaneamente il frame principale eseguiva una transizione. La transizione dell'iframe verrà saltata automaticamente. Ora verranno eseguite entrambe le transizioni.

Contenitori con scorrimento attivabile da tastiera

In Chrome 127 le barre di scorrimento sono attivabili con un clic e tramite programmazione per impostazione predefinita. Gli strumenti di scorrimento senza elementi secondari attivabili possono essere attivati dalla tastiera per impostazione predefinita.

Scopri di più su questa modifica nel post Barre di scorrimento con il fuoco della tastiera.

Regola @property

Firefox 128 include il supporto per la regola @property e le API JavaScript correlate. Ciò significa che puoi creare proprietà CSS personalizzate che definiscono una sintassi, l'ereditarietà e un valore iniziale.

Nell'esempio seguente, la proprietà personalizzata è definita per accettare solo un valore <color>, per non essere ereditata e per avere un valore iniziale hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

La regola @property ora fa parte di Baseline Newly Available. Scopri di più in @property: le variabili CSS di nuova generazione ora sono supportate da tutti i browser.

ArrayBufferRidimensionabili e espandibiliSharedArrayBuffer

ArrayBuffer ridimensionabile e SharedArrayBuffer espandibile sono ora supportati in Firefox 128, il che consente di modificare le dimensioni dei buffer senza dover allocare un nuovo buffer e copiarvi i dati. Queste proprietà vengono aggiunte anche a Baseline Newly Available.

Parola chiave safe nelle proprietà flexbox

Safari 17.6 è principalmente una versione di correzioni di funzionalità esistenti, ma include anche la parola chiave safe per le proprietà di allineamento flexbox. In questo modo, la parola chiave safe è interoperabile tra i browser.

La parola chiave safe impedisce che un allineamento scelto causi la visualizzazione dei contenuti al di fuori dell'area visibile. Il seguente CodePen mostra come funziona con gli elementi allineati al centro. Se l'allineamento center causa la perdita di dati, viene utilizzato start.

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 129 e Chrome 128. 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.

Chrome 128 include la proprietà CSS ruby-align, insieme alle modifiche per consentire le interruzioni di riga all'interno degli elementi che hanno display: ruby, anche la proprietà zoom è stata aggiornata in modo che corrisponda alla specifica. È stato eseguito un update dell'API AudioContext per aggiungere un callback assegnato a AudiContext.onerror che segnala gli errori di creazione e rendering di AudioContext.

Firefox 129 include la regola @starting-style e la proprietà transition-behavior. Queste proprietà faranno parte di Baseline Newly Available non appena Firefox 129 verrà rilasciato in versione stabile.