Novità sulla piattaforma web a novembre

Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta a novembre 2022.

Rachel Andrew

Release stabili del browser

A novembre, Firefox 107 e Chrome 108 sono diventati stabili. Vediamo cosa significa tutto questo per la piattaforma web.

Modifica del comportamento dell'area visibile del layout in Chrome su Android

Il comportamento dell'area visibile del layout è cambiato rispetto a Chrome 108 su Android quando viene mostrata la tastiera sullo schermo. Per saperne di più, leggi Prepararsi alle modifiche del comportamento di ridimensionamento dell'area visibile in arrivo in Chrome su Android.

Nuove unità di area visibile

In Chrome 108 sono presenti anche le nuove unità di visualizzazione CSS. Sono incluse le unità piccole (svw, svh, svi, svb, svmin, svmax), grandi (lvw, lvh, lvi, lvb, lvmin, lvmax), dinamiche (dvw, dvh, dvi, dvb, dvmin, dvmax) e logiche (vi, vb). Queste unità sono già implementate in Firefox e Safari, il che significa che ora abbiamo l'interoperabilità tra i tre principali motori dei browser per queste unità.

Leggi l'articolo Unità di visualizzazione grandi, piccole e dinamiche.

La proprietà CSS abbreviata contain-intrinsic-size è supportata in Firefox 107, insieme alle proprietà lunghe contain-intrinsic-width, contain-intrinsic-height e alle proprietà logiche contain-intrinsic-block-size e contain-intrinsic-inline-size.

Questi vengono applicati per specificare le dimensioni di un elemento dell'interfaccia utente soggetto al contenimento delle dimensioni. Ciò consente a uno user agent di determinare le dimensioni di un elemento senza dover visualizzare i relativi elementi secondari. Sono utili quando un elemento è soggetto al contenimento delle dimensioni.

Supporto per la parola chiave avoid di frammentazione CSS

Chrome 108 include il supporto del valore avoid delle proprietà di frammentazione CSS break-before, break-after e break-inside durante la stampa. Questo valore indica al browser di evitare interruzioni prima, dopo o all'interno dell'elemento a cui viene applicato. Ad esempio, il seguente CSS evita che una figura venga interrotta a un'interruzione di pagina.

figure {
    break-inside: avoid;
}

Questa aggiunta è dovuta all'inclusione del supporto di stampa utilizzando LayoutNG, che offre un'esperienza moderna e meno bug. Scopri di più su LayoutNG.

API Federated Credential Management

L'API Federated Credential Management (FedCM) fornisce un'astrazione per i flussi di identità federate sul web. Mostra una finestra di dialogo mediata dal browser che consente agli utenti di scegliere gli account dei provider di identità per accedere ai siti web. FedCM è disponibile in Chrome 108. Scopri di più nel post del blog sull'annuncio di FedCM.

Release beta del browser

Le versioni beta del browser ti offrono un'anteprima delle funzionalità che saranno disponibili 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. A causa delle date di rilascio, l'unica nuova versione beta di questo mese è Firefox 108, mentre la beta di Safari 16.2 è ancora in corso.

Firefox 108 supporta gli attributi height e width per l'elemento <source>, quando è un elemento secondario di un elemento <picture>. Questi attributi accettano l'altezza o la larghezza dell'immagine, in pixel, come un numero intero senza unità.

È in corso l'implementazione delle query sui container in Firefox. Dietro il flag layout.css.container-queries.enabled in Firefox 108 beta, troverai le unità di misura della lunghezza della query del contenitore: cqw, cqh, cqi, cqb, cqmin, cqmax. Si tratta di unità di lunghezza relative alle dimensioni di un contenitore di query.

Componente della serie Novità sul web