Novità di Chrome 115

Adriana Jara

Tieni presente quanto segue:

  • Usa ScrollTimeline e ViewTimeline per creare animazioni con scorrimento che migliorano l'esperienza utente.
  • I frame recintati funzionano in sinergia con altre API Privacy Sandbox per incorporare contenuti pertinenti, impedendo al contempo la condivisione del contesto non necessaria.
  • Con l'API Topics, il browser può condividere con terze parti informazioni sugli interessi di un utente tutelando al contempo la privacy.
  • E ce ne sono molti altri.

Sono Adriana Jara. Analizziamo le novità di Chrome 115 per gli sviluppatori.

Animazioni con scorrimento

Le animazioni con scorrimento sono un modello UX comune sul web. Un'animazione con scorrimento è collegata alla posizione di scorrimento di un contenitore di scorrimento. 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 muovono durante lo scorrimento:

Un indicatore di lettura sopra un documento, attivato tramite scorrimento.

Le animazioni con scorrimento possono anche creare elementi che compaiono in dissolvenza non appena vengono visualizzati:

Le immagini in questa pagina diventano visibili in dissolvenza quando vengono visualizzate.

Per impostazione predefinita, un'animazione associata a un elemento viene eseguita nella sequenza temporale del documento. L'ora di origine inizia da 0 quando la pagina viene caricata e continua ad andare avanti con l'avanzamento dell'orologio. Questa è la sequenza temporale dell'animazione predefinita che, finora, era l'unica a cui avevi accesso.

La specifica delle animazioni a scorrimento definisce due nuovi tipi di sequenze temporali che puoi utilizzare:

  • Sequenza temporale di avanzamento dello scorrimento: una sequenza temporale collegata alla posizione di scorrimento di un contenitore di scorrimento lungo un determinato asse.
  • Visualizzazione della sequenza temporale di avanzamento: una sequenza temporale collegata alla posizione relativa di un particolare elemento all'interno del relativo contenitore di scorrimento.

Ecco un esempio di codice che utilizza una sequenza temporale di avanzamento dello scorrimento anonima per creare un indicatore di avanzamento della lettura fisso 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 le animazioni con Drive di scorrimento per tutti i dettagli e altri esempi.

Cornici recintate

Privacy Sandbox è un'iniziativa volta 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 tra siti senza cookie di terze parti o altri meccanismi di monitoraggio. Ad esempio:

  • L'API Protected Audience: consente la pubblicazione di annunci basati sugli interessi con un approccio incentrato sulla tutela della privacy.
  • Archiviazione condivisa: consente di accedere a dati tra siti non partizionati in un ambiente sicuro.

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

I frame Fenced funzionano in combinazione con altre proposte di Privacy Sandbox per visualizzare i documenti provenienti da diverse partizioni di archiviazione all'interno di una singola pagina.

Un frame recintato è un elemento HTML per contenuti incorporati, simile a un iframe. A differenza degli iframe, un frame recintato limita la comunicazione con il contesto di incorporamento per consentire al frame di accedere ai dati tra siti senza condividerli con il contesto di incorporamento.

Allo stesso modo, tutti i dati proprietari nel contesto di incorporamento non possono essere condivisi con il frame isolato.

Selezione delle 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, come name Sì No
URL (http://example.com) Sì Sì (in base al caso d'uso)
Origine opaca gestita dal browser (urn:uuid) No Sì
Accesso ai dati cross-site No Sì (in base al caso d'uso)

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

Un confronto tra lo stato prima e dopo del partizionamento dello spazio di archiviazione.

Dai un'occhiata a questi articoli per consultare 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 su più siti per dedurre argomenti di interesse. Questi meccanismi sono in fase di ritiro graduale nell'ambito dell'iniziativa Privacy Sandbox.

L'API Topics consente a un browser di condividere con terze parti informazioni sugli interessi di un utente tutelando al contempo 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 interessanti 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" a un utente che visita il sito web knitting.example.

Gli argomenti sono un indicatore che aiuta le piattaforme di tecnologia pubblicitaria a selezionare 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 c'è molto altro.

  • Le dimensioni massime di WebAssembly.Module nel thread principale sono aumentate a 8 megabyte
  • La proprietà CSS display ora accetta più parole chiave come valore, oltre alle precedenti parole chiave precomposte.
  • È 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

Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 115.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Adriana Jara e, non appena uscirà Chrome 116, sarò qui per raccontarti le novità di Chrome.