Nowości w Chrome 116

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

Document Picture-in-Picture API.

Interfejs Document Picture-in-Picture API umożliwia otwarcie okna zawsze na górze, w którym można umieścić dowolną treść HTML.

Okno obrazu w obrazie odtwarzające zwiastun Sintel.
Okno obrazu w obrazie utworzone przy użyciu interfejsu Document Picture-in-Picture API (prezentacja).

Okno obrazu w obrazie w interfejsie Document Picture-in-Picture API jest podobne do pustego okna z tym samym źródłem otwartego za pomocą elementu window.open(), z pewnymi różnicami:

  • Okno obrazu w obrazie unosi się nad innymi oknami.
  • Okno obrazu w obrazie nigdy nie przekracza poziomu otwarcia.
  • Nie można poruszać się po oknie Obraz w obrazie.
  • Witryna nie może ustawić położenia okna obrazu w obrazie.

Poniższy kod HTML pozwala skonfigurować niestandardowy odtwarzacz wideo i element przycisku otwierający odtwarzacz w oknie obrazu w obrazie.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Poniższy kod JavaScript wywołuje funkcję documentPictureInPicture.requestWindow(), gdy użytkownik kliknie przycisk, aby otworzyć puste okno obrazu w obrazie. Zwrócona obietnica zostaje rozpoznana za pomocą obiektu JavaScript okna obrazu w obrazie. Odtwarzacz zostanie przeniesiony do tego okna przy użyciu elementu append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Więcej szczegółów i przykładów znajdziesz w sekcji Obraz w obrazie dowolnego elementu.

W Narzędziach deweloperskich brakuje ulepszeń dotyczących debugowania arkuszy stylów.

W Narzędziach deweloperskich wprowadziliśmy szereg ulepszeń umożliwiających identyfikowanie i debugowanie problemów z brakującymi arkuszami stylów.

Po pierwsze: drzewo Źródła > Strona pokazuje teraz tylko pomyślnie wdrożone i wczytane arkusze stylów, co pozwala zminimalizować pomyłki.

Ponadto sekcja Źródła > Edytor jest teraz podkreślana i wyświetla wbudowane etykietki błędów obok instrukcji „Niepowodzenie”, „@import”, „url()” i „href”.

Podkreślone instrukcje z etykietkami w panelu Źródła.

  • Oprócz linków do nieudanych żądań konsola udostępnia teraz linki do dokładnego wiersza zawierającego odwołanie do arkusza stylów, którego nie udało się wczytać.

Konsola zawiera linki do dokładnych wierszy z problematycznymi instrukcjami.

W panelu Sieć w kolumnie Inicjator znajdują się linki do konkretnego wiersza odwołującego się do arkusza stylów, którego nie udało się wczytać.

Panel Problemy zawiera listę wszystkich problemów z wczytywaniem arkuszy stylów, w tym uszkodzonych adresów URL, nieudanych żądań i nieprawidłowych instrukcji @import.

Panel Problemy z linkami do źródeł i próśb.

W sekcji Nowości w Narzędziach deweloperskich znajdziesz więcej szczegółów na temat Narzędzi deweloperskich w Chrome 116.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Ścieżka animacji umożliwia autorom umieszczanie dowolnego obiektu graficznego i animowanie go wzdłuż ścieżki określonej przez programistę.
  • Właściwości display i content-visibility są teraz obsługiwane w animacjach klatek kluczowych, co umożliwia dodawanie animacji wyjścia wyłącznie w CSS.
  • Interfejsu API pobierania można teraz używać razem z czytnikami własnego bufora, co zmniejsza nakład pracy związany z zbieraniem śmieci i generuje kopie oraz zwiększa czas reakcji użytkowników.

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

Subskrybuj

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

Cześć Adriana Jara, a gdy tylko Chrome 117 będzie dostępny, będę tu, by opowiedzieć Ci, co nowego w Chrome.