Novità sulla piattaforma web a ottobre

Scopri alcune delle funzionalità interessanti che sono state implementate nei browser web stabili e beta durante ottobre 2022.

Rachel Andrew

Release stabili del browser

A ottobre, Firefox 106, Chrome 107 e Safari 16.1 sono diventati stabili. Vediamo cosa significa tutto questo 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 della griglia possono passare senza problemi da uno stato all'altro, anziché scattare a metà di un'animazione o di una transizione.

Passa il mouse sopra gli avatar per visualizzare l'animazione. Questo esempio è tratto dall'articolo CSS animated grid layouts, dove puoi scoprire di più.

Supporto dei browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Aggiunte a getDisplayMedia()

Anche in Chrome sono presenti alcune aggiunte a getDisplayMedia() che hanno lo scopo di impedire la condivisione eccessiva accidentale durante la condivisione dello schermo.

  • L'opzione displaySurface può indicare che l'app web preferisce offrire un tipo specifico di piattaforma di visualizzazione (schede, finestre o schermate).
  • L'opzione surfaceSwitching indica se Chrome deve consentire all'utente di passare dinamicamente 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 "labirinto di specchi".
  • L'opzione systemAudio garantisce che Chrome offra all'utente solo l'acquisizione audio pertinente.

Safari 16.1 include anche il supporto di getDisplayMedia, che consente di acquisire una finestra Safari specifica.

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

Firefox ha aggiunto le funzioni font-tech() e font-format() per consentire 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 Scorri fino al frammento di testo, che aggiunge il supporto per accedere a un URL per cui è stato specificato un determinato frammento di testo.

Supporto AVIF

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

Web push per Safari

Safari 16.1 introduce il supporto di Web Push in Safari su macOS Ventura. Per farlo, vengono utilizzate le API Push e Notifications. Scopri di più nell'articolo Informazioni sulle notifiche web push. La disponibilità di Web Push in Safari significa che ora è disponibile su tutti e tre i principali motori.

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

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

In Chrome 108 inizia a essere implementata una modifica al comportamento dell'overflow negli elementi sostituiti, che potrebbe causare modifiche visive in alcuni casi. Per maggiori dettagli e per scoprire come risolvere eventuali problemi, leggi l'articolo Una modifica all'overflow per gli elementi sostituiti in CSS.

È stata apportata una modifica al comportamento dell'area visibile del layout in Chrome su Android quando viene visualizzata la tastiera sullo schermo. Leggi l'articolo Prepararsi alle modifiche al comportamento di ridimensionamento della visualizzazione in arrivo su Chrome per Android per saperne di più e scoprire come prepararsi al rilascio della versione stabile il mese prossimo.

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

Firefox 107 attiva il supporto dei caratteri COLRv1, affiancando Chrome nel supportare questa tecnologia dei caratteri. Sempre per i caratteri, Chrome 108 aggiunge il supporto delle funzioni font-tech() e font-format() per mostrare le query con @supports.

Firefox aggiunge anche il supporto di contain-intrinsic-size, affiancando Chrome come uno dei due browser che supportano questa funzionalità.

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

Componente della serie Novità sul web