Neu in Chrome 130

Pete LePage

Dazu sollten Sie Folgendes wissen:

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

Funktion „Bild im Bild“ für Dokumente

Die Bild-im-Bild-API ist ideal, wenn du ein Video aus einem Browsertab entfernen möchtest, damit du es im Auge behalten kannst, während du mit anderen Websites oder Anwendungen interagierst. Aber es funktioniert nur mit Video.

Bild-im-Bild-Fenster von Spotify

Die Picture-in-Picture API für Dokumente hebt diese Einschränkung auf und ermöglicht es Ihnen, ein Picture-in-Picture-Fenster zu erstellen, in dem Sie die Inhalte steuern können. Sie eignet sich hervorragend für benutzerdefinierte Videoplayer, Videokonferenzen und Produktivitäts-Apps. Ich finde es toll, was Spotify damit in seinem Webplayer gemacht hat. Es wird ein Fenster mit dem Artwork des aktuellen Titels und Wiedergabesteuerungen angezeigt. Ich kann den Titel ganz einfach zu meinen Favoriten hinzufügen.

Wenn Sie die Funktion verwenden möchten, fordern Sie ein neues Bild-im-Bild-Fenster für das Dokument an. Das zurückgegebene promise wird mit einem JavaScript-Objekt des Bild-im-Bild-Fensters aufgelöst. Fügen Sie dann Ihre Inhalte dem Fenster hinzu.

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 kannst du Chrome festlegen, dass das Bild-im-Bild-Fenster immer in der Standardposition und -größe geöffnet wird, anstatt die Position oder Größe des vorherigen Fensters zu verwenden.

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

Weitere Informationen findest du im Beitrag Picture-in-Picture für jedes Element von François.

Verschachtelte CSS-Deklarationen

Durch CSS-Verschachtelung können kürzere Selektoren, eine leichtere Lesbarkeit und mehr Modularität erreicht werden, indem Regeln in andere verschachtelt werden. CSS-Verschachtelung ist Baseline Newly available und seit fast einem Jahr verfügbar.

Es gab einige Grenzfälle, die nicht wie erwartet funktioniert haben. Im folgenden CSS-Block würde man beispielsweise erwarten, dass die Hintergrundfarbe grün ist, da sie als letztes kommt. Sie ist jedoch rot.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Um Grenzfälle wie diese zu beheben, hat die CSS-Arbeitsgruppe die verschachtelte Deklarationsregel eingeführt, die in Chrome 130 implementiert ist. Jetzt führt derselbe CSS-Block wie erwartet zu einem grünen Hintergrund. Wenn Sie bearbeitbare Deklarationen mit verschachtelten Regeln vermischt haben, sollten Sie Ihren Code noch einmal überprüfen.

Eine ausführlichere Erklärung finden Sie im Artikel CSS-Verschachtelung mit 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 es auf mehrere Zeilen, Spalten oder Seiten verteilt ist.

Keine Zeilenumbrüche

Dieses Element sieht beispielsweise gut aus, wenn alle Elemente in einer Zeile stehen.

Zeilenumbrüche mit Segmenten

Wenn die Inhalte über mehrere Linien verteilt werden, werden Dekorationen wie Hintergrund, Boxschatten, Rahmen usw. abgeschnitten, was einen ziemlich drastischen Look erzeugt.

Zeilenumbrüche beim Klonen

Durch Hinzufügen von box-decoration-break: clone wird jedes Fragment unabhängig gerendert, was einen viel schöneren Look erzeugt.

Es ist zwar nicht ganz Baseline, ist aber in Chrome und Firefox verfügbar und hat in Safari das Präfix des Anbieters.

.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 Artikel The box-decoration-break property in Chrome 130 von Rachel.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 130.

Abonnieren

Wenn du auf dem Laufenden bleiben möchtest, abonniere den YouTube-Kanal für Chrome-Entwickler. Du wirst dann per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 131 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.