Scopri alcune delle interessanti funzionalità disponibili in versione stabile e beta browser web a luglio 2024.
Release del browser stabili
A luglio 2024, Firefox 128 Safari 17.6 e Chrome 127 è diventato stabile. Questo post prende in esame le nuove funzionalità aggiunte alla piattaforma web.
Sintassi del colore relativo del CSS
Firefox 128 include
Sintassi dei colori relativi dei CSS,
Ciò ti 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);
}
Supporto dei browser
- 119
- 119
- 128
- 16.4
Puoi trovare molti altri esempi nel post del blog Sintassi dei colori relativi dei CSS. La sintassi relativa dei colori è una delle aree di interesse di Interop 2024, 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à content del CSS.
quando include un'immagine. Il testo alternativo è esposto all'albero dell'accessibilità.
Ciò significa che il testo alternativo ora è supportato da tutti i browser per content.
Supporto dei browser
- 77
- 79
- 128
- 17,4
Un aggiornamento in Chrome 127 garantisce che Chrome accetti un numero arbitrario di
anziché una sola stringa, consentendo l'uso dell'elemento attr()
della funzione, ad esempio.
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 è possibile
utilizzare caratteri di riserva,
poiché ti aiuta ad 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
Nuovo riferimento disponibile.
Supporto dell'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 della visualizzazione utilizzando document.startViewTransaction in un iframe della stessa origine non funzionava se il frame principale eseguiva una transizione nello stesso momento. La transizione dell'iframe viene saltata automaticamente. Ora verranno eseguite entrambe le transizioni.
Contenitori di scorrimento attivabili della tastiera
In Chrome 127, gli scorrimenti possono essere attivati con un clic e in modo programmatico 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 Scorrimenti attivabili della tastiera.
Regola @property
Firefox 128 include il supporto per la regola @property e per il codice JavaScript correlato
su quelle di livello inferiore. Ciò significa che puoi creare proprietà CSS personalizzate che definiscono una sintassi,
e un valore iniziale.
Nell'esempio seguente, la proprietà personalizzata è definita per accettare un <color>
non ereditare e avere un valore iniziale di hotpink.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
La regola @property ora fa parte del programma Baseline di nuova disponibilità. Scopri di più in
@property: variabili CSS di nuova generazione ora con supporto universale del browser.
ArrayBuffer ridimensionabili e SharedArrayBuffer coltivabili
Ridimensionabile ArrayBuffer e coltivabile SharedArrayBuffer ora sono supportati in Firefox 128, consentendo di modificare la dimensione dei buffer senza dover allocare nuovo buffer e copiare i dati al suo interno. Queste proprietà fanno parte anche di Nuova disponibilità di riferimento.
Parola chiave safe nelle proprietà flexbox
Safari 17.6 è principalmente una versione di correzioni di funzionalità esistenti,
tuttavia include anche la parola chiave safe per le proprietà di allineamento flexbox.
Ciò rende la parola chiave safe interoperabile tra i browser.
Supporto dei browser
- 115
- 115
- 63
- 18
La parola chiave safe
impedisce che un allineamento scelto causi la visualizzazione dei contenuti al di fuori
visibile. Il seguente CodePen mostra come si comporta
con elementi allineati al centro. Se l'allineamento center causa la perdita di dati:
Al suo posto viene usato il metodo start.
Versioni del browser beta
Le versioni beta del browser offrono un'anteprima delle funzionalità che saranno incluse nel prossimo alla versione stabile del browser. È un ottimo momento per testare nuove funzionalità delle rimozioni, che potrebbero avere un impatto sul tuo sito prima che il resto del mondo lo riceva. Nuovi le versioni beta Firefox 129 e Chrome 128. La Safari 18 è ancora in corso. Queste release integrano molte funzionalità eccezionali sulla piattaforma. Dai un'occhiata alla release note per tutti i dettagli. Ecco alcuni punti salienti.
Chrome 128 include la proprietà CSS ruby-align, insieme alle modifiche alle
rendono possibili le interruzioni di riga all'interno di elementi che hanno display: ruby,
Anche la proprietà zoom è stata aggiornata in modo che corrisponda alla specifica. C'è
un aggiornamento 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 transition-behavior
proprietà. Queste proprietà entreranno a far parte di Baseline Newly Disponibile una volta
Firefox 129 viene rilasciato nella versione stabile.