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.

Dokumentation zur Funktion „Bild im Bild“

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. Es kann aber nur Videos.

Fenster der Funktion „Bild im Bild“ von Spotify

Mit der Document Picture-in-Picture API wird diese Einschränkung aufgehoben. Sie können ein Bild-im-Bild-Fenster erstellen, in dem Sie die Kontrolle über die Inhalte haben. Sie eignet sich hervorragend für benutzerdefinierte Videoplayer, Videokonferenzen und Produktivitäts-Apps. Ich finde es toll, was Spotify im Webplayer daraus gemacht 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.

Um es zu verwenden, fordern Sie ein neues Bild-im-Bild-Fenster für Dokumente an. Die 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 Fenster für „Bild im Bild“ 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 zum Thema Bild im Bild für beliebige Elemente!

Geschachtelte Deklarationen in CSS

CSS-Nesting ermöglicht kürzere Selektoren, eine bessere Lesbarkeit und mehr Modularität, indem Regeln ineinander verschachtelt werden. 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. Sie ist aber rot.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Um solche Grenzfälle zu beheben, hat die CSS Working Group 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 wird mit CSSNestedDeclarations verbessert 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 mit Klon

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

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

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

Abonnieren

Wenn Sie 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.