Mentre ci avviamo verso la seconda metà dell'anno, è un'ottima occasione per esaminare in che modo Interop 2024 ha migliorato l'interoperabilità web quest'anno.
Dove abbiamo iniziato
All'inizio dell'anno, Chrome aveva un punteggio di supporto del browser sperimentale pari a 83.
Oggi il punteggio è 90, con un punteggio di 85 per i browser stabili dalla release di Chrome 126 a giugno. Il punteggio complessivo di interoperabilità sperimentale è aumentato di 10 punti e questo post condivide alcune delle funzionalità che hanno contribuito a questo risultato.
Popover
Il popup è diventato parte di Base di riferimento: funzionalità di recente disponibilità ad aprile 2024. I popover sono molto interessanti perché molte delle funzionalità dell'interfaccia utente che devi creare, ad esempio menu, descrizioni comando, overlay per effettuare selezioni e interfacce utente didattiche, sono tipi di popover. Prima del popover, la creazione di una di queste funzionalità richiedeva molto codice personalizzato. Codice per assicurarsi che non siano aperti più elementi contemporaneamente o per attivare la chiusura rapida quando l'utente fa clic all'esterno dell'elemento. Potresti anche aver avuto difficoltà con z-index
per assicurarti che un elemento dell'interfaccia utente rimanesse sopra il resto dell'interfaccia.
Tutte queste funzionalità e altre sono incluse nell'API Popup, che consente di risparmiare tempo di sviluppo e di creare interfacce più performanti e accessibili. Ad esempio, il seguente codice crea un popover con la dismissione rapida, che chiude automaticamente gli altri popover quando viene aperto.
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
Scopri di più nell'articolo L'API Popup è disponibile in Baseline. Molte applicazioni stanno già sfruttando i vantaggi di Popover. Tokopedia è riuscita a ridurre in modo significativo la quantità di codice React sfruttando la funzionalità, utilizzando un polyfill per i browser non supportati.
Proprietà personalizzate avanzate con @property
La regola CSS @property
ti consente di creare proprietà personalizzate avanzate, con molti più dettagli rispetto al nome e al valore disponibili nelle proprietà personalizzate standard.
Imposta la sintassi consentita per definire il tipo di dati contenuti in questa proprietà, ad esempio colore, un numero o una lunghezza. Imposta quindi se la proprietà eredita e un valore iniziale.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Al momento, la regola @property
migliora il punteggio sperimentale per Firefox e incrementa il punteggio stabile quando Firefox 128 verrà rilasciato entro la fine del mese. Inoltre, si unisce al gruppo
Baseline Newly Available.
Scopri di più in @property: superpoteri per le variabili CSS.
La proprietà font-size-adjust
La proprietà CSS font-size-adjust
consente di modificare le dimensioni delle lettere minuscole rispetto alle lettere maiuscole. Questo è utile nelle situazioni in cui potrebbe verificarsi il fallback del carattere, in quanto consente di garantire che un carattere di riserva sia ancora leggibile, in particolare con caratteri di piccole dimensioni.
La proprietà font-size-adjust
è attualmente inclusa nel punteggio sperimentale per Chrome, ma aumenterà il punteggio stabile quando verrà rilasciata con Chrome 127 questo mese. Inoltre, si unisce a Baseline Newly Available.
text-wrap: balance
L'utilizzo di text-wrap: balance
indica al browser di trovare il miglior a capo bilanciato per il testo. È particolarmente utile per le intestazioni, ad esempio per evitare che una intestazione venga a capo su una singola parola nella seconda riga.
Di recente questa funzionalità è stata supportata da Safari, mentre gli altri browser stanno lavorando per correggere i test non riusciti in modo che la funzionalità funzioni correttamente su tutti i browser.
Oltre a rendere interoperabili queste funzionalità principali, sono stati apportati molti altri miglioramenti. Ogni test superato rappresenta un problema di interoperabilità che non riscontrerai. Non vediamo l'ora di scoprire quanto possiamo avvicinarci al punteggio del 100% entro la fine dell'anno.