Oto, co musisz wiedzieć na ten temat:
- Dokument w trybie obrazu w obrazie zapewnia większą kontrolę nad oknami obrazu w obrazie.
- Zawartość w deklaracjach CSS rozwiązuje niektóre trudne przypadki błędów.
- Możesz określić zachowanie ozdobień na elementach, które są podzielone na kilka wierszy.
- I to nie wszystko .
Nazywam się Pete LePage. Zobaczmy, co nowego w Chrome 130 dla deweloperów.
Dokumentacja trybu Obraz w obrazie
Interfejs API obrazu w obrazie jest przydatny, gdy chcesz wyodrębnić film z karty przeglądarki, aby móc go oglądać, jednocześnie korzystając z innych witryn lub aplikacji. Ale tylko wideo.
Interfejs API obrazu w dokumencie eliminuje to ograniczenie, umożliwiając tworzenie okna obrazu w obrazie, w którym użytkownik ma kontrolę nad treściami. Świetnie sprawdza się w przypadku niestandardowych odtwarzaczy wideo, konferencji wideo i aplikacji zwiększających produktywność. Uwielbiam to, co Spotify zrobił z tym w swoim odtwarzaczu internetowym. Pojawia się okno z okładką bieżącego utworu i elementami sterującymi odtwarzaniem. Utwór można łatwo dodać do ulubionych.
Aby z niej skorzystać, poproś o nowe okno dokumentu w trybie obrazu w obrazie. Zwracany obiekt promise jest rozwiązywany za pomocą obiektu JavaScript okna obraz w obrazie.
Następnie użyj go do dodania treści do okna.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
Dzięki nowej właściwości preferInitialWindowPlacement możesz powiedzieć Chrome, aby zawsze otwierało okno obrazu w oknie w domyślnej pozycji i rozmiarze, zamiast używać pozycji lub rozmiaru poprzedniego okna.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Aby dowiedzieć się więcej, przeczytaj post Françoisa na temat okna Picture-in-Picture w dowolnym elemencie.
Zagnieżdżone deklaracje CSS
Zespolone reguły CSS umożliwiają krótsze selektory, ułatwiają czytanie i zwiększają modularność dzięki zagnieżdżaniu reguł. Umieszczanie CSS w ramach jest dostępne od dłuższego czasu i jest dostępne od prawie roku.
Wystąpiło kilka wyjątkowych przypadków, które nie zadziałały zgodnie z oczekiwaniami. Na przykład w przypadku tego bloku kodu CSS można oczekiwać, że kolor tła będzie zielony, ponieważ jest ostatni, ale jest czerwony.
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Aby rozwiązać takie problemy, grupa robocza CSS wprowadziła regułę deklaracji zagnieżdżonych, która jest implementowana w Chrome 130. Teraz ten sam blok kodu CSS powoduje, zgodnie z oczekiwaniami, zielone tło. Jeśli w Twoim kodzie występują deklaracje bezwartościowe z zagnieżdżonymi regułami, dokładnie sprawdź kod.
Aby dowiedzieć się więcej, przeczytaj artykuł Bramusa ulepszone zagnieżdżanie CSS za pomocą CSSNestedDeclarations.
box-decoration-break
Właściwość CSS box-decoration-break pozwala określić, jak elementy mają być renderowane, gdy są podzielone na kilka wierszy, kolumn lub stron.
Na przykład ten element wygląda świetnie, gdy wszystko jest na jednej linii.
Gdy treści są dzielone na kilka linii, elementy dekoracyjne, takie jak tło, cień, obramowanie itp., są dzielone, co powoduje dość drastyczne zmiany w wyglądzie.
Dodanie box-decoration-break: clone spowoduje, że każdy fragment będzie renderowany niezależnie, co znacznie poprawi wygląd.
Chociaż nie jest to do końca poziom podstawowy, jest dostępny w Chrome i Firefoksie, a w Safari ma prefiks dostawcy.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Aby dowiedzieć się więcej, zapoznaj się z dokumentacją box-decoration-break na stronie MDN oraz z artykułem Rachel Właściwość box-decoration-break w Chrome 130.
I inne funkcje
Oczywiście jest ich znacznie więcej.
- Po kilku nieudanych próbach kontenery z paskami przewijania, które można zaznaczyć za pomocą klawiatury, w końcu się pojawiają.
- WebGPU obsługuje mieszanie z 2 źródeł.
- Serial internetowy otrzymuje powiązany atrybut.
Więcej informacji
Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 130, kliknij te linki.
- Informacje o wersji Chrome 130
- Nowości w Narzędziach deweloperskich w Chrome (130)
- Aktualizacje ChromeStatus.com dotyczące Chrome 130
- 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.
Nazywam się Pete LePage i jak tylko pojawi się nowa wersja Chrome 131, opowiemy Ci, co nowego w Chrome.