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.

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

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

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

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

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.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

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

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

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.