Novità per il web

Rachel Andrew

Data di pubblicazione: 20 maggio 2025

Alla conferenza principale di Google I/O 2025, la sezione Novità del web ha condiviso tutti gli annunci di Baseline, oltre a dare un'occhiata ad alcune delle funzionalità che sono entrate a far parte di Baseline quest'anno. È stato un anno fantastico per il web e per Baseline. Questo post è un riepilogo di tutto ciò che è stato menzionato, con tutti i link per saperne di più.

La dashboard della piattaforma web e le funzionalità web

Nel 2024 abbiamo annunciato il lancio iniziale della dashboard della piattaforma web, che utilizza il set di dati delle funzionalità web, consentendoti di esplorare tutte le funzionalità che fanno parte di Baseline.

I dati sulle funzionalità web sono ora completi, con tutte le funzionalità della piattaforma mappate. Man mano che nuove funzionalità vengono aggiunte a Baseline ogni mese, i dati vengono aggiornati e tutto ciò viene visualizzato nella dashboard.

Strumenti per aiutarti a scoprire il tuo target di base

Anche se potresti basare la tua policy di supporto del browser sul target mobile di Baseline Widely available, come l'agenzia britannica Clearleft, puoi anche adottare un target fisso basato su un anno di Baseline. Ora puoi utilizzare i tuoi dati utente, insieme ai dati delle funzionalità web, per determinare il target migliore per te.

L'anno scorso, in occasione di I/O, abbiamo annunciato che RUMvision avrebbe implementato Baseline nel suo prodotto e questa integrazione è ora disponibile.

Poiché utilizza i dati RUM, ti aiuta a identificare l'anno di riferimento da adottare in base a questi dati anziché a una media globale. Può anche aiutarti a capire se Baseline Widely available è la soluzione giusta per te.

Puoi anche utilizzare i dati di Google Analytics per vedere chiaramente la percentuale di utenti che supportano ogni target di base con il nuovo strumento di controllo della base di Google Analytics.

Questi sono solo due di una raccolta crescente di strumenti che ti aiutano a mappare i dati degli utenti reali a Baseline.

Il gruppo della community Web DX ha recentemente lanciato un'estensione per Netlify che mostra il supporto per diversi anni di Baseline e ampiamente disponibile sui tuoi siti per aiutarti a decidere cosa scegliere come target negli strumenti di compilazione. A breve saranno disponibili integrazioni con il prodotto RUM di Cloudflare Observatory e Contentsquare.

Integrare i dati con i tuoi strumenti

I dati delle funzionalità web sono aperti e disponibili per le tue integrazioni. Stiamo cercando di semplificare questa procedura.

Utilizza l'API Web Platform Dashboard o utilizza i dati delle funzionalità web direttamente dal pacchetto npm.

Ora puoi mappare le versioni del browser a una destinazione di base utilizzando il modulo baseline-browser-mapping del W3C WebDX Community Group. Questo modulo può essere utilizzato in un ambiente JavaScript lato server oppure scaricando file JSON o CSV aggiornati quotidianamente dal repository.

Questi dati includono mappature non solo per il set di browser di base, ma anche per browser downstream come Samsung Internet, Opera, UC Browser e Android WebView.

Scopri se le funzionalità sono supportate dal tuo target di base

Le informazioni di base sono ora disponibili nella maggior parte delle pagine di MDN e Can I Use. Puoi trovarle anche nella dashboard della piattaforma web e negli articoli di web.dev e CSS Tricks. Tuttavia, tutto ciò richiede di cercare assistenza. Sarebbe molto più utile visualizzare le informazioni di base nell'IDE durante la codifica e come parte di tutti gli altri strumenti che utilizzi.

Siamo felici di comunicarti che molti strumenti chiave ora hanno il supporto di Baseline integrato o facilmente integrabile.

browserslist-config-baseline

Molti strumenti come Babel e PostCSS utilizzano browserslist per determinare quali browser supportare.

Insieme al WebDX CG e ai membri della community, il team di Chrome ha contribuito al rilascio di un nuovo strumento chiamato browserslist-config-baseline. In questo modo puoi configurare i target di Browserslist in termini di base come ampiamente disponibili o anni di base.

In questo modo, qualsiasi strumento che accetta un target browserslist può ora essere espresso in termini di Baseline.

Scopri di più in Utilizzare Baseline con browserslist.

Base di riferimento nei linter: ESLint e Stylelint

L'utilizzo di Baseline con i linter è diventato possibile di recente con alcuni nuovi strumenti nello spazio dei linter, a partire da ESLint per CSS.

ESLint di base ha una regola use-baseline. Puoi impostare questo valore sul tuo target di base preferito e riceverai un avviso quando utilizzi funzionalità più recenti del tuo target. Puoi scegliere come risolvere questi avvisi: sostituendo la funzionalità con primitive o eliminando l'avviso di Linter, che è una soluzione perfettamente valida quando sai di utilizzare una funzionalità all'avanguardia in modo sicuro, ad esempio se si tratta di un miglioramento progressivo.

Per impostazione predefinita, ESLint non mostrerà avvisi se vengono utilizzate funzionalità più recenti all'interno dei blocchi @supports, poiché i browser non supportati non le valuteranno comunque.

Per le esigenze di linting HTML, è disponibile anche un plug-in della community chiamato html-eslint.

Stylelint supporta ufficialmente un plug-in chiamato stylelint-plugin-use-baseline. Questa regola si comporta esattamente come la regola ESLint per CSS, ma viene eseguita su Stylelint invece.

Molti linter hanno anche plug-in IDE, in modo da poter ricevere feedback immediati sullo stato di base durante la programmazione tramite sottolineature a zigzag.

Baseline in VS Code e JetBrains WebStorm

Molti IDE supportano da tempo un modo per passare il mouse sopra una funzionalità nell'editor e visualizzare l'elenco delle versioni del browser supportate.

Tuttavia, può essere piuttosto difficile capire se questa funzionalità è effettivamente sicura da usare. Devi analizzare mentalmente se mancano browser principali nell'elenco e quanto è recente la versione del browser.

Per risolvere questo problema, abbiamo collaborato con l'IDE più popolare utilizzato da milioni di sviluppatori web, VS Code, per integrare i dati di base direttamente in queste schede al passaggio del mouse.

Ora puoi passare il mouse sopra una funzionalità e scoprire se è considerata di base e per quanto tempo, oppure se ci sono browser principali che non la implementano ancora completamente.

Le funzionalità supportate includono proprietà CSS, elementi HTML e attributi HTML. Scopri di più in Visual Studio Code ora supporta Baseline.

Questa integrazione significa che anche gli IDE basati su VS Code trarranno vantaggio da queste schede al passaggio del mouse.

Inoltre, siamo lieti di annunciare che JetBrains sta implementando le schede al passaggio del mouse nel suo IDE JavaScript e TypeScript WebStorm.

Il web sta migliorando più velocemente che mai

Ci auguriamo che Baseline ti aiuti a sfruttare il fatto che il web interoperabile sta migliorando più velocemente che mai.

Puoi utilizzare la dashboard della piattaforma web per visualizzare tutte le funzionalità che sono diventate Baseline di recente negli ultimi 12 mesi, a partire dalla conferenza Google I/O 2024.

Inoltre, ci sono diverse funzionalità che puoi considerare come Baseline Newly available molto presto, in quanto sono incluse nel progetto Interop 2025. Puoi leggere tutte le funzionalità incluse in Interop 2025: un altro anno di miglioramenti della piattaforma web.

Modalità di scrittura laterale

Abbiamo già visto una funzionalità diventare Baseline Newly available, ovvero i valori sideways-rl e sideways-lr per la proprietà CSS writing-mode. Se utilizzi una modalità di scrittura verticale esclusivamente per scopi di layout, è probabile che i valori laterali siano quelli da utilizzare.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Posizionamento dell'ancoraggio

Posizionamento dell'ancoraggio inviato in Chrome 125. Ti consente di collegare la posizione di un elemento a un ancoraggio, ad esempio quando apri una descrizione comando con un pulsante.

Ora è incluso in Interop 2025, quindi dovrebbe entrare a far parte di Baseline quest'anno.

Core Web Vitals: LCP e INP

API LCP

API Event Timing (per INP)

Le metriche Web Vitals possono aiutarti a quantificare l'esperienza di utilizzo del tuo sito e a individuare opportunità di miglioramento. L'iniziativa Web Vitals mira a 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 nei browser.

Miglioramenti all'elemento <details>

L'elemento <details> stesso è già ampiamente disponibile nella baseline. È stato incluso in Interop 2025 perché ci sono una serie di funzionalità che rendono i widget di divulgazione con <details> più utili.

L'elemento <details> contiene un elemento <summary>, ovvero la parte visibile della pagina quando l'elemento <details> è compresso. Al di fuori di <summary> si trovano i contenuti dell'elemento <details>, che sono nascosti finché l'utente non fa clic sul riepilogo.

Uno degli elementi che verranno resi interoperabili durante Interop 2025 è la possibilità di nascondere i contenuti utilizzando content-visibility anziché display, il che significa che, se non espansi, i contenuti non verranno visualizzati.

Anche l'elemento pseudo ::marker fa parte del lavoro di Interop 2025. Lo pseudo-elemento ::marker ti consente di applicare uno stile al triangolo di visualizzazione dell'elemento <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Poi, un altro pseudo-elemento: ::details-content.

::details-content rappresenta i contenuti, ovvero la parte dell'elemento dei dettagli che si espande e si comprime e che puoi personalizzare.

[open]::details-content {
  border: 5px dashed hotpink;
}

Sono stati apportati anche alcuni miglioramenti, come l'espansione automatica dell'elemento <details> con le corrispondenze di ricerca nella pagina e l'inserimento del valore until-found dell'attributo HTML hidden in Baseline Newly available. Questo nasconde un elemento finché non viene trovato utilizzando la ricerca Trova nella pagina del browser o finché non viene raggiunto direttamente seguendo un frammento di URL.

CSS @scope

La regola CSS @scope ti consente di limitare la copertura dei selettori. Se imposti una radice di ambito con @scope, tutte le regole di stile nidificate all'interno della regola at si applicano solo a quell'albero DOM.

Ad esempio, se vuoi scegliere come target solo gli elementi <img> all'interno di un elemento con una classe .card, .card diventa la radice di ambito.

@scope (.card) {
    img {
        border-color: green;
    }
}

Scopri di più in Limitare la copertura dei selettori con la regola CSS @scope.

scrollend

Un'altra funzionalità che riduce la complessità e migliora le interfacce di scorrimento è scrollend. Senza l'evento scrollend, non esiste un modo affidabile per rilevare che uno scorrimento è stato completato.

// before scrollend
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 => {…}

Vedi altri esempi in Scrollend, un nuovo evento JavaScript.

Transizioni di visualizzazione nello stesso documento

Infine, ma non per importanza, le transizioni di visualizzazione fanno parte di Interop 2025. Il lavoro prevede transizioni di visualizzazione nello stesso documento, quindi quelle per le app a una sola pagina e anche le classi di transizione di visualizzazione.

Segui la dashboard di Interop 2025 per vedere come si sta sviluppando il progetto nel corso dell'anno.

Le funzionalità incluse in Interop 2025 non saranno le uniche a far parte di Baseline quest'anno, ma la loro inclusione nei progetti ci dà un segnale abbastanza chiaro che sono prioritarie e in arrivo a breve.

L'esperimento è stato appena avviato

È stato un anno entusiasmante per Baseline e abbiamo fatto molta strada rispetto agli annunci dell'anno scorso. Ora siamo in una posizione in cui il backfilling dei dati delle funzionalità web è completo. Ciò ha aperto le porte e consentito la creazione di strumenti per sviluppatori. Siamo solo all'inizio e se hai un prodotto o uno strumento open source che potrebbe trarre vantaggio dall'inclusione di questi dati, non esitare a contattarci.

Tieni d'occhio web.dev, perché continueremo a pubblicare annunci sui nuovi strumenti e tutorial per aiutarti a sfruttare al meglio tutto ciò che il web ha da offrire.