Nowości w Chrome 115

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Użyj elementów ScrollTimeline i ViewTimeline, aby tworzyć animacje zależne od przewijania, które poprawiają wrażenia użytkowników.
  • Ramki ograniczone współpracują z innymi interfejsami API Piaskownicy prywatności, aby umieszczać odpowiednie treści, a zarazem zapobiegać niepotrzebnemu udostępnianiu kontekstu.
  • Dzięki interfejsowi Topics API przeglądarka może udostępniać informacje o interesach użytkownika osobom trzecim, zachowując przy tym prywatność.
  • I to nie wszystko

Nazywam się Adriana Jara. Zobaczmy, co nowego w Chrome 115 dla deweloperów.

Animacje sterowane przez przewijanie

Animacje przewijane to typowy wzorzec UX w internecie. Animacja przewijana jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewijasz w górę lub w dół, powiązana animacja przesuwa się do przodu lub do tyłu w bezpośredniej reakcji.

Poniżej znajdziesz kilka przykładów zastosowania. Możesz na przykład utworzyć wskaźniki czytania, które poruszają się podczas przewijania:

Wskaźnik czytania nad dokumentem uruchamiany przez przewijanie.

Animacje wywoływane przez przewijanie mogą też tworzyć elementy, które stopniowo pojawiają się w widoku:

Obrazy na tej stronie pojawiają się stopniowo.

Domyślnie animacja dołączona do elementu jest odtwarzana na osi czasu dokumentu. Jego czas początkowy wynosi 0, gdy wczytuje się strona, a potem zaczyna się zwiększać wraz z upływem czasu. Jest to domyślna oś czasu animacji i do tej pory była to jedyna oś czasu animacji, do której miałeś/miałaś dostęp.

Specyfikacja animacji sterowanych przewijaniem definiuje 2 nowe typy osi czasu, których możesz używać:

  • Oś czasu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania na określonej osi.
  • Oś czasu wyświetlania: oś czasu powiązana z względną pozycją danego elementu w kontenerze przewijania.

Oto przykładowy kod, który używa anonimowej osi postępu przewijania do utworzenia wskaźnika postępu czytania umieszczonego u góry widocznego obszaru.

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

Więcej informacji i przykładów znajdziesz w artykule Animacje przesuwania.

Ogrodzone ramki

Piaskownica prywatności to inicjatywa mająca na celu tworzenie technologii, które będą chronić prywatność użytkowników online, a deweloperom udostępniać narzędzia do tworzenia prosperujących usług internetowych.

Wiele z proponowanych przez nią rozwiązań ma na celu zapewnienie obsługi przypadków użycia w różnych witrynach bez stosowania plików cookie innych firm ani innych mechanizmów śledzenia. Na przykład:

  • Interfejs Protected Audience API umożliwia wyświetlanie reklam opartych na zainteresowaniach w sposób zapewniający ochronę prywatności.
  • Storage współdzielony: umożliwia dostęp do niepartycjonowanych danych w wielu witrynach w bezpiecznym środowisku.

Aby chronić prywatność, niektóre z tych interfejsów API wymagają nowego sposobu umieszczania treści. Rozwiązanie to nazywamy ramką chronioną.

Ramki ograniczone działają w połączeniu z innymi propozycjami dotyczącymi Piaskownicy prywatności, aby wyświetlać dokumenty z różnych partycji pamięci na jednej stronie.

Ramka chroniona to element HTML przeznaczony do umieszczonej treści, podobny do elementu iframe. W przeciwieństwie do ramek iframe ogranicza ona komunikację z kontekstem, w którym jest umieszczona, aby umożliwić dostęp do danych między witrynami bez udostępniania ich kontekstowi.

Analogicznie żadne dane własne w kontekście wektora dystrybucyjnego nie mogą być udostępniane zabezpieczonej ramce.

Funkcja iframe fencedframe
Umieszczenie treści Tak Tak
Umieszczona treść może uzyskiwać dostęp do kontekstu DOM umieszczania Tak Nie
Kontekst wektora dystrybucyjnego może uzyskiwać dostęp do elementów DOM umieszczonych treści Tak Nie
Atrybuty widoczne, takie jak name Tak Nie
Adresy URL (http://example.com) Tak Tak (zależy od przypadku użycia)
Nieprzejrzysty identyfikator zarządzany przez przeglądarkę (urn:uuid) Nie Tak
Dostęp do danych z różnych witryn Nie Tak (zależy od przypadku użycia)

Załóżmy na przykład, że element news.example (kontekst wektora dystrybucyjnego) umieszcza reklamę z witryny shoes.example w zabezpieczonej ramce. news.example nie może pobierać danych z reklamy shoes.example, a shoes.example nie może uzyskiwać danych własnych z news.example.

Porównanie stanu partycjonowania pamięci przed i po.

Zapoznaj się z tymi artykułami, aby uzyskać więcej informacji o Fenced Frames, Protected Audience API, Shared Storage i innych usługach

Interfejs Topics API

W przeszłości do śledzenia zachowań użytkowników w witrynach i określania ich zainteresowań używano plików cookie innych firm i innych mechanizmów. Mechanizmy te są wycofywane w ramach inicjatywy Piaskownica prywatności.

Interfejs Topics API umożliwia przeglądarce udostępnianie osobom trzecim informacji o zainteresowaniach użytkowników przy jednoczesnym zapewnieniu ochrony prywatności.

Interfejs Topics API umożliwia wyświetlanie reklam opartych na zainteresowaniach bez śledzenia stron odwiedzanych przez użytkownika. Przeglądarka obserwuje i zapisuje tematy, które wydają się interesować użytkownika na podstawie jego aktywności w przeglądarce. Informacje te są rejestrowane na urządzeniu użytkownika.

Interfejs API może na przykład proponować temat "Fiber & Textile Arts" użytkownikowi, który odwiedza witrynę knitting.example.

Tematy pomagają platformom z zakresu technologii reklamowych wybierać trafne reklamy. W odróżnieniu od plików cookie innych firm te informacje są udostępniane bez ujawniania dodatkowych informacji o użytkowniku ani jego aktywności w sieci.

Więcej informacji o taksonomii tematów i używaniu interfejsu Topics API znajdziesz w omówieniu Piaskownicy prywatności.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Maksymalny rozmiar pliku WebAssembly.Module w wątku głównym został zwiększony do 8 MB
  • Właściwość CSS display akceptuje teraz jako wartość wiele słów kluczowych, a nie tylko stare, wstępnie utworzone słowa kluczowe.
  • Interfejs Compute Pressure API jest dostępny w wersji próbnej, która zawiera ogólne informacje o bieżącym stanie sprzętu urządzenia.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 115, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Cześć, tu Adriana Jara. Gdy tylko pojawi się nowa wersja Chrome 116, opowiem Ci, co nowego w Chrome.