Nowości w Chrome 130

Pete LePage

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.
• Możesz określić działanie dekoracji elementów, które dzielą się na wiele linii.
• I to nie wszystko .

Nazywam się Pete LePage. Zobaczmy, co nowego dla programistów Chrome 130.

Dokumentacja trybu Obraz w obrazie

Interfejs „obraz w obrazie” przydaje się, gdy chcesz wydzielić film z karty przeglądarki, aby mieć na niego oko podczas interakcji z innymi stronami lub aplikacjami. ale tylko wideo.

Interfejs obraz w obrazie dokumentu eliminuje to ograniczenie, umożliwiając Ci utworzenie okna obrazu w obrazie, w którym masz kontrolę nad treścią. Ś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 wskazać, że przeglądarka Chrome ma zawsze otwierać okno obrazu w obrazie w domyślnej pozycji i w domyślnym rozmiarze, zamiast ponownie korzystać z pozycji lub rozmiaru poprzedniego okna.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Aby uzyskać więcej informacji, 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 niedawna 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ć tego typu skrajne przypadki, grupa robocza ds. CSS wprowadziła regułę zagnieżdżonych deklaracji, która jest wdrożona 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 wiele 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 istnieje też znacznie więcej możliwości.

• 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

To tylko niektóre z najważniejszych informacji. 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 na ChromeStatus.com w przypadku 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, od razu wrócimy, aby opowiedzieć o nowych funkcjach w Chrome.