Oto, co musisz wiedzieć na ten temat:
- Aby zwiększyć produktywność użytkowników, użyj interfejsu Document Picture in Picture API.
- Teraz łatwiej jest debugować brakujące arkusze stylów w Narzędziach deweloperskich.
- A to nie wszystko.
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 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, który otwiera 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ę następujący 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ń, 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.
- 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.
Panel sieci konsekwentnie wypełnia kolumnę Inicjator linkami do dokładnej linii, która odwołuje się do niewczytanego pliku stylesheet.
Panel Problemy zawiera wszystkie problemy z wczytywaniem arkuszy stylów, w tym nieprawidłowe adresy URL, nieudane żądania i błędnie umieszczone instrukcje @import
.
Więcej informacji o narzędziach deweloperskich w Chrome 116 znajdziesz w artykule Nowości w narzędziu DevTools.
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
icontent-visibility
, co umożliwia dodawanie animacji wyjścia wyłącznie w CSS. - Interfejs fetch API może teraz służyć do obsługi źródeł danych typu Bring Your Own Buffer, co zmniejsza obciążenie i kopiowanie podczas usuwania elementów z pamięci podręcznej oraz 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.
- Nowości w Narzędziach deweloperskich w Chrome (116)
- Chrome 116 – wycofane i usunięte funkcje
- Aktualizacje ChromeStatus.com dotyczące Chrome 116
- Lista zmian w repozytorium kodu Chromium
- Kalendarz wydań Chrome
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.