Nowości w Chrome 130

Pete LePage

Oto, co należy wiedzieć na ten temat:

• Obraz w obrazie w dokumentach daje większą kontrolę nad oknami obrazu w obrazie.
• Zagnieżdżone deklaracje CSS rozwiązują niektóre trudne przypadki brzegowe.
• Możesz określić zachowanie dekoracji elementów, które są podzielone na kilka wierszy.
• A to nie wszystko. Więcej informacji znajdziesz w tym artykule.

Jestem Pete LePage. Sprawdźmy, co nowego w Chrome 130 czeka na deweloperów.

Obraz w obrazie w Dokumentach

Interfejs API obrazu w obrazie jest przydatny, gdy chcesz wyodrębnić film z karty przeglądarki, aby móc go oglądać podczas korzystania z innych witryn lub aplikacji. Ale obsługuje tylko filmy.

Interfejs Document Picture-in-Picture API eliminuje to ograniczenie, umożliwiając tworzenie okna obrazu w obrazie, w którym masz kontrolę nad treścią. Świetnie sprawdza się w przypadku niestandardowych odtwarzaczy wideo, aplikacji do prowadzenia rozmów wideo i aplikacji zwiększających produktywność. Bardzo podoba mi się to, co Spotify zrobiło w swoim odtwarzaczu internetowym. Otwiera się okno z okładką aktualnie odtwarzanego utworu i elementami sterującymi odtwarzaniem. Mogę też łatwo dodać utwór do ulubionych.

Aby z niej skorzystać, poproś o nowe okno obrazu w obrazie dokumentu. Zwrócony obiekt promise jest rozpoznawany jako obiekt w JavaScripcie okna obrazu 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 poinformować Chrome, aby zawsze otwierał okno obrazu w obrazie w domyślnym położeniu i rozmiarze, zamiast ponownie używać położenia lub rozmiaru poprzedniego okna.

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

Więcej informacji znajdziesz w poście Françoisa Obraz w obrazie dla dowolnego elementu.

Zagnieżdżone deklaracje CSS

Zagnieżdżanie CSS umożliwia tworzenie krótszych selektorów, łatwiejsze odczytywanie i większą modułowość dzięki zagnieżdżaniu reguł w innych regułach. Zagnieżdżanie CSS jest nowo dostępną funkcją podstawową i jest dostępne od prawie roku.

W kilku przypadkach nie działały one zgodnie z oczekiwaniami. Na przykład w przypadku tego bloku CSS kolor tła powinien być zielony, ponieważ jest on ostatni, ale jest czerwony.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Aby rozwiązać takie przypadki, grupa robocza CSS wprowadziła regułę deklaracji zagnieżdżonych, która jest zaimplementowana w Chrome 130. Teraz ten sam blok CSS powoduje, że tło jest zielone, zgodnie z oczekiwaniami. Jeśli przeplatałeś(-aś) deklaracje podstawowe z regułami zagnieżdżonymi, dokładnie sprawdź kod.

Więcej informacji znajdziesz w artykule Bramusa CSS nesting improves with CSSNestedDeclarations.

box-decoration-break

Właściwość CSS box-decoration-break pozwala określić, jak fragmenty elementu powinny być renderowane, gdy są podzielone na kilka wierszy, kolumn lub stron.

Na przykład ten element wygląda świetnie, gdy wszystko jest w jednym wierszu.

Gdy treść jest podzielona na kilka wierszy, dekoracje takie jak tło, cień pola, obramowanie itp. są przycinane, co daje dość drastyczny efekt.

Dodając box-decoration-break: clone, każdy fragment jest renderowany niezależnie, co daje znacznie lepszy efekt.

Nie jest to jeszcze Baseline, ale jest dostępny w Chrome i Firefox, a w Safari ma prefiks dostawcy.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Więcej informacji znajdziesz w box-decoration-breakdokumentacji w MDN i w poście 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 wreszcie pojawiają się kontenery z paskami przewijania, które można zaznaczyć za pomocą klawiatury.
• WebGPU zyskuje mieszanie z 2 źródeł.
• Interfejs Web Serial uzyskuje atrybut connected.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze kwestie. Dodatkowe zmiany w Chrome 130 znajdziesz pod tymi linkami:

• 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 źródłowego Chromium
• Kalendarz publikacji wersji Chrome

Zasubskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers na YouTube. Będziesz otrzymywać powiadomienia e-mail o każdym nowym filmie.

Jestem Pete LePage i jak tylko Chrome 131 zostanie wydany, od razu powiemy Ci, co nowego w Chrome.