Nowości w Chrome 110

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Dodaj własny styl do elementów obraz w obrazie dzięki nowej pseudoklasie :picture-in-picture.
  • Skonfiguruj sposób uruchamiania aplikacji internetowej za pomocą parametru launch_handler w pliku manifestu.
  • użyj atrybutu credentialless w elementach iframe, aby umieszczać treści należące do osób trzecich, dla których nie ustawiono zasad dotyczących umieszczania reklam ze stron zewnętrznych;
  • A to jeszcze wiele więcej.

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

:pseudoklasa obraz w obrazie

Witryny za pomocą interfejsu Picture-in-Picture API mogą tworzyć pływające okno wideo, które zawsze znajduje się na górze, dzięki czemu użytkownicy mogą w dalszym ciągu korzystać z multimediów podczas interakcji z innymi treściami.

Dzięki pseudoklasie CSS :picture-in-picture możesz dodawać style do elementów, aby zwiększyć wygodę użytkowników.

Fragment kodu poniżej pokazuje, jak za pomocą klasy obraz w obrazie dodać do kontenera filmu komunikat przypominający użytkownikowi, że film jest teraz odtwarzany w innym miejscu.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Ponownie użyj pseudoklasy w elemencie wideo, aby element był przezroczysty i że komunikat został wyświetlony poprawnie.

Wypróbuj ten przykład i ulepsz jakość obrazu w obrazie.

user_handler – plik manifestu.

Interfejs Launch Handler API pozwala kontrolować sposób uruchamiania aplikacji internetowej. Na przykład to, czy ma ona być używane istniejące czy nowe okno oraz czy wybrane okno ma otwierać URL uruchamiania.

Oto przykład: jeśli na komputerze zainstalujesz aplikację, a potem otworzysz ją w przeglądarce, zobaczysz przycisk umożliwiający przejście do samodzielnej aplikacji. Wcześniej jedynym możliwym działaniem było uruchomienie aplikacji w nowym oknie.

Teraz można dostosowywać sposób uruchamiania aplikacji internetowych za pomocą elementów manifestu launch_handler.

Na przykład poniższy fragment kodu powoduje, że podczas wszystkich uruchomień tej aplikacji internetowej koncentruje się na istniejącym oknie aplikacji i przechodzi do niego (jeśli istnieje), a nie zawsze otwiera nowe okno.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless elementu iframe.

Jednym z największych wyzwań związanych z izolacją zasobów z innych domen jest wymóg wdrożenia we wszystkich elementach iframe COEP i CORP . Element iframe bez tych nagłówków nie zostanie wczytany przez przeglądarkę.

Atrybut credentialless pomaga umieścić elementy iframe innych firm, które nie ustawiają tych nagłówków.

W przypadku credentialless element iframe jest wczytywany z innego, pustego kontekstu. W szczególności jest ono wczytywane bez plików cookie. Element iframe zaczyna się od pustego kontenera plików cookie.

Podobnie interfejsy API pamięci masowej, takie jak LocalStorage czy CacheStorage, wczytują i przechowują dane na nowej partycji efemerycznej. Cała pamięć jest czyszczona po wyładowaniu dokumentu najwyższego poziomu. Pozwala to usunąć ograniczenie dotyczące COEP.

Więcej informacji znajdziesz w tym artykule na temat bezpiecznego używania credentialless zawartości stron trzecich w elementach iframe.

…i wiele innych.

Jest ich też oczywiście znacznie więcej.

Usługa Web SQL jest teraz usuwana w niezabezpieczonych kontekstach.

Właściwość initial-letter CSS pozwala ustawić liczbę wierszy, które pierwsza litera musi uformować w kolejne wiersze tekstu.

FileSystemHandle zawiera teraz metodę remove().

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

Subskrybuj

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

Jestem Adriana Jara. Gdy tylko pojawi się Chrome 111, będę informować Cię o nowościach w Chrome.