Novità sulla piattaforma web a marzo

Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta nel mese di marzo 2024.

Rachel Andrew

Release stabili del browser

A marzo 2024 Firefox 124, Safari 17.4 e Chrome 123 sono diventati stabili. Questo post esamina le nuove funzionalità aggiunte alla piattaforma web.

Adatta le combinazioni di colori con light-dark()

La funzione colore light-dark() è stata introdotta in Chrome 123 e semplifica l'adattamento delle combinazioni di colori alle preferenze dell'utente. Nell'esempio seguente, color-scheme è impostato su light dark il giorno root. Le proprietà personalizzate utilizzano la funzione colore light-dark() per impostare i colori che verranno alternati a seconda delle preferenze dell'utente relative alla modalità Luce o Buio.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Trovi altri esempi e dettagli in Colori dipendenti da color-scheme CSS con light-dark()

Supporto dei browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Origine

Migliore controllo degli input con field-sizing

Anche in Chrome 123, la proprietà field-sizing consente di attivare i campi di immissione di testo che si espandono automaticamente.

Supporto dei browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Kerning per la punteggiatura CJK con text-spacing-trim

In Chrome 123, la proprietà text-spacing-trim applica il kerning ai caratteri di punteggiatura cinesi, giapponesi e coreani (CJK) per regolare gli spazi eccessivi. Scopri di più nell'articolo Presentazione di quattro nuove funzionalità internazionali per i CSS.

Supporto dei browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

La regola at @scope CSS

Safari 17.4 include @scope che ti consente di selezionare elementi in sottoalberi DOM specifici, scegliendo come target gli elementi con precisione senza scrivere selettori eccessivamente specifici e difficili da sostituire e senza associare i selettori troppo strettamente alla struttura DOM.

Scopri di più in Limitare la copertura dei selettori con la regola at @scope CSS

Supporto dei browser

  • Chrome: 118.
  • Edge: 118.
  • Firefox: dietro un flag.
  • Safari: 17.4.

Origine

Miglioramenti alla funzionalità Picture in picture

Chrome 123 include due funzionalità per migliorare le esperienze in Picture in Picture. La prima è la picture-in-picture modalità di visualizzazione CSS. In questo modo puoi scrivere regole CSS specifiche che vengono applicate solo quando (parte di) l'app web viene visualizzata in modalità Picture in picture.

La seconda funzionalità consente di utilizzare opener.focus da una finestra Picture in picture del documento per portare lo stato attivo a livello di sistema sulla scheda proprietaria della finestra Picture in picture del documento.

In questo modo, puoi riportare in primo piano la scheda originale quando necessario. Ad esempio, quando l'utente deve accedere a un'esperienza UI che non rientra nella finestra Picture in picture più piccola.

Supporto per align-content nel layout a blocchi e a tabella

Chrome 123 e Safari 17.4 includono il supporto di align-content nel layout di blocco e tabella. Scopri di più sul cambiamento all'assistenza align-content.

API Service Worker Static Routing

A partire da Chrome 123, è disponibile l'API di routing statico di Service Worker. Questa API ti consente di dichiarare in modo dichiarativo come devono essere recuperati determinati percorsi delle risorse, il che significa che il browser non deve eseguire un servizio worker solo per recuperare le risposte da una cache o direttamente dalla rete.

Scopri di più in Utilizzare l'API di routing statico del service worker per bypassare il service worker per percorsi specifici.

API Long Animation Frames

Chrome 123 include anche l'API Long Animation Frames, che è un aggiornamento dell'API Long Tasks per fornire una migliore comprensione degli aggiornamenti dell'interfaccia utente (UI) lenti. Questo può essere utile per identificare i frame di animazione lenti che probabilmente influiranno sulla metrica Core Web Vital Interazione con Next Paint (INP), che misura la reattività, oppure per identificare altri blocchi dell'interfaccia utente che influiscono sulla fluidità.

Supporto dei browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

La proprietà content-visibility

Firefox 124 include il supporto per la proprietà CSS content-visibility. Questa proprietà controlla se un elemento deve eseguire il rendering dei suoi contenuti, consentendo ai browser di omettere il rendering dei contenuti finché non sono necessari.

Supporto dei browser

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Origine

Aggiunte a ArrayBuffer e raggruppamento di array

In Safari 17.4, JavaScript riceve alcune nuove funzionalità con il supporto della proprietà detached e dei metodi transfer() e transferToFixedLength() di ArrayBuffer.

Supporto dei browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Origine

Safari 17.4 include anche i metodi di raggruppamento degli array Object.groupBy e Map.groupBy. Per scoprire di più sul raggruppamento di array, leggi JavaScript sta ottenendo metodi di raggruppamento di array.

Supporto dei browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4.

Origine

Queste funzionalità sono ora interoperabili e quindi si aggiungono a quelle disponibili di recente nel livello di base.

setHTMLUnsafe e parseHTMLUnsafe

I metodi setHTMLUnsafe e parseHTMLUnsafe utilizzati in Safari 17.4 consentono di utilizzare il DOM dichiarativo shadow da JavaScript. Questi metodi offrono anche un modo più semplice per analizzare in modo imperativo l'HTML nel DOM, rispetto a innerHTML o DOMParser.

Versioni del browser beta

Le versioni beta del browser ti offrono un'anteprima delle funzionalità che saranno disponibili nella successiva versione stabile del browser. È un ottimo momento per testare nuove funzionalità, o rimozioni, che potrebbero avere un impatto sul tuo sito prima che il mondo venga rilasciato. Le nuove beta sono Firefox 125 e Chrome 124. Queste release integrano molte funzionalità straordinarie sulla piattaforma. Consulta le note di rilascio per tutti i dettagli. Ecco alcuni punti salienti.

Firefox 125 si preannuncia una release entusiasmante. Include align-content sui blocchi, rendendo questa funzionalità interoperabile. È inclusa anche l'API Popover, che fa quindi parte della sezione Nuovamente disponibile di Baseline. Sarà supportata anche la proprietà transition-behavior. Popover e transition-behavior fanno parte di Interop 2024.

Chrome 124 include i metodi setHTMLUnsafe e parseHTMLUnsafe per consentire l'utilizzo di DOM ombra dichiarativo da JavaScript, rendendo interoperabili queste funzionalità. Sono inclusi anche l'API WebSocketStream e l'attributo writingsuggestions.