Novità sulla piattaforma web a marzo

Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta a marzo 2024.

Release del browser stabile

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

Adatta le combinazioni di colori con light-dark()

La funzione colore light-dark() è arrivata in Chrome 123 e semplifica l'adattamento delle combinazioni di colori alle preferenze degli utenti. Nel seguente esempio, color-scheme è impostato su light dark su root. Le proprietà personalizzate utilizzano la funzione colore light-dark() per impostare i colori che verranno alternati in base alle preferenze dell'utente per la 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);
}

Puoi trovare altri esempi e dettagli in Colori CSS basati su color-scheme con light-dark()

Migliore controllo degli input con field-sizing

Sempre in Chrome 123, la proprietà field-sizing consente i campi di immissione di testo con crescita automatica.

Crenatura per la punteggiatura CJK con text-spacing-trim

In Chrome 123, la proprietà text-spacing-trim applica la crenatura ai caratteri di punteggiatura cinesi, giapponesi e coreani (CJK) per regolare la spaziatura eccessiva. Per saperne di più, consulta la pagina Introduzione a quattro nuove funzionalità internazionali per CSS.

La regola at-rule @scope del CSS

Safari 17.4 include @scope che ti consente di selezionare elementi in sottoalberi DOM specifici, di eseguire il targeting di elementi con precisione senza scrivere selettori troppo specifici e difficili da sostituire e senza accoppiare i selettori troppo strettamente alla struttura DOM.

Per saperne di più, consulta Limitare la copertura dei selettori con la regola at-rule @scope del CSS

Miglioramenti della funzione Picture in picture

Chrome 123 include due funzionalità per migliorare le esperienze 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 l'app web viene mostrata in modalità Picture in picture.

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

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

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

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

API Service Worker Static Routing

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

Per saperne di più, consulta Utilizzare l'API Service Worker Static Routing per ignorare il service worker per percorsi specifici.

API Long Animation Frames

Chrome 123 include anche l'API Long Animation Frames, un aggiornamento dell'API Long Tasks che consente di comprendere meglio gli aggiornamenti lenti dell'interfaccia utente (UI). Questo può essere utile per identificare i frame di animazione lenti che potrebbero influire sulla metrica Core Web Vitals Interaction to Next Paint (INP), che misura la reattività, oppure per identificare altri jank dell'interfaccia utente che influiscono sull'uniformità.

La proprietà content-visibility

Firefox 124 include il supporto per la proprietà CSS content-visibility. Questa proprietà controlla se un elemento esegue il rendering dei propri contenuti, consentendo ai browser di omettere il rendering dei contenuti finché non è necessario.

Aggiunte a ArrayBuffer e raggruppamento di array

In Safari 17.4 JavaScript riceve alcune nuove funzionalità che supportano la proprietà detached e i metodi transfer() e transferToFixedLength() di ArrayBuffer.

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

Queste funzionalità ora sono interoperabili e pertanto si uniscono alla Baseline Newly Available.

setHTMLUnsafe e parseHTMLUnsafe

I metodi setHTMLUnsafe e parseHTMLUnsafe disponibili in Safari 17.4 consentono l'utilizzo del DOM dichiarativo Shadow da JavaScript. Questi metodi offrono inoltre un modo più semplice per analizzare l'HTML in modo imperativo nel DOM, rispetto a innerHTML o DOMParser.

Release del browser beta

Le versioni beta del browser offrono un'anteprima degli elementi che saranno disponibili nella versione stabile successiva del browser. È un ottimo momento per testare le nuove funzionalità, o le rimozioni, che potrebbero avere un impatto sul tuo sito prima dell'uscita a livello mondiale. Le nuove versioni beta sono Firefox 125 e Chrome 124. Queste release introducono molte fantastiche funzionalità nella piattaforma. Per tutti i dettagli, consulta le note di rilascio. Ecco alcuni punti salienti.

Firefox 125 si sta preannunciando una versione davvero entusiasmante. Include align-content sui blocchi, rendendo questa funzionalità interoperabile. È inclusa anche l'API Popover, che diventa quindi parte di Baseline Newly Available. 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 del DOM dichiarativo shadow da JavaScript, rendendo queste funzionalità interoperabili. Sono inclusi anche l'API WebSocketStream e l'attributo writingsuggestions.