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.
![La dashboard con punteggi - Interop: 65, Indagini: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=it)
![La dashboard con punteggi - Interop: 75, Indagini: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=it)
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.