Oto, co musisz wiedzieć na ten temat:
- Dokumenty w trybie obrazu w obrazie zapewniają większą kontrolę nad oknami obrazu w obrazie.
- Zawartość w deklaracjach CSS rozwiązuje niektóre trudne przypadki.
- 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 mieć go na oku, gdy korzystasz z innych witryn lub aplikacji. Ale tylko w przypadku filmów.
Interfejs API obrazu w dokumencie eliminuje to ograniczenie, umożliwiając tworzenie okna obrazu w obrazie, w którym masz 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 mapowany do obiektu JavaScript okna obrazu 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 wpis 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 niedawna i jest dostępne od prawie roku.
Wystąpiło kilka wyjątkowych przypadków, które nie dział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 deklaracje bez nazwy przeplatasz z regułami zagnieżdżonymi, 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 wiele wierszy, kolumn lub stron.
Na przykład ten element wygląda świetnie, gdy wszystko jest na jednej linii.
Gdy treści są dzielone na wiele linii, elementy dekoracyjne, takie jak tło, cień wokół ramki czy obramowanie, są dzielone, co powoduje dość drastyczne zmiany w wyglądzie.
Po dodaniu box-decoration-break: clone każdy fragment jest renderowany niezależnie, co zapewnia znacznie lepszy 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 wiele więcej!
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
Obejmuje to 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 deweloperó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, od razu wrócimy, aby opowiedzieć o nowych funkcjach w Chrome.