Nowości w Chrome 115

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Użyj właściwości ScrollTimeline i ViewTimeline, aby tworzyć animacje przewijane, które zwiększają wygodę użytkowników.
  • Ramki ogrodzone współdziałają z innymi interfejsami API Piaskownicy prywatności, aby umieszczać odpowiednie treści, a jednocześnie zapobiegać niepotrzebnemu udostępnianiu kontekstu.
  • Dzięki interfejsowi Topics API przeglądarka może udostępniać osobom trzecim informacje o zainteresowaniach użytkowników przy zachowaniu prywatności.
  • A to jeszcze wiele więcej.

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 115.

Animacje wyświetlane podczas przewijania

Animacje wyświetlane po przewinięciu to typowy wzorzec UX w internecie. Animacja wyświetlana podczas przewijania jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewijasz stronę w górę lub w dół, połączona animacja przesuwa się do przodu lub do tyłu, w reakcji bezpośredniej.

Poniższe przykłady pokazują niektóre zastosowania. Możesz na przykład utworzyć wskaźniki czytania, które przesuwają się podczas przewijania:

Wskaźnik czytania wyświetlany nad dokumentem uruchamiany przez przewijanie.

Animacje wyświetlane po przewinięciu mogą też tworzyć elementy, które zanikają, gdy znajdują się na ekranie:

Obrazy na tej stronie zanikają, gdy się pojawiają.

Domyślnie animacja dołączona do elementu jest wyświetlana na osi czasu dokumentu. Jej czas rozpoczęcia zaczyna się o 0 w momencie załadowania strony i zaczyna przesuwać się do przodu w miarę upływu czasu. Jest to domyślna oś czasu animacji i do tej pory była to jedyna oś czasu animacji, do której masz dostęp.

Specyfikacja animacji opartych na przewinięciu definiuje dwa nowe typy osi czasu, których można używać:

  • Oś czasu postępu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania wzdłuż konkretnej osi.
  • Oś czasu postępu wyświetlania: oś czasu powiązana z względem pozycji określonego elementu w kontenerze przewijania.

Oto przykładowy kod, który korzysta z anonimowej osi czasu postępu przewijania, by utworzyć wskaźnik postępu czytania na stałe umieszczony w górnej części 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 szczegółów i inne przykłady znajdziesz w artykule o animacjach z funkcją przewijania.

Ogrodzone ramki

Piaskownica prywatności to inicjatywa, której celem jest tworzenie technologii, które będą chronić prywatność użytkowników online i udostępniać deweloperom narzędzia do tworzenia dobrze prosperujących usług internetowych.

Wiele z opracowanych w nich propozycji ma na celu zaspokojenie potrzeb użytkowników w różnych witrynach bez stosowania plików cookie innych firm czy 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.
  • Współdzielona pamięć masowa: umożliwia dostęp do niepartycjonowanych danych z różnych witryn w bezpiecznym środowisku.

Ze względu na ochronę prywatności niektóre z tych interfejsów API wymagają nowego sposobu umieszczania treści. Rozwiązanie to jest nazywane ramką ogrodzoną.

Chronione ramki działają w połączeniu z innymi ofertami Piaskownicy prywatności, aby wyświetlać na jednej stronie dokumenty z różnych partycji pamięci.

Ogrodzona ramka to element HTML przeznaczony do umieszczonej treści, podobnie jak element iframe. W przeciwieństwie do elementów iframe ramka chroniona ogranicza komunikację z kontekstem umieszczania, by umożliwić jej dostęp do danych z innych witryn bez udostępniania ich w kontekście umieszczania.

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

Funkcja iframe fencedframe
Umieść treść Tak Tak
Umieszczona treść ma dostęp do kontekstu DOM Tak Nie
Kontekst umieszczania ma dostęp do interfejsu DOM zawartości umieszczonej Tak Nie
Dostrzegalne atrybuty, np. name Tak Nie
Adresy URL (http://example.com) Tak Tak (w zależności od przypadku użycia)
Źródło nieprzezroczyste zarządzane przez przeglądarkę (urn:uuid) Nie Tak
Dostęp do danych z różnych witryn Nie Tak (w zależności od przypadku użycia)

Załóżmy na przykład, że tag news.example (kontekst umieszczania) umieści reklamę z witryny shoes.example w otoczonej ramce. news.example nie może wydobywać danych z reklamy shoes.example, a shoes.example nie może zdobywać danych własnych z usługi news.example.

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

Zapoznaj się z artykułami na temat funkcji Fenced Frame, Protected Audience API, Shared Storage i nie tylko.

sygnały z interfejsu Topics API,

W przeszłości pliki cookie innych firm i inne mechanizmy były wykorzystywane do śledzenia zachowań użytkowników podczas przeglądania stron w celu określenia interesujących tematów. Te mechanizmy są wycofywane w ramach inicjatywy Piaskownica prywatności.

Interfejs Topics API pozwala przeglądarce udostępniać osobom trzecim informacje o zainteresowaniach użytkowników przy jednoczesnym zachowaniu prywatności.

Interfejs Topics API umożliwia wyświetlanie reklam opartych na zainteresowaniach bez śledzenia witryn odwiedzanych przez użytkownika. Przeglądarka obserwuje i zapisuje tematy, które wydają się interesujące dla użytkownika, na podstawie jego aktywności związanej z przeglądaniem. Te informacje są rejestrowane na urządzeniu użytkownika.

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

Tematy są sygnałem, który pomaga platformom technologii reklamowych w wyborze odpowiednich reklam. W przeciwieństwie do plików cookie innych firm informacje te są udostępniane bez ujawniania dalszych informacji o użytkowniku ani jego aktywności związanej z przeglądaniem.

Przeczytaj omówienie Piaskownicy prywatności, aby uzyskać szczegółowe informacje na temat taksonomii tematów i korzystania z interfejsu Topics API.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Maksymalny rozmiar WebAssembly.Module w wątku głównym został zwiększony do 8 MB
  • Właściwość CSS display przyjmuje teraz jako wartość wiele słów kluczowych, oprócz starszych wstępnie sformułowanych słów kluczowych.
  • W przypadku interfejsu Compute Pressure API dostępna jest wersja próbna origin, która zapewnia ogólne informacje o bieżącym stanie sprzętu urządzenia.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 115.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Cześć Adriana Jara, a gdy tylko Chrome 116 będzie dostępny, będę informować Cię o nowościach w Chrome.