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 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 ce ne sono molto di più.

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

Animazioni guidate dallo scorrimento

Le animazioni basate sullo scorrimento sono uno schema UX comune sul web. Un'animazione basata sullo scorrimento è collegata alla posizione di scorrimento di un contenitore scorrevole. Ciò significa che man mano che scorri verso l'alto o verso il basso, l'animazione collegata si sposta in avanti o indietro nella 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 consentono anche di creare elementi che scompaiono in dissolvenza non appena 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 sequenza temporale di avanzamento di 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 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 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.

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, come 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ì (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 recintato. news.example non può esfiltrare i dati dall'annuncio shoes.example e shoes.example non può acquisire dati proprietari da news.example.

Un confronto tra lo stato precedente e dopo il partizionamento 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 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.

Naturalmente c'è molto altro.

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

Per approfondire

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

Iscriviti

Per rimanere al passo con le 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.