Neu in Chrome 130

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 130 gibt.

Bild im Bild für Dokumente

Die „Bild im Bild“-API ist ideal, wenn Sie ein Video aus einem Browsertab herausziehen möchten, damit Sie es im Blick behalten können, während Sie mit anderen Websites oder Anwendungen interagieren. Aber es kann nur Videos.

Bild-im-Bild-Fenster von Spotify

Die Document Picture-in-Picture API beseitigt diese Einschränkung und ermöglicht es Ihnen, ein Bild-im-Bild-Fenster zu erstellen, in dem Sie die Kontrolle über den Inhalt haben. Das ist ideal für benutzerdefinierte Videoplayer, Videokonferenzen und Produktivitäts-Apps. Ich finde es toll, wie Spotify das im Webplayer umgesetzt hat. Ich sehe ein Fenster mit dem Cover des aktuellen Songs, Steuerelementen für die Wiedergabe und kann den Song ganz einfach zu meinen Favoriten hinzufügen.

Fordern Sie dazu ein neues Bild-im-Bild-Fenster für das Dokument an. Das zurückgegebene promise wird mit einem JavaScript-Objekt für das Bild-im-Bild-Fenster aufgelöst. Fügen Sie dann damit Ihre Inhalte in das Fenster ein.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

Mit der neuen preferInitialWindowPlacement-Eigenschaft können Sie Chrome anweisen, das Bild-im-Bild-Fenster immer in seiner Standardposition und -größe zu öffnen, anstatt die Position oder Größe des vorherigen Fensters wiederzuverwenden.

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

Weitere Informationen finden Sie im Beitrag von François Picture-in-Picture for any Element.

Verschachtelte CSS-Deklarationen

Mit CSS-Nesting können Sie Regeln ineinander verschachteln, um kürzere Selektoren zu erstellen, die leichter zu lesen sind und eine höhere Modularität ermöglichen. CSS-Nesting ist Baseline Newly available und seit fast einem Jahr verfügbar.

Es gab einige Grenzfälle, die nicht wie erwartet funktionierten. Im folgenden CSS-Block sollte die Hintergrundfarbe beispielsweise grün sein, da sie zuletzt angegeben wird. Stattdessen ist sie aber rot.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Um solche Grenzfälle zu beheben, hat die CSS-Arbeitsgruppe die Regel für verschachtelte Deklarationen eingeführt, die in Chrome 130 implementiert ist. Jetzt führt derselbe CSS-Block wie erwartet zu einem grünen Hintergrund. Wenn Sie Deklarationen ohne umschließende Regeln mit verschachtelten Regeln kombiniert haben, sollten Sie Ihren Code noch einmal überprüfen.

Eine ausführlichere Erklärung finden Sie im Artikel CSS nesting improves with CSSNestedDeclarations von Bramus.

box-decoration-break

Mit der CSS-Eigenschaft box-decoration-break können Sie angeben, wie die Fragmente eines Elements gerendert werden sollen, wenn sie über mehrere Zeilen, Spalten oder Seiten verteilt sind.

Keine Zeilenumbrüche

Dieses Element sieht beispielsweise gut aus, wenn alles in einer Zeile steht.

Zeilenumbrüche mit Slices

Wenn der Inhalt auf mehrere Zeilen aufgeteilt wird, werden Dekorationen wie Hintergrund, Schatten, Rahmen usw. abgeschnitten, was zu einem eher drastischen Erscheinungsbild führt.

Zeilenumbrüche beim Klonen

Durch Hinzufügen von box-decoration-break: clone wird jedes Fragment unabhängig gerendert, was für ein viel besseres Erscheinungsbild sorgt.

Sie ist zwar nicht ganz Baseline, aber in Chrome und Firefox verfügbar und in Safari mit einem Anbieterpräfix versehen.

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

Weitere Informationen finden Sie in der box-decoration-break-Dokumentation auf MDN und im Beitrag von Rachel Die Eigenschaft „box-decoration-break“ in Chrome 130.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 130.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 131 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.