Oto, co musisz wiedzieć na ten temat:
- Użyj elementów
ScrollTimeline
iViewTimeline
, 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:
Animacje wywoływane przez przewijanie mogą też tworzyć elementy, które stopniowo pojawiają się w widoku:
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
.
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.
- Nowości w Narzędziach deweloperskich w Chrome (115)
- Wycofanie i usunięcie funkcji w Chrome 115
- Aktualizacje ChromeStatus.com dotyczące Chrome 115
- Lista zmian w repozytorium kodu Chromium
- Kalendarz wydań Chrome
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.