Nowości w Chrome 116

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

Dokumentacja interfejsu 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 konfiguruje niestandardowy odtwarzacz wideo i element przycisku, aby otworzyć 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>

Gdy użytkownik kliknie przycisk, aby otworzyć puste okno obrazu w obrazie, wywołuje się kod JavaScript documentPictureInPicture.requestWindow(). 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

W Narzędziach deweloperskich wprowadzono kilka ulepszeń, które ułatwiają wykrywanie i rozwiązywanie problemów z brakiem arkuszy stylów.

Po pierwsze, aby uniknąć nieporozumień, w drzewie Źródła > Strona wyświetlane są 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ą informacje 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.

Konsola zawiera linki do konkretnych wierszy z problematycznymi stwierdzeniami.

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

Panel z problemami zawiera wszystkie problemy z wczytywaniem arkuszy stylów, w tym nieprawidłowe adresy URL, nieudane żądania i nieprawidłowo umieszczone instrukcje @import.

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

Więcej informacji o narzędziach deweloperskich w Chrome 116 znajdziesz w artykule Nowości w narzędziu DevTools.

I wiele więcej!

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 być teraz używany przez czytników z własnym buforem, co zmniejsza obciążenie i kopiowanie zbierania elementów dostępnych do zbierania i poprawia szybkość reakcji dla użytkowników.

Więcej informacji

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