Funzionalità di riferimento che puoi usare oggi

Scoprire solo alcune delle funzionalità di Baseline.

Mariko Kosaka

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 di supporto fanno ora parte della piattaforma web e sono supportati su tutti i browser, insieme a metodi più brevi o semplici per codificare gli elementi di design.

Sebbene questa evoluzione e adattamento costante sia utile, può anche creare confusione. Può essere difficile gestire 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 risposta vera è "dipende". Ciò che è necessario e ciò che è utilizzabile dipende dalla tua base utenti, dalla tua tecnologia, 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 collabora con altri motori di browser e con la community web per fare chiarezza. Sono inclusi i nostri progetti come Interop 2023, che contribuiscono a migliorare l'interoperabilità di un insieme di funzionalità chiave. E le funzionalità introdotte negli ultimi anni? Le funzionalità sperimentali di cui abbiamo parlato 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 di taglio in cui riteniamo che la maggior parte degli sviluppatori ritenga che una funzionalità sia sicura da usare ed è il set di funzionalità che chiamiamo Base. Per saperne di più, consulta l'annuncio relativo a Baseline qui.

L'elemento dialog

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

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>

Poiché si tratta di un elemento HTML nativo, sono integrate funzionalità come la gestione dell'attenzione, il monitoraggio delle schede e il mantenimento del contesto di impilamento. Per saperne di più, leggi l'articolo Creare un componente di dialogo.

Singole proprietà CSS transform

L'utilizzo delle trasformazioni CSS è un modo efficace per aggiungere un movimento al tuo sito.
Potresti avere dimestichezza con la scrittura di trasformazioni CSS con tre proprietà in una riga.
Con le proprietà di trasformazione individuali, ora puoi specificare le proprietà di trasformazione 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 dettagliata di questa modifica, leggi l'articolo Controllo più granulare delle trasformazioni CSS con singole proprietà di trasformazione.

Nuove unità di 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 a 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à di visualizzazione come svh e lvh offrono agli sviluppatori web un maggiore controllo durante la progettazione per il mobile. Per scoprire di più, consulta l'articolo Unità di visualizzazione grandi, piccole e dinamiche.

Supporto dei browser

• 108
• 108
• 101
• 15,4

Copia profonda in JavaScript

In passato, per creare una copia approfondita di un oggetto senza alcun riferimento all'oggetto originale, un hack molto utilizzato era JSON.stringify combinato con JSON.parse. Si trattava di un hack così comune che V8 (il motore JavaScript di Chrome) ha migliorato in modo aggressivo le prestazioni di questo trucco. Tuttavia, con structuredClone non hai più bisogno di questo trucco.

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 Eseguire la copia profonda in JavaScript utilizzando structuredClone.

La pseudo-classe :focus-visible

In qualità di sviluppatori web, conosciamo tutti 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 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 ulteriori informazioni, consulta la sezione sull'attenzione in Impara CSS.

Interfaccia TransformStream

L'interfaccia TransformStream dell'API Streams consente di incanalare gli stream tra loro.

Ad esempio, puoi trasmettere i dati da un luogo, quindi comprimerli in un'altra posizione man mano che 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

Di recente, molte altre funzionalità sono diventate interoperabili e stabili per l'utilizzo sulla piattaforma web. In futuro, collaboreremo con il gruppo della community WebDX per fare chiarezza su questi set di funzionalità di base. Per informazioni aggiornate, visita la pagina web.dev/baseline.

Se vuoi rimanere al passo con le novità, il nostro team pubblica articoli quando una funzionalità diventa interoperabile e aggiornamenti mensili sulle novità della piattaforma web, dalle funzionalità sperimentali a quelle appena interoperabili.

Ci interessa sempre sapere se quello che facciamo ti è utile o se hai bisogno di diversi tipi di assistenza, quindi contattaci al gruppo della community WebDX.