Sempre nel 2023, tutti i principali fornitori di browser e gli altri stakeholder lavoreranno insieme per risolvere i principali problemi di compatibilità dei browser.
Nel 2023, tutti i principali fornitori di browser e le altre parti interessate stanno nuovamente collaborando per risolvere i principali problemi di compatibilità dei browser. L'impegno è iniziato su questa scala con l'Interoperabilità 2022. Puoi scoprire i risultati che abbiamo ottenuto insieme nel post di fine anno. Tutte le parti coinvolte ritengono che questo contribuirà a migliorare l'esperienza degli sviluppatori web di tutto il mondo. Quest'anno, per la prima volta, abbiamo annunciato pubblicamente la procedura di proposta e abbiamo ricevuto molti ottimi suggerimenti da framework, grandi aziende, fornitori di browser e sviluppatori di tutto il mondo.
Aree di interesse di Interop 2023
Questa volta abbiamo ben 26 aree di interesse, descritte dettagliatamente nel documento del progetto. Questi sono, in ordine alfabetico:
- Immagine del bordo in CSS
- Spazi colore e funzioni in CSS
- Query container in CSS
- Contenimento in CSS
- Pseudo-classi CSS
- Proprietà personalizzate in CSS
- Flexbox
- Rilevamento delle funzionalità dei caratteri e tavolozze
- Moduli
- Griglia
- :has()
- Inerte
- Mascheramento in CSS
- Funzioni matematiche in CSS
- Query supporti
- Moduli nei web worker
- Percorso di animazione nelle animazioni CSS
- Canvas fuori schermo
- Eventi relativi al puntatore e al mouse
- URL
- Web Compat 2023: un'area di interesse catchall per piccoli bug che causano problemi noti di compatibilità del sito
- Codec web (video)
- Componenti web
Puoi trovare informazioni dettagliate su tutte le aree di interesse in Test della piattaforma web in base a MDN Web Docs; tuttavia, eccone alcuni che pensiamo possano interessarti.
Query container
Le query sui container sono una richiesta principale da parte degli sviluppatori da molti anni e nel 2022 Chrome e Safari l'hanno distribuita. Firefox prevede di distribuire le query sui container in Firefox 110 e i test per questa area di interesse contribuiscono a garantire che le query sui container funzionino in modo affidabile tra i diversi browser e in base alle specifiche.
:con(...)
Gli sviluppatori hanno chiesto da molto tempo un selettore principale in CSS. La pseudo-classe :has() rende possibili molti dei casi d'uso per i selettori principali, oltre a selezionare un elemento di pari livello precedente rispetto a un elemento di riferimento. Ad esempio, in questo modo è possibile modificare lo stile di una figura con una didascalia in modo diverso rispetto a una figura che non lo ha. Scopri di più sui casi d'uso di has() in :has(), il selettore famiglia.
Proprietà personalizzate
Le proprietà personalizzate CSS, note anche come variabili CSS, consentono di definire un valore una sola volta in un foglio di stile e di riutilizzarlo in molte posizioni, riducendo la ripetizione. Ad esempio, puoi definire un colore o una dimensione del carattere comuni una volta sola in un foglio di stile e utilizzarli in tutti i componenti. Il supporto di base per le proprietà personalizzate è attivo nei browser da molto tempo. Interop 2023 si concentra sulla regola @property. @property rappresenta una registrazione di proprietà personalizzate in un foglio di stile, consentendo il controllo del tipo di proprietà, l'impostazione dei valori predefiniti e se la proprietà deve ereditare valori. Scopri di più in @property: come dare superpoteri alle variabili CSS.
Mascheramento CSS
Il mascheramento CSS fornisce metodi per applicare effetti di immagine, come quelli in un'applicazione grafica, utilizzando CSS. Il supporto delle varie proprietà di mascheramento è instabile, pertanto il mascheramento è più difficile del previsto. Quest'area di interesse aiuterà gli sviluppatori a utilizzare in sicurezza gli effetti delle creatività cross-browser. Scopri di più sull'applicazione di effetti alle immagini in questo articolo sul mascheramento delle immagini.
OffscreenCanvas
L'elemento <canvas> e l'API Canvas offrono un modo basato su script per disegnare elementi grafici sullo schermo. Tuttavia, questo può causare problemi di prestazioni, in quanto il lavoro viene completato sullo stesso thread dell'interazione dell'utente. OffscreenCanvas offre agli sviluppatori un canvas disaccoppiato dal DOM e dall'API Canvas. Gli sviluppatori possono anche eseguire attività di rendering in un web worker, separate dal thread principale. Scopri di più sui vantaggi in termini di prestazioni di OffscreenCanvas.
Eventi relativi al puntatore e al mouse
Gli eventi di puntamento vengono attivati quando si interagisce con una pagina utilizzando un mouse, una penna, uno stilo o un touchscreen. Gli eventi del mouse vengono attivati quando si utilizza un mouse, ma per motivi storici anche per il tocco. Questa area di interesse copre il comportamento dell'interazione del puntatore e del mouse con le pagine, incluso il modo in cui interagiscono con gli hit test e le aree di scorrimento. L'area di interesse per il 2023 esclude il tocco e lo stilo, a causa della mancanza di Web Platform Test in quest'area.
WebCodecs
L'API WebCodecs fornisce agli sviluppatori metodi per accedere ai singoli frame di video e a blocchi di audio. Consente l'accesso a codec già disponibili nel browser e a varie interfacce per l'interazione. L'articolo Elaborazione video con WebCodecs illustra come utilizzare l'API per decodificare e visualizzare singoli frame su un canvas.
Componenti web
Componenti web è un termine generico che descrive una serie di tecnologie utilizzate per creare componenti riutilizzabili, come Elementi personalizzati e Shadow DOM. Interop 2023 si concentrerà sul miglioramento dell'interoperabilità di queste tecnologie fondamentali.
Dashboard
Segui i progressi nel corso dell'anno nella dashboard di Interop 2023, dove puoi vedere i punteggi attuali e lo stato delle tue aree di interesse in tutti i principali motori dei browser.
I punteggi delle aree di interesse vengono calcolati in base alle percentuali di superamento del test. Se hai feedback o vuoi contribuire a migliorare WPT, segnala un problema per richiedere l'aggiornamento dell'insieme di test utilizzati per la valutazione del punteggio.
