Aggiornamento di metà anno di Interop 2024

Rachel Andrew

Con l'avvicinarsi della seconda metà dell'anno, è il momento giusto per scoprire come. Quest'anno, Interop 2024 ha migliorato l'interoperabilità web.

Dove abbiamo iniziato

All'inizio dell'anno, Chrome ha ottenuto un punteggio sperimentale del supporto del browser pari a 83.

di Gemini Advanced.

Oggi il punteggio è 90, con un punteggio per i browser stabili di 85 nel di Chrome 126 a giugno. Il punteggio complessivo di interoperabilità sperimentale è aumentato 10 punti. Questo post condivide alcune delle funzionalità che hanno contribuito a il punteggio.

Popover

Popover è entrato a far parte del programma Baseline Newly Available ad aprile 2024. Popover corrente entusiasmante perché molte delle funzionalità della UI che devi creare, ad esempio, menu, descrizioni comando, overlay per effettuare selezioni e UI di insegnamento sono tipi di popover. Prima del popover, la creazione di una di queste funzionalità comportava le API nel tuo codice. Codifica per assicurarti che più elementi non siano aperti contemporaneamente oppure per attivare quando l'utente ha fatto clic all'esterno dell'elemento. Potresti anche avere hanno avuto problemi con z-index, per assicurarsi che un elemento UI rimanga in primo piano sul resto l'interfaccia.

Tutte queste funzionalità e altre sono incluse nella API Popover, risparmiando tempo di sviluppo, e contribuisce a creare interfacce più performanti e accessibili. Per Ad esempio, il codice riportato di seguito crea un popover con e chiudere automaticamente gli altri popover quando vengono aperti.

<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ù in L'API Popover arriva in Baseline. Molti stanno già notando i vantaggi di Popover. Tokopedia è stata in grado di ridurre significativamente la quantità di codice React sfruttando questa funzionalità, utilizzando un polyfill per i browser non supportati.

Proprietà personalizzate avanzate con @property

La regola CSS @property consente di creare proprietà personalizzate avanzate, con molto 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à, per ad esempio colore, numero o lunghezza. Stabilisci 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, in modo da aumentare il punteggio stabile quando Firefox 128 verrà spedito più avanti nel corso del mese. Si unisce anche Baseline appena disponibile.

Scopri di più in @property: dare i superpoteri alle variabili CSS.

La proprietà font-size-adjust

La proprietà CSS font-size-adjust ti consente di modificare la dimensione delle lettere minuscole lettere maiuscole rispetto alla dimensione delle lettere maiuscole. Ciò è utile nelle situazioni in cui potrebbe verificarsi il fallback del carattere, in quanto aiuta a garantire che un carattere di riserva sia siano leggibili, in particolare con caratteri di piccole dimensioni.

La proprietà font-size-adjust è attualmente inclusa nel punteggio sperimentale per Chrome, ma aumenterà il punteggio di stabilità quando viene rilasciato Chrome 127 questo mese. Inoltre, fa parte del programma Baseline Newly Available.

text-wrap: "equilibrio"

L'utilizzo di text-wrap: balance indica al browser di determinare il miglior equilibrio a capo automatico per il testo. È particolarmente utile per le intestazioni, perché impedisce un ad esempio un'intestazione a capo in una singola parola nella riga 2.

Questa funzionalità è stata recentemente supportata da Safari, mentre altri browser stanno lavorando per risolvere il problema. non superando i test per garantire che questa funzionalità funzioni correttamente su tutti i browser.

Oltre a queste principali funzionalità, diventano interoperabili, sono stati apportati miglioramenti. Ogni test superato rappresenta un problema di interoperabilità che non incontrerai. Non vediamo l'ora di vedere quanto siamo vicini possiamo raggiungere il punteggio del 100% entro la fine dell'anno.