Novità sulla piattaforma web a febbraio

Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta nel corso di febbraio 2025.

Rachel Andrew

Data di pubblicazione: 28 febbraio 2025

Release stabili del browser

A febbraio 2025, Firefox 135 e Chrome 133 sono diventati stabili. Questo post esamina le nuove funzionalità aggiunte alla piattaforma web.

Verificare la presenza di funzionalità WebAuthn

Firefox 135 e Chrome 133 aggiungono entrambi il supporto per il metodo statico PublicKeyCredential.getClientCapabilities(). In questo modo puoi verificare se un browser supporta le funzionalità dell'API Web Authentication, senza dover ricorrere allo sniffing del browser.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 include anche le funzionalità della proposta di analisi JSON con l'origine: l'argomento context del parametro reviver JSON.parse, JSON.isRawJSON() e JSON.rawJSON().

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 135.
  • Safari: not supported.

Source

Il valore del suggerimento dell'attributo popover

Chrome 133 aggiunge un terzo valore per l'attributo popover, popover="hint". I suggerimenti, che sono spesso associati a comportamenti di tipo "tooltip", hanno comportamenti leggermente diversi. Ora è possibile aprire un popover di suggerimento non correlato mentre uno stack esistente di popover automatici rimane aperto.

L'esempio canonico è un selettore <select> aperto (popover="auto") e una descrizione comando attivata dal passaggio del mouse (popover="hint"). Questa azione non chiude il selettore <select>.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Scopri di più in Popover = suggerimento.

Funzione attr() avanzata CSS

Chrome 133 include una bella raccolta di aggiunte CSS. Questa versione di Chrome include l'aumento di attr() specificato nel livello 5 del CSS, che consente tipi diversi da <string> e l'utilizzo in tutte le proprietà CSS (oltre al supporto esistente per i contenuti degli pseudo-elementi).

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Scopri di più in CSS attr() riceve un upgrade.

Query del contenitore dello stato di scorrimento CSS

Inoltre, in Chrome 133, puoi utilizzare le query dei contenitori per applicare stili ai discendenti dei contenitori in base al loro stato di scorrimento.

Il contenitore della query è un contenitore con scorrimento o un elemento interessato dalla posizione di scorrimento di un contenitore con scorrimento. È possibile eseguire query sui seguenti stati:

  • stuck: un contenitore con posizione fissa è attaccato a uno dei bordi della casella di scorrimento.
  • snapped: un contenitore allineato con lo snap di scorrimento è attualmente agganciato orizzontalmente o verticalmente.
  • scrollable: indica se è possibile scorrere un contenitore con scorrimento nella direzione specificata nella query.

Esiste anche un nuovo valore per container-type: scroll-state che consente di eseguire query sui contenitori.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Per saperne di più, leggi CSS scroll-state().

CSS text-box, text-box-trim e text-box-edge

In CSS per Chrome 133 sono presenti anche le proprietà text-box-trim e text-box-edge, insieme alla proprietà abbreviata text-box, che consentono un controllo più preciso dell'allineamento verticale del testo.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Scopri di più sul funzionamento di questa utile proprietà in CSS text-box-trim.

Spostamento che preserva lo stato del DOM

Chrome 133 aggiunge un elemento DOM primitivo (Node.prototype.moveBefore) che consente di spostare gli elementi all'interno di una struttura ad albero DOM, senza reimpostare lo stato dell'elemento.

Quando sposti un elemento anziché rimuoverlo e inserirlo, lo stato seguente viene mantenuto:

  • <iframe> elementi rimangono caricati.
  • L'elemento attivo rimane attivo.
  • I popup, le finestre a schermo intero e le finestre di dialogo modali rimangono aperte.
  • Le transizioni e le animazioni CSS continuano.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Interfaccia FileSystemObserver

L'interfaccia FileSystemObserver aggiunta in Chrome 133 comunica ai siti web le modifiche al file system. I siti osservano le modifiche apportate a file e directory a cui l'utente ha precedentemente concesso l'autorizzazione, nel dispositivo locale dell'utente o nel file system del bucket (noto anche come file system privato di origine) e ricevono una notifica con informazioni di base sulle modifiche, ad esempio il tipo di modifica.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Release beta del browser

Le versioni beta del browser ti offrono un'anteprima delle funzionalità che saranno disponibili nella successiva versione stabile del browser. È un'ottima occasione per testare nuove funzionalità o rimuovere elementi che potrebbero influire sul tuo sito prima che la release venga resa disponibile a livello mondiale. Le nuove beta sono Firefox 136, Safari 18.4 e Chrome 134. Queste release offrono alla piattaforma molte funzionalità interessanti. Consulta le note di rilascio per tutti i dettagli. Ecco alcuni punti salienti.

L'ultima versione beta di Safari offre un ampio elenco di aggiunte e miglioramenti, tra cui alcune funzionalità che prevediamo diventeranno di nuova disponibilità come riferimento una volta che il browser sarà stabile. Ad esempio writing-mode: sideways-rl e writing-mode: sideways-lr, il metodo statico supports() per ClipboardItem e un intero elenco di elementi della proposta Iterator Helpers.

Sia Safari 18.4 beta che Firefox 136 includono l'API Cookie Store, che dovrebbe essere di riferimento Nuovamente disponibile una volta che entrambi i browser saranno disponibili.

Firefox 136 include le pseudoclassi :open e :has-slotted, la seconda è presente anche in Chrome 134. Sono incluse anche le funzionalità Intl.DurationFormat, che dovrebbero essere disponibili come Base di riferimento di nuova introduzione.

Chrome 134 include elementi <select> personalizzabili, la proprietà CSS dynamic-range-limit e la funzionalità di chiusura rapida per gli elementi <dialog>.