Funzionalità di riferimento che puoi usare oggi

Scopri solo alcune delle funzionalità che fanno parte di Baseline.

Il web è in continua evoluzione e i browser vengono aggiornati costantemente per offrire agli sviluppatori nuovi strumenti per innovare sulla piattaforma. Gli elementi che in precedenza richiedevano librerie helper diventano parte della piattaforma web e sono supportati su tutti i browser, oltre a modi più brevi o più semplici per programmare gli elementi di progettazione.

Questa evoluzione e questo adattamento costanti sono utili, ma possono anche generare confusione. Può essere difficile navigare tra tutti questi aggiornamenti. In qualità di sviluppatori, ci poniamo domande come: "Quando tutti i motori dei browser supporteranno questa nuova funzionalità?" "Quando posso iniziare a utilizzare queste funzionalità nel mio codice di produzione?" "Per quanto tempo dovremmo supportare i browser meno recenti?"

La vera risposta è "dipende". Ciò di cui hai bisogno e ciò che è utilizzabile dipende davvero dalla base utenti, dallo stack tecnico, dalla struttura del team e dai dispositivi supportati. Tuttavia, una cosa che siamo tutti d'accordo è che l'attuale panorama del web può rendere difficile prendere queste decisioni.

Il team di Chrome sta collaborando con altri motori di browser e con la community del web per fare chiarezza. Ciò include il nostro lavoro su progetti come Interop 2023 che contribuiscono a migliorare l'interoperabilità di una serie di funzionalità chiave. Ma cosa succede agli elementi approdati negli ultimi anni? Le funzionalità sperimentali che abbiamo appreso due anni fa sono pronte per essere utilizzate?

In questo post, voglio evidenziare alcune funzionalità ora disponibili per tutti i principali motori dei browser per le ultime due versioni principali. Questo è il punto limite in cui riteniamo che la maggior parte degli sviluppatori si sentirà sicura da usare ed è l'insieme di funzionalità che stiamo chiamando Baseline. Per saperne di più, consulta l'annuncio relativo a Baseline qui.

L'elemento della finestra di dialogo

L'elemento <dialog> è un nuovo elemento HTML per creare prompt di dialogo come popup e modali.

Per utilizzarlo, definisci l'elemento modale, quindi apri la finestra di dialogo chiamando il metodo showModal() sull'elemento della finestra di dialogo.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

Essendo un elemento HTML nativo, sono integrate funzionalità come la gestione dell'elemento attivo, il monitoraggio delle schede e il mantenimento del contesto dell'impilamento. Per ulteriori informazioni, consulta Creazione di un componente della finestra di dialogo.

Singole proprietà della trasformazione CSS

L'utilizzo delle trasformazioni CSS è un modo efficace per aggiungere uno spostamento al tuo sito.
Forse sai come scrivere trasformazioni CSS con tre proprietà su una sola riga.
Con le singole proprietà di trasformazione, ora puoi specificare le proprietà di trasformazione singolarmente. Ciò è utile quando devi scrivere animazioni complesse con fotogrammi chiave.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Per una spiegazione approfondita di questa modifica, leggi l'articolo Controllo più granulare sulle trasformazioni CSS con singole proprietà di trasformazione.

Nuove unità area visibile

Sui dispositivi mobili, le dimensioni dell'area visibile sono influenzate dalla presenza o dall'assenza di barre degli strumenti dinamiche.
A volte sono visibili una barra degli URL e una barra degli strumenti di navigazione, ma altre volte queste barre degli strumenti sono completamente retratte.
Le dimensioni effettive dell'area visibile variano a seconda che le barre degli strumenti siano visibili o meno.
Le nuove unità dell'area visibile, come svh e lvh, offrono agli sviluppatori web un controllo più preciso durante la progettazione per i dispositivi mobili. Per saperne di più, consulta l'articolo Le unità dell'area visibile grande, piccola e dinamica.

Testo integrale in JavaScript

In passato, per creare una copia approfondita di un oggetto senza riferimento all'oggetto originale, un popolare compromesso era JSON.stringify combinato con JSON.parse. Si tratta di un attacco così comune che V8 (il motore JavaScript di Chrome) migliora in modo aggressivo le prestazioni di questo trucchetto. Tuttavia, questo attacco con structuredClone non ti serve più.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Per ulteriori dettagli, consulta Copia approfondita in JavaScript utilizzandostructuredClone.

La pseudo-classe :focus-visible

In qualità di sviluppatori web, tutti conosciamo l'"anello di messa a fuoco" che viene visualizzato quando navighi in una pagina con una tastiera o fai clic su elementi di input. Si tratta di una funzionalità necessaria ai fini dell'accessibilità, ma a volte ostacola il design visivo di diversi utenti. La pseudo-classe CSS :focus-visible controlla se il browser ritiene che l'elemento attivo debba essere visibile. Ora puoi specificare stili solo per quando lo stato attivo deve essere visibile.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Per ulteriori informazioni, consulta la sezione Focus su Scopri CSS.

Interfaccia TransformStream

L'interfaccia TransformStream dell'API Streams consente di eseguire il reindirizzamento dei flussi l'uno all'altro.

Ad esempio, puoi trasmettere dati da un luogo e poi comprimerli in un'altra posizione man mano che i dati vengono trasmessi. L'articolo Richieste di flussi di dati con l'API fetch illustra questo caso d'uso di esempio.

Conclusione

Esistono molte altre funzionalità che di recente sono diventate interoperabili e stabili per l'uso sulla piattaforma web. In futuro lavoreremo con il Gruppo della community WebDX per chiarire questi set di funzionalità di Baseline. Per i dettagli aggiornati, visita il sito web.dev/baseline.

Se vuoi essere sempre aggiornato, il nostro team pubblica articoli quando una funzionalità diventa interoperabile e aggiornamenti mensili sui cambiamenti della piattaforma web, dalle funzionalità sperimentali alle nuove interoperabili.

Siamo sempre curiosi di sapere se quello che stiamo facendo ti aiuta o se hai bisogno di diversi tipi di assistenza, quindi contattaci al WebDX Community Group.