Scopri alcune delle funzionalità interessanti introdotte nei browser web stabili e beta durante il mese di novembre 2022.
Release stabili del browser
A novembre, Firefox 107 e Chrome 108 sono diventati stabili. Vediamo cosa significa per la piattaforma web.
Una modifica al comportamento dell'area visibile del layout in Chrome su Android
In Chrome 108 su Android è stata apportata una modifica al comportamento dell'area visibile del layout quando viene visualizzata la tastiera sullo schermo. Per scoprire di più, leggi l'articolo Prepararsi alle modifiche al comportamento di ridimensionamento del viewport in arrivo su Chrome per Android.
Nuove unità di visualizzazione
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.
Supporto dei browser
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. In questo modo, un user agent può determinare le dimensioni di un elemento senza dover eseguire il rendering dei relativi elementi secondari. Sono utili quando un elemento è soggetto al contenimento delle dimensioni.
Supporto per la parola chiave avoid
per la 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 relativo all'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'ottima occasione per testare nuove funzionalità o rimozioni che potrebbero influire sul tuo sito prima che la release venga resa disponibile a livello mondiale. 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 numero intero senza unità di misura.
L'implementazione delle query dei container è in corso 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