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ść.
  • A to nie wszystko.

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

Animacje sterowane przez przewijanie

Animacje wywoływane przez przewijanie są częstym wzorcem UX w internecie. Animacja wywoływana przez przewijanie jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewiniesz w górę lub w dół, powiązana animacja przesunie się do przodu lub do tyłu w bezpośredniej odpowiedzi.

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 na górze dokumentu, który działa po przewinięciu.

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 w momencie wczytania strony i zaczyna się przesuwać 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 miałeś/miałaś dostęp.

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

  • Oś postępu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania wzdłuż 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 widoku.

<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.

Ramki chronione

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 tych propozycji ma na celu umożliwienie korzystania z różnych witryn bez plików cookie innych firm ani innych mechanizmów śledzenia. Na przykład:

  • 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 niezapartionych 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.

Ogrożona ramka to element HTML do umieszczania treści, podobny do ramki iframe. W przeciwieństwie do elementów 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.

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

Funkcja iframe fencedframe
Umieszczenie treści Tak Tak
Umieszczona treść może uzyskać dostęp do kontekstu DOM umieszczenia Tak Nie
Umieszczanie kontekstu może uzyskiwać dostęp do DOM umieszczonej 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 news.example (kontekst umieszczania) umieszcza reklamę z shoes.example w ramce odizolowanej. 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 podziału miejsca na dane 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. Te mechanizmy są wycofywane w ramach inicjatywy Piaskownica prywatności.

Interfejs Topics API umożliwia przeglądarce udostępnianie informacji o zainteresowaniach użytkownika osobom trzecim przy jednoczesnym zachowaniu 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.

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

Tematy to sygnał, który pomaga platformom reklamowym dobierać odpowiednie reklamy. W przeciwieństwie do 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 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

Ta lista zawiera 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 tej przeglądarce.