Oto, co musisz wiedzieć na ten temat:
- Używaj interfejsu Document Picture in Picture API, aby zwiększyć produktywność użytkowników.
- debugowanie brakujących arkuszy stylów w Narzędziach deweloperskich jest teraz łatwiejsze;
- A to jeszcze wiele więcej.
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 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
”.
- 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ć.
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
.
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
icontent-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.
- Nowości w Narzędziach deweloperskich w Chrome (116)
- Wycofanie i usunięcie Chrome 116
- Aktualizacje ChromeStatus.com w Chrome 116
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
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.