Data di pubblicazione: 31 marzo 2025
È trascorso un altro mese e, dall'ultimo bollettino mensile di Baseline, sono successe molte cose. In questa edizione, riepilogheremo alcuni post che abbiamo pubblicato qui su web.dev, alcune funzionalità di Baseline appena rese disponibili e alcuni aggiornamenti degli strumenti della community.
È stata rilasciata la versione 0.6.0 di ESLint
Di recente abbiamo pubblicato un post sul lancio del supporto di ESLint per il linting CSS. Nell'ambito di questo lancio è stata inclusa una nuova regola ESLint (require-baseline) per eseguire il linting delle funzionalità CSS utilizzate nel progetto e verificare se raggiungono una soglia di base specifica.
Di recente, ESLint ha lanciato la versione 0.6.0 del pacchetto @eslint/css, che include un nuovo aggiornamento importante che rinomina la regola require-baseline in use-baseline. Sebbene questo aggiornamento possa sembrare di poco conto, migliora la leggibilità della regola. Questa release include anche altre funzionalità importanti e correzioni di bug, come la possibilità aggiunta della regola use-baseline di eseguire lint sui blocchi CSS nidificati. Se utilizzi una versione precedente di @eslint/css, dai un'occhiata a questo aggiornamento.
Come eseguire query sulla dashboard della piattaforma web
All'inizio del mese abbiamo pubblicato un post sulle query della dashboard della piattaforma web. È possibile eseguire query su questa dashboard nel relativo frontend, nonché tramite un'API HTTP. Questo può essere potenzialmente utile per gli strumenti di base di riferimento, in quanto puoi eseguire query sull'API per trovare funzionalità che hanno raggiunto una soglia di base di riferimento specifica.
Questa API può essere utile per gli strumenti in cui devi ottenere rapidamente informazioni su funzionalità specifiche. Ad esempio, puoi utilizzare questo tipo di strumenti per scrivere uno script che ti indichi in un determinato intervallo di tempo quali funzionalità sono diventate di recente disponibili come Base di riferimento o Ampiamente disponibili. Se ritieni che ti sia utile, dai un'occhiata al post.
Come considerare Baseline e i polyfill
La missione di Baseline è chiarire quali funzionalità puoi utilizzare in sicurezza, ma anche con questa maggiore chiarezza devi comunque pensare a come adottare le funzionalità in modo appropriato per le tue applicazioni web. I polyfill sono una parte importante di questo processo. La base di riferimento non prende in considerazione i polyfill per stabilire se le funzionalità sono disponibili di recente o ampiamente e non cerca di dirti se utilizzarle. Questa decisione è specifica per la tua applicazione, ma è un aspetto importante da considerare.
Di recente abbiamo pubblicato un post su come approcciarsi a Baseline e ai polyfill e riteniamo che fornisca un quadro utile su come utilizzarli. L'auspicio è che le funzionalità che diventano disponibili a livello di base o a livello generale riducano la necessità di utilizzare i polyfill. Non c'è dubbio che i polyfill siano strumenti utili nella cassetta degli attrezzi dello sviluppatore, ma hanno degli svantaggi: possono avere un impatto negativo sulle prestazioni del tuo sito web e, in alcuni casi, possono persino causare problemi di accessibilità. Ci auguriamo che questa guida ti aiuti a risolvere questo problema.
contenteditable="plaintext-only" è ora disponibile come valore di riferimento
L'attributo contenteditable di un elemento HTML consente all'utente di modificarne i contenuti come se fosse un campo di testo. Ciò significa, ad esempio, che puoi posizionare l'attributo su un elemento <p> e l'utente può interagire con esso come con un <textarea>. In alcuni casi d'uso, l'utilizzo di contenteditable offre vantaggi rispetto agli elementi di modulo standard.
Tuttavia, gli utenti incollano contenuti in elementi modificabili e questi contenuti possono contenere formattazione di testo avanzato, il che può creare un'esperienza frustrante per gli utenti che vogliono semplicemente incollare testo non formattato in un campo. La combinazione di attributo/valore contenteditable="plaintext-only" impedisce che ciò accada ed è stata recentemente resa disponibile come riferimento. Per scoprire di più, leggi il post dell'annuncio e scopri come offrire un'esperienza di modifica migliore agli utenti che vogliono semplicemente incollare del testo senza troppi fronzoli.
Intl.DurationFormat è ora disponibile come valore di riferimento
Probabilmente, a un certo punto della tua vita, hai visitato un sito web e hai visto un breve testo che indicava la durata del tempo fino a un determinato evento o dopo, spesso in una stringa come "2 giorni, 6 ore, 3 minuti". Questi dati sono utili per comunicare una serie di informazioni tempestive, ma spesso vengono forniti da una biblioteca. Inoltre, potresti voler generare queste informazioni in più lingue.
Inserisci Intl.DurationFormat, una funzionalità di internazionalizzazione che di recente è diventata di base e di nuova disponibilità. Con la classe Intl.DurationFormat, puoi passare un oggetto al relativo costruttore contenente le unità di tempo che vuoi formattare in una stringa e in quasi tutte le lingue che puoi immaginare:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
La parte interessante è che, se la tua applicazione si basa su una libreria per formattare stringhe come questa, a breve potrai farlo senza una libreria, risparmiando kilobyte per i tuoi utenti. Per ulteriori informazioni, leggi il post di annuncio relativo a Intl.DurationFormat e scopri come sfruttare questa nuova e pratica funzionalità.
Base di riferimento al W3C Breakouts Day 2025
Di recente, il W3C ha organizzato l'edizione 2025 del suo Breakouts Day, in cui i membri hanno presentato vari argomenti e è stata offerta una sessione utile su Baseline il 26 marzo.
Se non hai mai utilizzato Baseline, questa sessione offre una panoramica rapida. Copre le nozioni di base del baseline, come i concetti di Nuovo e Ampiamente disponibile, ma illustra anche in che modo queste definizioni vengono determinate dai dati, a partire da browser-compat-data fino ai dati web-features che ci aiutano a capire quali funzionalità si trovano a quale soglia del baseline.
Se hai perso questa sessione, non preoccuparti. Le slide della sessione sono già disponibili, quindi dai un'occhiata se la curiosità ti assale.
Ecco fatto!
Questa edizione del notiziario mensile non segna solo la fine del mese, ma anche del trimestre. Se hai perso le versioni precedenti del riepilogo, consulta quelle di gennaio e febbraio per scoprire tutto ciò che è successo con Baseline nel primo trimestre di quest'anno. Come sempre, comunicaci se abbiamo perso qualcosa di relativo al benchmark e ci assicureremo che venga acquisito in una versione futura. Ci vediamo tra un mese.