Novità sulla piattaforma web a marzo

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

Release del browser stabili

A marzo 2023, Firefox 111, Chrome 111 e Safari 16.4 sono diventati stabili. Vediamo cosa significa tutto questo per la piattaforma web.

Attributi HTML globali

Firefox 111 aggiunge il supporto per un paio di utili attributi HTML globali. L'attributo autocapitalize consente di stabilire se il testo può essere scritto automaticamente in maiuscolo quando l'utente sta digitando su una tastiera virtuale.

Supporto dei browser

  • 43
  • 79
  • 111
  • x

Origine

L'attributo translate indica se un elemento deve essere tradotto quando una pagina viene localizzata.

Supporto dei browser

  • 19
  • 79
  • 111
  • 6

Origine

File system privato di origine (OPFS)

Firefox aggiunge il supporto per Origin Private File System (OPFS) quando si utilizza l'API File System Access. Scopri di più sulle OPFS.

API View Transiziones

Chrome 111 aggiunge l'API View Transiziones, che semplifica la creazione di transizioni eleganti nelle app a pagina singola (APS) mediante l'acquisizione di istantanee delle viste e la possibilità di cambiare il DOM senza sovrapposizioni tra stati.

Scopri di più nel post sul lancio Le transizioni di visualizzazione SPA arrivano in Chrome 111.

Supporto dei browser

  • 111
  • 111
  • x
  • 18

Origine

Nuovi spazi colore e funzioni CSS

Chrome 111 include anche un insieme completamente nuovo di modi per usare i colori sul web. Chrome ora supporta gli spazi colore che accedono ai colori al di fuori della gamma RGB, insieme alle funzioni color() e color-mix(). Scopri di più nella nostra guida ai colori CSS ad alta definizione e nel post del blog su color-mix().

Supporto dei browser

  • 111
  • 111
  • 113
  • 16.2

Origine

La release di Chrome include anche i nuovi DevTools per aiutarti a lavorare con queste nuove funzionalità per i colori.

Più controllo sulle selezioni di :nth-child()

In Chrome 111 è stata aggiunta la possibilità di trasferire un elenco di selettore a :nth-child() e nth-last-child(). Scopri di più e guarda alcuni esempi nel post Ulteriori controlli sulle selezioni :nth-child() con la sintassi S.

Supporto dei browser

  • 111
  • 111
  • 113
  • 9

Supporto per la slide precedente e quella successiva nell'API Media Session

Infine, in questo elenco di aggiunte a Chrome 111 sono presenti le azioni per la presentazione di slide per l'API Media Session "previousslide" e "nextslide".

Supporto dei browser

  • 111
  • 111
  • x
  • x

Supporto pseudo-classe in Safari

Safari 16.4 è una versione straordinaria per la piattaforma web. Questo articolo non tratta tutte le nuove funzionalità, perciò dai un'occhiata all'elenco completo delle funzionalità nelle note sulla versione di Safari 16.4.

Questa release include una serie di altre pseudo-classi CSS: :user-invalid, :user-valid, :dir(), :modal e :fullscreen.

Nuova sintassi dell'intervallo per le query supporti

In questa versione di Safari, la sintassi degli intervalli, molto più elegante e utile per le query supporti, è interoperabile in tutti e tre i motori. Consulta esempi di questa sintassi in questo post, pubblicato al momento della distribuzione della sintassi in Chrome.

Supporto dei browser

  • 104
  • 104
  • 102
  • 16.4

Origine

Proprietà e valori CSS

Safari 16.4 aggiunge il supporto per @property, attivando la registrazione delle proprietà personalizzate CSS direttamente in un foglio di stile. Scopri di più in merito in @property: dare i superpoteri alle variabili CSS.

Supporto dei browser

  • 85
  • 85
  • 128
  • 16.4

Origine

Supporto dell'API CSS

Le grandi novità per i CSS continuano a essere aggiunte, con il supporto del CSS Typed OM. Questa API espone i valori CSS come oggetti JavaScript digitati, anziché come stringhe. Semplifica l'utilizzo del codice CSS da JavaScript e offre prestazioni migliori rispetto ai metodi esistenti.

Supporto dei browser

  • 66
  • 79
  • x
  • 16.4

Origine

È disponibile anche il supporto per i fogli di stile costruibili con CSSStyleSheet(). Ciò consente la condivisione dei fogli di stile tra un documento e i relativi sottoalberi DOM shadow. Con questa versione di Safari, i fogli di stile costruibili sono ora supportati in tutti e tre i motori.

Supporto dei browser

  • 73
  • 79
  • 101
  • 16.4

Origine

Web Push e API Badging

Ora Safari supporta Web Push insieme all'API Badging, un'ottima notizia per gli sviluppatori di app. In particolare, questa versione indica che le notifiche push sono supportate in tutti i principali motori.

Supporto dei browser

  • 42
  • 17
  • 44
  • 16

Origine

Importa mappe

Un'altra aggiunta che conferisce una funzione allo stato interoperabile è l'aggiunta di Importa mappe JavaScript, che semplifica l'importazione dei moduli ES.

Supporto dei browser

  • 89
  • 89
  • 108
  • 16.4

Versioni del browser beta

Le versioni beta del browser offrono un'anteprima di elementi che saranno nella prossima 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 versioni beta sono Firefox 112, Safari 16.5 e Chrome 112. Queste release integrano molte funzionalità eccezionali sulla piattaforma. Consulta le note di rilascio per tutti i dettagli; ecco alcune parti principali.

Firefox 112 aggiunge il supporto per l'attributo inert, che lo renderà utile in tutti i motori. Per scoprire di più sull'inert, consulta l'articolo Introduzione ai risultati inerti. Firefox abiliterà anche il supporto per la funzione di easing di linear().

Sia Chrome 112 sia Safari 16.5 aggiungono entrambi il supporto per la nidificazione dei CSS, una funzionalità molto attesa da molti sviluppatori.

Chrome 112 include anche il supporto per animation-composition. Per informazioni sul funzionamento di questa proprietà, consulta Specificare la modalità di composizione di più effetti di animazione con animazione-composizione.

Se usi la modalità Headless di Chrome, ad esempio con Puppeteer, la modalità 112 offre una modalità Headless completamente nuova. Scopri di più in La modalità headless di Chrome riceve un upgrade.

Parte della serie Novità per il web