Nowości w Chrome 110

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Dodaj niestandardowy styl do elementów obrazu w obrazie za pomocą nowego parametru :picture-in-picture pseudo class.
  • Ustaw zachowanie podczas uruchamiania aplikacji internetowej za pomocą parametru launch_handler w manifeście.
  • użyj atrybutu credentialless w elementach iframe, aby osadzić treści innych firm, które nie mają ustawionych zasad umieszczania zasobów z innych domen.
  • A to nie koniec.

Nazywam się Adriana Jara. Zobacz, co nowego w Chrome 110 dla deweloperów.

:picture-in-picture pseudo class

Dzięki interfejsowi Picture-in-Picture API witryny mogą tworzyć pływające okna wideo, które zawsze są na górze, aby użytkownicy mogli nadal oglądać treści multimedialne, jednocześnie korzystając z innych treści.

Dzięki pseudoklasie CSS :picture-in-picture możesz teraz dodawać style do elementów, aby polepszyć wrażenia użytkowników.

Fragment kodu poniżej pokazuje, jak za pomocą klasy obrazu w obrazie dodać do kontenera wideo wiadomość, która przypomina użytkownikowi, że film jest teraz odtwarzany gdzie indziej.

#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, by element wideo był przezroczysty i prawidłowo wyświetlał komunikat.

Wypróbuj przykład i popraw jakość filmów w trybie obrazu w obrazie.

Użytkownik pliku manifestu launch_handler.

Interfejs Launch Handler API pozwala kontrolować sposób uruchamiania aplikacji internetowej, na przykład czy ma ona korzystać z istniejącego czy nowego okna oraz czy wybrane okno prowadzi do adresu URL uruchamiania.

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

Teraz aplikacje internetowe mogą dostosowywać sposób uruchamiania za pomocą elementu launch_handler pliku manifestu.

Na przykład poniższy fragment kodu powoduje, że wszystkie uruchomienia tej aplikacji internetowej będą skupiać się na istniejącym oknie aplikacji i przechodzić do niego (jeśli istnieje), zamiast zawsze uruchamiać nowe okno.

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

credentialless elementy iframe.

Jednym z największych wyzwań związanych z izolacją źródeł z innych domen jest konieczność wdrożenia we wszystkich elementach iframe z innych domen (COEP i CORP). Element iframe bez tych nagłówków nie zostanie załadowany przez przeglądarkę.

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

W przypadku credentialless iframe jest ładowany z innego, pustego kontekstu. W szczególności jest on wczytywany bez plików cookie. Element iframe zaczyna się od pustego pliku cookie.

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

Więcej informacji o bezpiecznym używaniu tagu credentialless do ładowania treści innych firm w elementach iframe znajdziesz w tym artykule.

I inne funkcje

I oczywiście jest tego znacznie więcej.

Usługa Web SQL została usunięta w niezabezpieczonych kontekstach.

Właściwość CSS initial-letter umożliwia ustawienie liczby wierszy, w których litera początkowa powinna być umieszczana w kolejnych wierszach tekstu.

FileSystemHandle zawiera teraz metodę remove().

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać dodatkowe zmiany w Chrome 110, 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.

Nazywam się Adriana Jara i jak tylko pojawi się nowa wersja Chrome 111, opowiem Ci, co nowego w tej przeglądarce.