Mostra lo stato di riferimento su post e presentazioni del blog

Data di pubblicazione: 23 ottobre 2024

In questo post scoprirai come utilizzare il nuovo componente web <baseline-status> sul tuo sito e i loghi di Baseline nelle presentazioni, ogni volta che scrivi o parli delle funzionalità della piattaforma web.

La maggior parte degli sviluppatori ha cercato una soluzione a un problema di sviluppo web, ha trovato un articolo che descrive la soluzione perfetta, per poi rendersi conto alla fine che è disponibile solo in un browser. Oppure entusiasmarti per una funzionalità descritta da un relatore di una conferenza, per poi scoprire che è sperimentale. Volevamo migliorare questo aspetto sui nostri siti per sviluppatori di Chrome e negli ultimi due anni abbiamo aggiunto ai nostri post i dati sulla compatibilità di MDN.

Tuttavia, la linea di base rende le cose ancora più chiare. Anziché controllare le singole versioni del browser, puoi verificare se una funzionalità è disponibile su larga scala come base di riferimento e quindi pronta per essere utilizzata senza problemi. Oppure scopri che è Baseline Newly disponibile e quindi interoperabile, ma come nuova funzionalità potresti voler prendere in considerazione strategie di fallback. Qui su web.dev abbiamo iniziato ad aggiungere un nuovo componente dello stato della linea di base ad alcune delle nostre pagine. Puoi visualizzarlo nel post del blog relativo a font-size-adjust CSS.

Il componente che mostra questa regolazione delle dimensioni del carattere è Nuova disponibilità di riferimento.
Il componente nel post relativo alla regolazione delle dimensioni dei caratteri.

Aggiungere il componente al sito

Il componente web non è solo per noi. Siamo lieti di condividere con te il componente<baseline-status>. Puoi utilizzarlo per mostrare lo stato del benchmark nei contenuti che crei. Il componente può essere installato da npm o precompilato da una CDN. Leggi le istruzioni per l'installazione. Una volta installata, mostra lo stato di una funzionalità come mostrato nel seguente codice HTML perfont-size-adjust.

<baseline-status featureId="font-size-adjust"></baseline-status>

Il componente verrà quindi aggiornato automaticamente quando una funzionalità passa da disponibilità limitata a disponibile di recente e poi a disponibile a livello di rete.

Trova featureId

Il featureId passato nel componente è il nome della caratteristica nel repository di funzionalità web. Il componente ottiene lo stato della funzionalità dai dati raccolti tramite il progetto di funzionalità web.

Aggiungere loghi di riferimento

Se stai pubblicando qualcosa su carta, in formato PDF o lo stai presentando a una conferenza, è probabile che i loghi siano utili per mostrare lo stato in quel momento. La dashboard Stato della piattaforma web può aiutarti a controllare lo stato di riferimento di qualsiasi funzionalità.

Due loghi verdi con la parola Baseline, mostrati su uno sfondo bianco e nero.
Il logo Baseline in modalità Luce e Buio.

I loghi di base sono concessi in licenza per l'utilizzo in tutti i tuoi materiali. Scaricali in formato PNG e SVG.

Facci sapere dove utilizzi Baseline

Ci piacerebbe sapere dove viene utilizzato Baseline. Crea una PR e aggiungi un link al punto in cui lo hai utilizzato per il valore di riferimento in produzione.

Hai altre idee di integrazione?

Hai un'idea per integrare Baseline in qualche altro modo? Forse hai uno strumento per sviluppatori che potrebbe includere queste informazioni o un prodotto che potrebbe trarre vantaggio dalla possibilità di condividere la versione di riferimento utilizzata dal pannello di amministrazione. Solleva un problema con le tue idee saremo lieti di aiutarti.