Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta a novembre 2022.
Release del browser stabile
A novembre, Firefox 107 e Chrome 108 sono diventati stabili. Vediamo cosa comporta tutto ciò per la piattaforma web.
Una modifica al 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à area visibile
Sempre in Chrome 108 sono presenti le nuove unità Viewport di 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 motori principali dei browser per queste unità.
Leggi Le unità dell'area visibile grande, piccola e dinamica.
Supporto dei browser
- 108
- 108
- 101
- 15,4
La proprietà CSS abbreviata di contain-intrinsic-size è supportata in Firefox 107, insieme alle proprietà logiche contain-intrinsic-width, contain-intrinsic-height e logiche contain-intrinsic-block-size e contain-intrinsic-inline-size.
Questi vengono applicati per specificare le dimensioni di un elemento UI soggetto a contenimento delle dimensioni. Ciò consente a uno user agent di determinare le dimensioni di un elemento senza dover eseguire il rendering degli elementi secondari. Sono utili quando un elemento è soggetto a contenimento delle dimensioni.
Supporto per la parola chiave di frammentazione CSS avoid
La versione 108 di Chrome 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 codice CSS che segue evita che una figura venga interrotta durante un'interruzione di pagina.
figure {
break-inside: avoid;
}
Questa aggiunta è dovuta all'inclusione del supporto di stampa tramite LayoutNG, che offre un'esperienza moderna e meno ricca di bug. Scopri di più su LayoutNG.
API Federated Credential Management
L'API FedCM (Federated Credential Management) fornisce un'astrazione per i flussi di identità federate sul web. Espone una finestra di dialogo con mediazione del browser che consente agli utenti di scegliere gli account tra i provider di identificazione per accedere ai siti web. FedCM sta spedendo la versione 108 di Chrome. Scopri di più nel post del blog sull'annuncio di FedCM.
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. A causa di dove rientrano le date di rilascio, l'unica nuova versione beta di questo mese è Firefox 108, mentre Safari 16.2 beta è 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 un'unità.
L'implementazione delle query sui container è in corso in Firefox. Dietro il flag layout.css.container-queries.enabled in Firefox 108 beta, si trovano le unità di lunghezza della query del contenitore: cqw, cqh, cqi, cqb, cqmin e cqmax. Si tratta di unità di lunghezza rispetto alle dimensioni di un container di query.
Parte della Nuova serie web