Data di pubblicazione: 13 febbraio 2025
Dopo l'enorme successo di Interop 2024, il progetto torna oggi con un nuovo insieme di aree di interesse per il 2025. Anche se non è stato possibile includere tutti i suggerimenti inviati quest'anno, l'elenco finale riguarda l'intera piattaforma web, dal CSS alle funzionalità correlate al rendimento.
Le aree di interesse per il 2025
- Posizionamento dell'ancora
backdrop-filter
- Segnali web essenziali
- Elemento
<details>
- Layout
- Moduli
- API Navigation
- Eventi del mouse e del cursore
- Rimuovere gli eventi di mutazione
@scope
scrollend
evento- API Storage Access
text-decoration
URLPattern
- API View Transition
- WebAssembly
- Compatibilità web
- WebRTC
- Modalità di scrittura
Inoltre, come negli anni precedenti, esiste un insieme di aree di indagine. Si tratta di aree in cui non disponiamo di informazioni o test sufficienti per includerle come area di interesse, ma il gruppo ritiene che sia necessario fare un po' di lavoro per portarle a un livello in cui possiamo includerle.
- Test di accessibilità
- Test dell'API Gamepad
- Test per dispositivi mobili
- Test sulla privacy
- WebVTT
Siamo entusiasti di tutte queste funzionalità e dei miglioramenti che il progetto di quest'anno apporterà alla piattaforma. Come lo scorso anno, il progetto renderà disponibile un intero insieme di elementi come nuovi valori di riferimento. Questo post fornisce ulteriori informazioni su alcune delle funzionalità elencate, con link a informazioni per saperne di più.
Puoi seguire la situazione nella dashboard di Interop 2025 all'indirizzo wpt.fyi/interop-2025 e, man mano che le funzionalità diventano Disponibile come nuovo valore di riferimento, verranno visualizzate anche nell'elenco di riferimento 2025 su webstatus.dev.

CSS e UI
Molte delle funzionalità incluse in Interop 2025 sono quelle che hai segnalato come importanti nel sondaggio sullo stato del CSS 2024. Ti aiuteranno a creare esperienze utente più belle e performanti.
Posizionamento dell'ancora
Questa funzionalità ti consente di ancorare un elemento posizionato a un'ancora ed è particolarmente utile quando vengono visualizzati i popup.
L'inclusione di questa funzionalità in Baseline semplifica notevolmente la creazione di interfacce utente, senza dover fare affidamento su librerie di terze parti. Scopri di più nella nostra documentazione sul posizionamento degli ancoraggi, e anche su MDN - Posizionamento degli ancoraggi CSS.
Transizioni tra visualizzazioni dello stesso documento
Quest'anno sono incluse anche le transizioni di visualizzazione, in particolare quelle all'interno dello stesso documento, e la proprietà CSS view-transition-class
.
Scopri di più sulle transizioni di visualizzazione in Transizioni di visualizzazione all'interno dello stesso documento per applicazioni a pagina singola e nella documentazione MDN per le transizioni di visualizzazione.
La proprietà backdrop-filter
La proprietà
backdrop-filter
è stata disponibile come baseline di recente da settembre 2024. Ti consente di creare effetti dietro i tuoi contenuti. Ad esempio, per sfocare o creare effetti che potresti aspettarti di trovare solo in un'applicazione di grafica.
Nonostante sia per lo più interoperabile, puoi vedere dai test non riusciti per
backdrop-filter
che
esisteno bug e problemi in queste implementazioni. Anche se questi problemi potrebbero non essere un problema per tutti, sappiamo che molti di voi li riscontrano. Sarebbe fantastico far funzionare bene questa funzionalità.
Elemento <details>
L'elemento <details>
è un widget di informativa che può essere espanso per mostrare contenuti aggiuntivi. L'elemento <details>
stesso è di tipo Base di riferimento ampiamente disponibile.
Tuttavia, sono state aggiunte di recente una serie di funzionalità correlate che rendono <details>
più utile.
- Gli pseudo elementi CSS
::marker
e::details-content
. - Utilizzo di
content-visibility
per attivare/disattivare i contenuti anzichédisplay
. - Espansione automatica dell'elemento
<details>
con le corrispondenze di Trova nella pagina. - L'attributo
hidden="until-found"
, che nasconde un elemento finché non viene trovato utilizzando la ricerca nella pagina del browser o non si accede direttamente seguendo un frammento di URL.
La regola at @scope
CSS
La regola at @scope
ti consente di limitare l'ambito dei selettori a un sottoalbero del DOM o persino di scegliere tra un limite superiore e uno inferiore nell'albero. Ad esempio, il CSS seguente seleziona solo gli elementi <img>
all'interno di un elemento con una classe .card
.
@scope (.card) {
img {
border-color: green;
}
}
Nell'esempio seguente vengono utilizzati un limite superiore e uno inferiore. L'elemento <img>
viene selezionato solo se si trova tra l'elemento con una classe .card
e anche all'esterno dell'elemento con una classe .card__content
.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
Trova altri esempi di come utilizzare @scope
in Limitare la copertura dei selettori con la regola at @scope
CSS e nella documentazione di @scope
su MDN.
L'evento scrollend
Senza l'evento scrollend
, non esiste un modo affidabile per rilevare il completamento di uno scorrimento. Il meglio che puoi fare è utilizzare setTimeout()
per controllare se la scorrimento
si è interrotta per un periodo di tempo. È più simile a un evento di interruzione dello scorrimento, non
a un evento di fine dello scorrimento.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Con l'evento scrollend
, il browser esegue tutta questa difficile valutazione per te.
document.onscrollend = event => {
// ...
}
Guarda altri esempi in Scrollend, un nuovo evento JavaScript e anche nella documentazione MDN per scrollend
.
La proprietà text-decoration
La proprietà
text-decoration
è una scorciatoia per text-decoration-line
, text-decoration-color
,
text-decoration-style
e text-decoration-thickness
. È considerata di riferimento
Ampia disponibilità, tuttavia in Safari l'unica proprietà abbreviata senza prefisso che
funziona è text-decoration-line
. È questo il problema che verrà risolto nel corso del 2025.
Modalità di scrittura
La proprietà CSS writing-mode
ha una serie di valori possibili, molti dei quali sono progettati per impaginare sceneggiature visualizzate in verticale. A volte, però, vuoi disporre il testo verticalmente nell'ambito di un design, anziché per motivi di supporto della lingua. I valori sideways-lr
e sideways-rl
sono progettati per questo, ma hanno sofferto di una scarsa compatibilità con i browser. Il problema dovrebbe essere risolto nel corso del 2025.
Inoltre, sono incluse le proprietà CSS logiche overflow-inline
e overflow-block
. In questo modo, puoi controllare cosa succede quando i contenuti superano le caselle, indipendentemente dalla modalità di scrittura.
Segnali web essenziali
Web Vitals può aiutarti a quantificare l'esperienza di utilizzo del tuo sito e a individuare opportunità di miglioramento. L'iniziativa Web Vitals ha lo scopo di semplificare il panorama e aiutare i siti a concentrarsi sulle metriche più importanti, ovvero i Segnali web essenziali.
Interop 2025 include le metriche Largest Contentful Paint (LCP) e Interaction to Next Paint (INP) implementando l'API LargestContentfulPaint e l'API Event Timing su tutti i browser. La metrica Cumulative Layout Shift (CLS) non rientra nell'ambito.
API LCP
API Event Timing (per INP)
WebAssembly (Wasm)
L'API WebAssembly ti consente di caricare codice WebAssembly, un formato di istruzioni binarie portatile. Ad esempio, puoi eseguire un'intera applicazione di blog, inclusi tutti i requisiti del server, nel browser.
Quest'anno, il lavoro si concentrerà sulle seguenti funzionalità:
- Funzioni predefinite di stringa JavaScript: per fare in modo che le funzioni predefinite di stringa di WebAssembly rispecchino un sottoinsieme dell'API String di JavaScript in modo che possano essere richiamate senza codice di collegamento JavaScript.
- Integrazione di buffer ridimensionabili: per integrare WebAssembly nel codice JavaScript che utilizza buffer ridimensionabili.
Rimozioni di funzionalità
Quest'anno il progetto include una rimozione dalla piattaforma. Gli eventi di mutazione sono stati ritirati e sostituiti con l'API Mutation Observer, molto più performante e ampiamente disponibile come valore di riferimento. Chrome ha rimosso questi eventi in Chrome 126 e questa area di attenzione è finalizzata a rimuoverli da tutti i browser.
Per conoscere la cronologia e il motivo della rimozione di questi eventi, consulta Gli eventi di mutazione verranno rimossi da Chrome.
Scopri di più
Le descrizioni dell'elenco completo delle funzionalità sono disponibili nel file README del progetto. Leggi anche i post delle altre aziende che lavorano a Interop 2025.