Funzionalità di riferimento che puoi usare oggi

Scoprire solo alcune delle funzionalità di Baseline.

Mariko Kosaka

Il web è in continua evoluzione e i browser si aggiornano costantemente per offrire agli sviluppatori nuovi strumenti per innovare sulla piattaforma. Elementi che in precedenza richiedevano librerie helper diventano parte della piattaforma web e supportati da tutti i browser, insieme a modalità più brevi o più semplici per programmare elementi di progettazione.

Questa costante evoluzione e questo adattamento sono utili, ma possono anche creare confusione. Può essere difficile gestire tutti questi aggiornamenti. In qualità di sviluppatori, ci poniamo domande quali: "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 risposta vera è "dipende". Ciò che è necessario e ciò che può essere utilizzato dipende in realtà dalla base utenti, dallo stack tecnico, dalla struttura del team e dai dispositivi supportati. 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 del browser e con la community web per fare chiarezza. Ciò include il nostro lavoro su progetti come Interop 2023, che contribuisce a migliorare l'interoperabilità di un insieme di funzionalità chiave. E per quanto riguarda gli elementi disponibili negli ultimi anni? Le funzionalità sperimentali che abbiamo imparato due anni fa sono pronte per l'uso?

In questo post voglio evidenziare alcune funzionalità che sono ora disponibili per tutti i principali motori dei browser per le due versioni principali precedenti. Questo è il punto limite in cui riteniamo che la maggior parte degli sviluppatori ritenga che una funzionalità sia sicura da usare ed è l'insieme di funzionalità che chiamiamo Baseline. Per ulteriori informazioni, leggi l'annuncio relativo a Baseline qui.

L'elemento della finestra di dialogo

L'elemento <dialog> è un nuovo elemento HTML per creare richieste di finestre di dialogo come popup e finestra modale.

Supporto dei browser

• 37
• 79
• 98
• 15,4

Origine

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, funzionalità come la gestione dello stato attivo, il monitoraggio delle schede e la conservazione del contesto di sovrapposizione sono integrate. Per saperne di più, consulta Creazione di un componente di una finestra di dialogo.

Singole proprietà di trasformazione CSS

L'utilizzo delle trasformazioni CSS è un modo efficace per aggiungere un movimento al sito.
Potresti avere familiarità con la scrittura di trasformazioni CSS con tre proprietà in una riga.
Con le proprietà di trasformazione individuali, ora puoi specificarle singolarmente. Ciò è utile quando scrivi animazioni di fotogrammi chiave complesse.

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

Supporto dei browser

• 104
• 104
• 72
• 14,1

Origine

Per una spiegazione approfondita di questa modifica, leggi Controllo granulare più fine delle trasformazioni CSS con proprietà di trasformazione individuali.

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 hai una barra degli URL e una barra degli strumenti di navigazione visibili, ma a volte queste barre degli strumenti sono completamente ritirate.
Le dimensioni effettive dell'area visibile saranno diverse a seconda che le barre degli strumenti siano visibili o meno.
Le nuove unità visibili 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à aree visibili grandi, piccole e dinamiche.

Supporto dei browser

• 108
• 108
• Guida introduttiva
• 15,4

Deep copy in JavaScript

In passato, per creare una copia approfondita di un oggetto senza alcun riferimento all'oggetto originale, una compromissione molto popolare era JSON.stringify combinata con JSON.parse. Si trattava di un attacco talmente comune che V8 (il motore JavaScript di Chrome) ha migliorato in modo aggressivo le prestazioni di questo trucco. Tuttavia, questo hack non ti serve più con structuredClone.

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

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

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

Supporto dei browser

• 98
• 98
• 94
• 15,4

Origine

Per maggiori dettagli, consulta Deepcopying in JavaScript usando structuredClone.

La pseudo-classe :focus-visible

Come sviluppatori web, conosciamo tutti l'"anello di messa a fuoco" visualizzata quando navighi in una pagina con una tastiera o fai clic sugli elementi di input. È una caratteristica necessaria per l'accessibilità, ma a volte ostacola il design visivo per utenti diversi. La pseudo-classe CSS :focus-visible controlla se il browser ritiene che lo stato attivo debba essere visibile. Ora puoi specificare gli 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;
}

Supporto dei browser

• 86
• 86
• 85
• 15,4

Origine

Per saperne di più, consulta la sezione Focus sull'apprendimento CSS.

L'interfaccia TransformStream

L'interfaccia TransformStream dell'API Streams consente di indirizzare i flussi l'uno all'altro.

Ad esempio, puoi inviare un flusso di dati da una posizione e poi comprimerlo a un'altra posizione man mano che i dati vengono trasmessi. L'articolo Richieste di streaming con l'API fetch illustra questo caso d'uso di esempio.

Supporto dei browser

• 67
• 79
• 102
• 14,1

Origine

Conclusione

Esistono molte altre funzioni che recentemente sono diventate interoperabili e stabili per l’uso sulla piattaforma web. In futuro collaboreremo con il WebDX Community Group per fare chiarezza su questi insiemi di funzionalità di riferimento. Per i dettagli aggiornati, visita la pagina web.dev/baseline.

Per gli aggiornamenti, il nostro team pubblica articoli quando una funzionalità diventa interoperabile e aggiornamenti mensili su ciò che accade sulla piattaforma web, dalle funzionalità sperimentali a quelle appena interoperabili.

Siamo sempre curiosi di sapere se ciò che stiamo facendo è d'aiuto o se hai bisogno di diversi tipi di supporto, quindi contattaci all'indirizzo WebDX Community Group.