Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta nel mese di maggio 2024.
Release stabili del browser
A maggio 2024 Firefox 126, Safari 17.5 e Chrome 125 sono diventati stabili. Questo post esamina le nuove funzionalità aggiunte alla piattaforma web.
Posizionamento dell'ancora CSS
Chrome 125 include il posizionamento dell'ancora CSS. In questo modo puoi collegare un elemento con posizionamento assoluto a uno o più altri elementi della pagina (le ancore) in modo dichiarativo, senza utilizzare JavaScript. Il posizionamento degli ancoraggi è efficace quando gli ancoraggi sono scorrevoli. Un caso d'uso comune è posizionare un popup, ad esempio una descrizione comando, accanto all'elemento che lo ha invocato o un menu di selezione e il relativo elenco di opzioni popup.
Scopri di più nell'articolo Introduzione all'API CSS Anchor Positioning.
Funzioni di valore a gradini CSS: round()
, mod()
e rem()
mod()
e rem()
Chrome 125 include anche le funzioni di valore a gradini, il che significa che ora queste funzioni sono
Disponibile di recente come riferimento. Le funzioni di valore a gradini round()
, mod()
e rem()
trasformano tutte un determinato valore in base a un altro "valore del passaggio".
Scopri di più in Le funzioni matematiche dei valori con incrementi CSS sono ora disponibili nella base di riferimento 2024.
La funzione light-dark()
Tra le funzionalità di Base di recente disponibili c'è anche la funzione di colore CSS light-dark()
,
che è presente in Safari 17.5.
light-dark()
è una funzione che accetta due argomenti, entrambi devono essere <color>
. Viene scelto uno dei due in base alla combinazione di colori utilizzata.
- Se la combinazione di colori utilizzata è
light
o 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 sezione Colori CSS dipendenti dalla combinazione di colori con light-dark() .
L'API Screen Wake Lock
In Firefox 126 è disponibile l'API Screen Wake Lock, un'altra funzionalità ora parte di Baseline Newly Available. Questa API fornisce un modo per impedire al dispositivo di attenuare e bloccare lo schermo.
Scopri come utilizzare questa funzionalità in Mantenere attivo lo schermo 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 metriche hardware sottostanti corrette per garantire che gli utenti possano sfruttare tutta la potenza di elaborazione a loro disposizione, a condizione che il sistema non sia sottoposto a uno stress insostenibile.
Questa funzionalità è disponibile in Chrome 125. Intel ha guidato il lavoro di progettazione e implementazione di questa API, che consentirà alle app di videoconferenza di bilanciare dinamicamente funzionalità e prestazioni.
Leggi la documentazione dell'API Compute Pressure.
La regola @starting-style
Safari 17.5 include la regola @starting-style
. Questa regola at CSS consente di applicare uno stile che il browser può cercare prima che l'elemento venga aperto nella pagina, come necessario per le animazioni di inserimento.
La regola @starting-style
è una delle funzionalità trattate in
Quattro nuove funzionalità CSS per animazioni di entrata e uscita fluide.
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 127 e Chrome 126. Queste release offrono alla piattaforma molte funzionalità interessanti. Consulta le note di rilascio per tutti i dettagli. Ecco alcuni punti salienti.
Chrome 126 include transizioni tra visualizzazioni di documenti diversi per le navigazioni con la stessa origine. In precedenza, per utilizzare l'API View Transitions era necessario ristrutturare il sito web in un'applicazione SPA. Questo non avviene più; Le transizioni di visualizzazione sono ora abilitate per impostazione predefinita per le navigazioni dello stesso dominio. Puoi creare una transizione di visualizzazione tra due documenti diversi della stessa origine.
Firefox 127 include metodi Set JavaScript aggiuntivi: intersection()
, union()
, difference()
,
symmetricDifference()
,isSubsetOf()
, isSupersetOf()
e isDisjointFrom()
.