Novità sulla piattaforma web a ottobre

Scopri alcune delle interessanti funzionalità disponibili nei browser web stabili e beta nel mese di ottobre 2022.

Rachel Andrew

Release del browser stabile

A ottobre, Firefox 106, Chrome 107 e Safari 16.1 sono diventati stabili. Vediamo cosa comporta tutto ciò per la piattaforma web.

Animazione delle tracce della griglia

Grazie al lavoro dei nostri collaboratori di Microsoft, Chrome è ora in grado di interpolare i valori grid-template-columns e grid-template-rows. Ciò significa che i layout a griglia possono passare facilmente da uno stato all'altro, invece di agganciarsi al punto a metà di un'animazione o transizione.

Aggiunte a getDisplayMedia()

Inoltre, in Chrome ci sono alcune aggiunte a getDisplayMedia() il cui scopo è evitare la condivisione eccessiva accidentale durante la condivisione dello schermo.

• L'opzione displaySurface può indicare che l'app web preferisce offrire un tipo specifico di superficie di visualizzazione (schede, finestre o schermate).
• L'opzione surfaceSwitching indica se Chrome deve consentire all'utente di passare in modo dinamico da una scheda condivisa all'altra.
• L'opzione selfBrowserSurface può essere utilizzata per impedire all'utente di condividere la scheda corrente. In questo modo si evita l'effetto "sala degli specchi".
• L'opzione systemAudio garantisce che Chrome offra all'utente soltanto acquisizioni audio pertinenti.

Safari 16.1 include anche il supporto per getDisplayMedia, aggiungendo il supporto per l'acquisizione di una finestra specifica di Safari.

Test per il supporto della tecnologia e delle funzionalità dei caratteri da parte dei CSS

Firefox ha aggiunto le funzioni font-tech() e font-format() per visualizzare le query con @supports. L'esempio seguente verifica il supporto dei caratteri COLRv1.

@supports font-tech(color-COLRv1) {

}

Puoi trovare altri esempi su MDN.

Scorri fino al frammento di testo

Safari 16.1 include il supporto per il frammento di scorrimento fino al testo, che aggiunge il supporto per accedere a un URL con un particolare frammento di testo specificato.

Supporto di AVIF

Safari 16 includeva il supporto per immagini AVIF statiche, Safari 16.1 include il supporto per immagini AVIF animate su macOS Ventura, iOS 16 e iPadOS 16.

Web push per Safari

Safari 16.1 porta il supporto Web Push in Safari su macOS Ventura. Viene utilizzato l'API Push e l'API Notifications. Per saperne di più, consulta l'articolo Push web di Meet. La pagina di destinazione di Web push in Safari significa che ora è disponibile per tutti e tre i motori principali.

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 di questo mese sono Chrome 108, Firefox 107 e Safari 16.2.

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;
}

Chrome 108 inizia a implementare una modifica al comportamento dell'overflow negli elementi sostituiti, che potrebbe causare modifiche visive in alcune circostanze. Leggi l'articolo Una modifica all'overflow degli elementi sostituiti in CSS per maggiori dettagli e per vedere come risolvere eventuali problemi riscontrati.

Il comportamento dell'area visibile del layout in Chrome su Android è cambiato quando viene mostrata la tastiera sullo schermo. Per saperne di più, consulta l'articolo Prepararsi alle modifiche del comportamento di ridimensionamento dell'area visibile in arrivo in Chrome su Android per saperne di più e scoprire come prepararti a questa spedizione alla versione stabile del mese prossimo.

Sempre in Chrome sono disponibili 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.

Firefox 107 consente il supporto dei caratteri COLRv1, unendo Chrome al supporto di questa tecnologia dei caratteri. Sempre per quanto riguarda i caratteri, Chrome 108 aggiunge il supporto delle funzioni font-tech() e font-format() per presentare le query con @supports.

Firefox aggiunge anche il supporto di contain-intrinsic-size, unendo Chrome per creare due browser che supportano questa funzionalità.

Safari 16.2 beta include una serie di correzioni CSS tra cui le dimensioni e lo scorrimento.

Parte della Nuova serie web