Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta nel mese di luglio 2024.
Release stabili del browser
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 riduce la saturazione del colore indigo
della metà, utilizzando hsl()
.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Browser Support
Puoi trovare molti altri esempi nel post del blog Sintassi del colore relativo CSS. La sintassi dei colori relativa è una delle aree di interesse di Interop 2024, quindi questo aggiornamento contribuisce a migliorare il punteggio di Firefox stabile.
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
.
Browser Support
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
, che è anche un'area di interesse per Interop 2024.
Questa proprietà è utile per le situazioni in cui può verificarsi il fallback del carattere, poiché consente di abbinare le dimensioni di un carattere di riserva a quelle del carattere di prima scelta.
Con questa release di Chrome, la proprietà font-size-adjust
diventa parte di
Baseline appena disponibile.
Supporto dell'API View Transition negli iframe
A partire da Chrome 127, saranno disponibili 127 transizioni simultanee tra visualizzazioni dello stesso documento in un frame principale e in un iframe dello stesso dominio.
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 di scorrimento attivabili da tastiera
In Chrome 127 le barre di scorrimento sono attivabili con un clic e tramite programmazione per impostazione predefinita. Le barre di scorrimento senza elementi secondari attivabili sono attivabili con la tastiera per impostazione predefinita.
Scopri di più su questa modifica nel post Barre di scorrimento con il fuoco della tastiera.
La 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'eredità 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.
ArrayBuffer
Ridimensionabili 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.
La parola chiave safe
nelle proprietà flexbox
Safari 17.6 è principalmente una release di correzioni alle funzionalità esistenti, tuttavia include anche la parola chiave safe
per le proprietà di allineamento flexbox.
In questo modo, la parola chiave safe
è interoperabile tra i browser.
Browser Support
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 a modifiche per consentire i ritorni a capo all'interno degli elementi che hanno display: ruby
. Anche la proprietà zoom
è stata aggiornata in base 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.