Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta a maggio 2024.
Release del browser stabile
A maggio 2024, Firefox 126, Safari 17.5 e Chrome 125 sono diventati stabili. Questo post illustra le nuove funzionalità aggiunte alla piattaforma web.
Posizionamento anchor CSS
Chrome 125 include il posizionamento di ancoraggio CSS. Ciò ti consente di eseguire il tethering di un elemento con posizione assoluta in uno o più altri elementi sulla pagina (gli ancoraggi), in modo dichiarativo, senza l'uso di JavaScript. Il posizionamento degli ancoraggi funziona in modo efficace quando gli ancoraggi sono scorrevoli. Un caso d'uso comune è posizionare un popover, ad esempio una descrizione comando, accanto all'elemento che lo ha richiamato oppure un menu di selezione e il relativo elenco di opzioni popover.
Scopri di più nella pagina Presentazione dell'API di posizionamento dell'ancoraggio CSS.
Funzioni di valore con rientri CSS: round(), mod() e rem()
Chrome 125 include anche le funzioni con valori con rientri, il che significa che queste funzioni sono ora disponibili di base. Le funzioni con valori con rientri, round(), mod() e rem(), trasformano tutte un determinato valore in base a un altro "valore di passaggio".
Per saperne di più, consulta Le funzioni matematiche dei valori con rientri CSS sono ora disponibili in Baseline 2024.
La funzione light-dark()
Nell'unione di Baseline Newly Available, c'è anche la funzione colore CSS light-dark(), disponibile in Safari 17.5.
light-dark() è una funzione che accetta due argomenti, entrambi devono essere <color>. Viene scelto uno di entrambi in base alla combinazione di colori utilizzata.
- Se la combinazione di colori utilizzata è
lighto sconosciuta, viene restituito il valore calcolato del primo valore. - Se la combinazione di colori utilizzata è
dark, viene restituito il valore calcolato del secondo colore.
Scopri di più nella pagina relativa ai colori dipendenti dallo schema di colori CSS con light-dark() .
L'API Screen Wake Lock
In Firefox 126 arriverà l'API Screen Wake Lock, un'altra funzionalità che ora fa parte di Baseline Newly Available. Questa API fornisce un modo per impedire al dispositivo di oscurare e bloccare lo schermo.
Scopri come usare questa funzionalità in Resta sveglio con l'API Screen Wake Lock.
L'API Compute Pressure
L'API Compute Pressure offre stati di alto livello che rappresentano il carico della CPU sul sistema. Consente all'implementazione di utilizzare le giuste metriche hardware di base per garantire che gli utenti possano sfruttare tutta la potenza di elaborazione a loro disposizione, purché il sistema non sia sotto stress ingestibile.
Questa funzionalità è disponibile in Chrome 125. Intel ha gestito il lavoro di progettazione e implementazione di questa API, che consentirà alle app di videoconferenza di bilanciare dinamicamente funzionalità e prestazioni.
Leggi la documentazione per l'API Compute Pressure.
La regola @starting-style
Safari 17.5 include la regola @starting-style. Questa regola di attacco CSS consente di applicare uno stile che il browser può cercare prima che l'elemento sia aperto sulla pagina, come necessario per le animazioni delle voci.
La regola @starting-style è una delle funzionalità descritte nell'articolo Quattro nuove funzionalità CSS per animazioni di ingresso e uscita senza problemi.
Release del browser beta
Le versioni beta del browser offrono un'anteprima degli elementi che saranno disponibili nella versione stabile successiva del browser. È un ottimo momento per testare le nuove funzionalità, o le rimozioni, che potrebbero avere un impatto sul tuo sito prima dell'uscita a livello mondiale. Le nuove versioni beta sono Firefox 127 e Chrome 126. Queste release introducono molte fantastiche funzionalità nella piattaforma. Per tutti i dettagli, consulta le note di rilascio. Ecco alcuni punti salienti.
Chrome 126 include transizioni della visualizzazione più documenti per le navigazioni con la stessa origine. In precedenza, per utilizzare l'API View Transiziones, era necessario cambiare l'architettura del sito web trasformandola in un'APS per utilizzare l'API View Transiziones. Questo non avviene più; La visualizzazione delle transizioni è ora abilitata per impostazione predefinita per le navigazioni dalla stessa origine. Puoi creare una transizione di visualizzazione tra due documenti diversi che hanno la stessa origine.
Firefox 127 include altri metodi di impostazione JavaScript: intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() e isDisjointFrom().