Nowości w Chrome 116

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Sprawdź, co nowego w Chrome 116 dla deweloperów.

interfejsu Document Picture-in-Picture API.

Interfejs Document Picture-in-Picture API umożliwia otwieranie okna zawsze widocznego na wierzchu, które może zawierać dowolną treść HTML.

Okno obrazu w obrazie z odtwarzanym zwiastunem filmu Sintel.
Okno obrazu w obrazie utworzone za pomocą interfejsu Document Picture-in-Picture API (demo).

Okno obrazu w obrazie w interfejsie Document Picture-in-Picture API jest podobne do pustego okna tego samego pochodzenia otwartego za pomocą window.open(), ale z pewnymi różnicami:

  • Okno obrazu w obrazie będzie się unosić nad innymi oknami.
  • Okno obrazu w obrazie nigdy nie jest dłuższe niż okno otwierające.
  • Nie można poruszać się po oknie obrazu w obrazie.
  • Witryna nie może ustawić pozycji okna obrazu w obrazie.

Poniższy kod HTML pozwala skonfigurować niestandardowy odtwarzacz wideo i element przycisku otwierającego odtwarzacz wideo 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>

Następujący kod JavaScript wywołuje documentPictureInPicture.requestWindow(), gdy użytkownik kliknie przycisk w celu otwarcia pustego okna obrazu w obrazie. Zwracana obietnica rozwiązuje się z obiektem JavaScript okna Picture-in-Picture. Odtwarzacz wideo jest przenoszony do tego okna za pomocą przycisku 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 informacji i przykładów znajdziesz w artykule Picture-in-picture for any element.

Ulepszone debugowanie arkuszy stylów w Narzędziach deweloperskich

Wprowadzono w Narzędziach deweloperskich wiele ulepszeń służących do identyfikowania i debugowania brakujących arkuszy stylów.

Po pierwsze, aby uniknąć nieporozumień, drzewo Źródła > Strona zawiera teraz tylko wdrożone i załadowane arkusze stylów.

Ponadto w sekcji Źródła > Edytowanie podświetlane są instrukcje @import, url() i href, a obok nich wyświetlane są tooltipy z informacjami o błędach.

Podkreślone stwierdzenia z opisami w panelu Źródła.

  • Konsola zawiera teraz nie tylko linki do nieudanych próśb, ale też linki do konkretnego wiersza, który odwołuje się do niewczytanego pliku stylesheet.

W konsoli znajdziesz linki do dokładnych wierszy z problematycznymi instrukcjami.

Panel sieci konsekwentnie wypełnia kolumnę Inicjator linkami do dokładnej linii, która odwołuje się do niewczytanego pliku stylesheet.

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

Panel Problemy z linkami do źródeł i żądań.

Zapoznaj się z nowościami w Narzędziach deweloperskich, aby dowiedzieć się więcej o Narzędziach deweloperskich w Chrome 116.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Ścieżka animacji umożliwia autorom umieszczanie dowolnego obiektu graficznego i animowanie go wzdłuż ścieżki określonej przez dewelopera.
  • W animacjach klatki kluczowej są teraz obsługiwane właściwości display i content-visibility, co umożliwia dodawanie animacji wyjścia wyłącznie w CSS.
  • Interfejs fetch API może teraz służyć do obsługi czytników z własnym buforem, co zmniejsza obciążenie związane z zbieraniem i kopiowaniem oraz poprawia szybkość działania aplikacji.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 116, 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.

Cześć, tu Adriana Jara. Gdy tylko pojawi się wersja 117 Chrome, opowiem Ci, co nowego w tej przeglądarce.