Novità di Chrome 115

Adriana Jara

Tieni presente quanto segue:

  • Utilizza ScrollTimeline e ViewTimeline per creare animazioni basate sullo scorrimento che migliorano l'esperienza utente.
  • I frame delimitati funzionano insieme ad altre API Privacy Sandbox per incorporare contenuti pertinenti, impedendo al contempo la condivisione di contesto non necessaria.
  • Con l'API Topics, il browser può condividere con terze parti informazioni sugli interessi di un utente, rispettando al contempo la privacy.
  • E c'è molto altro.

Sono Adriana Jara. Vediamo le novità per gli sviluppatori in Chrome 115.

Animazioni basate sullo scorrimento

Le animazioni basate sullo scorrimento sono un pattern UX comune sul web. Un'animazione basata sullo scorrimento è collegata alla posizione di scorrimento di un contenitore scorrevole. Ciò significa che, quando scorri verso l'alto o verso il basso, l'animazione collegata va avanti o indietro in risposta diretta.

I seguenti esempi mostrano alcuni casi d'uso. Ad esempio, puoi creare indicatori di lettura che si spostano mentre scorri:

Un indicatore di lettura in cima a un documento, basato sullo scorrimento.

Le animazioni basate sullo scorrimento possono anche creare elementi che si attenuano man mano che vengono visualizzati:

Le immagini di questa pagina vengono visualizzate gradualmente.

Per impostazione predefinita, un'animazione associata a un elemento viene eseguita nella sequenza temporale del documento. Il tempo di origine inizia a 0 quando la pagina viene caricata e inizia a scorrere in avanti con il passare del tempo. Si tratta della sequenza temporale di animazione predefinita e, finora, era l'unica a cui avevi accesso.

La specifica delle animazioni basate sullo scorrimento definisce due nuovi tipi di schemi temporali che puoi utilizzare:

  • Spostamento della cronologia di avanzamento: una cronologia collegata alla posizione di scorrimento di un contenitore di scorrimento lungo un determinato asse.
  • Visualizza cronologia avanzamento: una cronologia collegata alla posizione relativa di un determinato elemento all'interno del relativo contenitore di scorrimento.

Ecco un esempio di codice che utilizza una cronologia di avanzamento dello scorrimento anonima per creare un indicatore di avanzamento della lettura fissato nella parte superiore dell'area visibile.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Leggi l'articolo sulle animazioni con scorrimento controllato per tutti i dettagli e altri esempi.

Cornici recintate

Privacy Sandbox è un'iniziativa che mira a creare tecnologie che tutelano la privacy delle persone online e offrono agli sviluppatori gli strumenti per creare attività digitali di successo.

Molte delle sue proposte mirano a soddisfare i casi d'uso cross-site senza cookie di terze parti o altri meccanismi di monitoraggio. Ad esempio:

Per tutelare la privacy, alcune di queste API richiedono un nuovo modo per incorporare i contenuti. La soluzione è chiamata frame recintato.

I frame delimitati funzionano in combinazione con altre proposte di Privacy Sandbox per visualizzare documenti di diverse partizioni di archiviazione all'interno di un'unica pagina.

Un frame delimitato è un elemento HTML per i contenuti incorporati, simile a un iframe. A differenza degli iframe, un frame delimitato limita la comunicazione con il relativo contesto di incorporamento per consentire al frame di accedere ai dati cross-site senza condividerli con il contesto di incorporamento.

Analogamente, tutti i dati proprietari nel contesto di incorporamento non possono essere condivisi con il frame delimitato.

Funzionalità iframe fencedframe
Incorporare contenuti Sì Sì
I contenuti incorporati possono accedere al DOM del contesto di incorporamento Sì No
Il contesto di incorporamento può accedere al DOM dei contenuti incorporati Sì No
Attributi osservabili, ad esempio name Sì No
URL (http://example.com) Sì Sì (dipende dal caso d'uso)
Origine opaca gestita dal browser (urn:uuid) No Sì
Accesso ai dati su più siti No Sì (dipende dal caso d'uso)

Ad esempio, supponiamo che news.example (il contesto di incorporamento) incorpori un annuncio di shoes.example in un frame delimitato. news.example non può esfiltrare i dati dall'annuncio shoes.example e shoes.example non può acquisire dati proprietari da news.example.

Un confronto dello stato prima e dopo la suddivisione dello spazio di archiviazione.

Consulta questi articoli per la documentazione su Fenced Frames, l'API Protected Audience, Shared Storage e altro ancora

API Topics

In passato, i cookie di terze parti e altri meccanismi sono stati utilizzati per monitorare il comportamento di navigazione degli utenti sui siti al fine di dedurre gli argomenti di interesse. Questi meccanismi verranno ritirati nell'ambito dell'iniziativa Privacy Sandbox.

L'API Topics consente a un browser di condividere con terze parti informazioni sugli interessi di un utente, rispettando la privacy.

L'API Topics consente la pubblicità basata sugli interessi (IBA) senza monitorare i siti visitati da un utente. Il browser osserva e registra gli argomenti che sembrano essere di interesse per l'utente in base alla sua attività di navigazione. Queste informazioni vengono registrate sul dispositivo dell'utente.

Ad esempio, l'API potrebbe suggerire l'argomento "Fiber & Textile Arts" per un utente che visita il sito web knitting.example.

Gli argomenti sono un indicatore che aiuta le piattaforme di ad tech a selezionare gli annunci pertinenti. A differenza dei cookie di terze parti, queste informazioni vengono condivise senza rivelare ulteriori informazioni sull'utente stesso o sulla sua attività di navigazione.

Leggi la panoramica di Privacy Sandbox per tutti i dettagli sulla tassonomia degli argomenti e sull'utilizzo dell'API Topics

E tanto altro.

Ovviamente ce ne sono molti altri.

  • La dimensione massima di un WebAssembly.Module nel thread principale è aumentata a 8 megabyte
  • La proprietà CSS display ora accetta più parole chiave come valore, oltre alle parole chiave predefinite precedenti.
  • È disponibile una prova dell'origine per l'API Compute Pressure, che offre informazioni di alto livello sullo stato attuale dell'hardware del dispositivo.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 115.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciata la versione 116 di Chrome, sarò qui per dirti le novità di Chrome.