Nowości w Chrome 130

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage. Zobacz, 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.

Okno obrazu w obrazie w Spotify

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ł 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 obrazu w obrazie dokumentu. Zwracany obiekt promise jest rozwiązywany za pomocą obiektu JavaScript okna obraz w obrazie. Następnie użyj go, aby dodać 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ł. Zagnieżdżanie CSS 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 w Twoim kodzie występują deklaracje bez nazewnictwa 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 umożliwia określenie sposobu renderowania fragmentów elementu, gdy są one podzielone na wiele wierszy, kolumn lub stron.

Brak podziałów wiersza

Na przykład ten element wygląda świetnie, gdy wszystko jest na jednej linii.

Podziały wiersza w przypadku wycinków

Gdy treści są dzielone na wiele linii, elementy dekoracyjne, takie jak tło, cień, obramowanie itp., są dzielone, co powoduje dość drastyczne zmiany w wyglądzie.

Podziały wiersza w klonie

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.

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.

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, od razu wrócimy, aby opowiedzieć o nowych funkcjach w Chrome.