Novità sulla piattaforma web a marzo

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

Release del browser stabile

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

Attributi HTML globali

Firefox 111 aggiunge il supporto per un paio di utili attributi HTML globali. L'attributo autocapitalize determina 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

Fonte

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

Supporto dei browser

  • 19
  • 79
  • 111
  • 6

Fonte

File system privato di origine (OPFS)

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

L'API View Transiziones

In Chrome 111 viene aggiunta l'API View Transiziones, che semplifica la creazione di transizioni efficaci nelle app a pagina singola (APS) grazie all'acquisizione di istantanee delle visualizzazioni e alla modifica del DOM senza sovrapposizioni tra gli stati.

Scopri di più nel post sul lancio che spiega come le transizioni delle visualizzazioni SPA a Chrome 111.

Supporto dei browser

  • 111
  • 111
  • x
  • x

Fonte

Nuovi spazi colore e funzioni CSS

La versione 111 di Chrome include anche una nuova serie di modi per utilizzare i colori sul web. Ora Chrome supporta gli spazi colore che accedono a colori al di fuori della gamma RGB, insieme alle funzioni color() e color-mix(). Scopri di più nella nostra guida ai colori per i CSS ad alta definizione e nel post del blog su color-mix().

Supporto dei browser

  • 111
  • 111
  • 113
  • 16.2

Fonte

La release di Chrome include anche nuovi DevTools per aiutarti a utilizzare questa nuova funzionalità per i colori.

Più controllo sulle selezioni :nth-child()

Chrome 111 aggiunge la possibilità di passare un elenco di selettori in :nth-child() e nth-last-child(). Scopri di più al riguardo e guarda gli esempi nel post More control over :nth-child() with the of S sintassi.

Supporto dei browser

  • 111
  • 111
  • 113
  • 9

Supporto per la diapositiva precedente e successiva nell'API Media Session

Infine, in questo elenco di aggiunte alla versione 111 di Chrome sono riportate le azioni relative alla presentazione delle slide per l'API Media Session: "previousslide" e "nextslide".

Supporto dei browser

  • 111
  • 111
  • x
  • x

Supporto pseudo-classe in Safari

Safari 16.4 è un'incredibile release per la piattaforma web. Questo articolo non riguarda tutte le aggiunte, perciò controlla l'elenco completo delle funzionalità nelle note di rilascio di Safari 16.4.

In questa release sono supportate diverse pseudo-classi CSS aggiuntive: :user-invalid, :user-valid, :dir(), :modal e :fullscreen.

Nuova sintassi degli intervalli per le query supporti

Questa versione di Safari rende la sintassi degli intervalli molto più elegante e utile per le query supporti interoperabili tra tutti e tre i motori. Guarda alcuni esempi di sintassi in questo post, pubblicati al momento dell'invio della sintassi in Chrome.

Supporto dei browser

  • 104
  • 104
  • 102
  • 16.4

Fonte

Proprietà e valori CSS

Safari 16.4 aggiunge il supporto per @property, abilitando la registrazione delle proprietà personalizzate CSS direttamente in un foglio di stile. Per saperne di più, consulta @property: come dare superpoteri alle variabili CSS.

Supporto dei browser

  • 85
  • 85
  • 16.4

Fonte

Supporto dell'API CSS

Continuano ad arrivare grandi novità per i CSS, con il supporto per gli OM di tipo CSS. Questa API espone i valori CSS come oggetti JavaScript digitati anziché stringhe. Semplifica il lavoro con CSS da JavaScript ed è più efficiente rispetto ai metodi esistenti.

Supporto dei browser

  • 66
  • 79
  • x
  • 16.4

Fonte

Sono inoltre supportati i fogli di stile costruibili con CSSStyleSheet(). Ciò consente la condivisione di fogli di stile tra un documento e i relativi sottoalbero 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

Fonte

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 significa che le notifiche push sono supportate in tutti i principali motori.

Supporto dei browser

  • 42
  • 17
  • 44
  • 16

Fonte

Importa mappe

Un'altra aggiunta che introduce una funzione allo stato interoperabile è l'aggiunta di Importa mappe in JavaScript, che rende molto più facile l'importazione di moduli ES.

Supporto dei browser

  • 89
  • 89
  • 108
  • 16.4

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 ufficiale. Le nuove versioni beta sono Firefox 112, Safari 16.5 e Chrome 112. Queste release introducono molte fantastiche funzionalità nella piattaforma. Consulta le note di rilascio per tutti i dettagli, ecco alcune delle principali novità.

Firefox 112 aggiunge il supporto per l'attributo inert, il che renderà disponibile questo attributo utile in tutti i motori. Puoi scoprire di più sull'inerte nell'articolo Introduzione agli inerti. Firefox supporterà anche la funzione di easing linear().

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

Chrome 112 include anche il supporto per animation-composition. Per sapere come funziona questa proprietà, consulta Specificare come deve essere composto più effetti di animazione con animazione-composition.

Se utilizzi la modalità headless di Chrome, ad esempio con Puppeteer, 112 offre una nuovissima modalità headless. Scopri come eseguire l'upgrade della modalità headless di Chrome.

Parte della Nuova serie web