Nowości w Chrome 110

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

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 wierzchu, aby użytkownicy mogli nadal oglądać treści multimedialne, jednocześnie korzystając z innych treści.

Teraz dzięki pseudoklasie :picture-in-picture w CSS możesz dodawać style do elementów, aby poprawić 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;
}

Użyj pseudoklasy ponownie w elemencie wideo, aby go uczynić przezroczystym i w ten sposób umożliwić prawidłowe wyświetlanie wiadomości.

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

Element manifestu launch_handler.

Interfejs Launch Handler API umożliwia kontrolowanie sposobu uruchamiania aplikacji internetowej. Możesz na przykład określić, czy ma ona używać istniejącego czy nowego okna oraz czy wybrane okno ma przejść do adresu URL uruchamiania.

Weźmy na przykład środowisko komputerów stacjonarnych. Jeśli 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ą między domenami jest to, że wszystkie iframe między domenami muszą stosować COEPCORP . Iframe bez tych nagłówków nie zostanie wczytany przez przeglądarkę.

Atrybut credentialless ułatwia umieszczanie ramek iframe innych firm, które nie mają ustawionych 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. Po zwolnieniu dokumentu najwyższego poziomu całe to miejsce na dane zostaje zwolnione. 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.

Baza danych WebSQL została teraz usunięta z niezabezpieczonych kontekstów.

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

FileSystemHandle zawiera teraz metodę remove().

Więcej informacji

Ta lista zawiera 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.