Nieuw in Chrome 130

Pete LePage

U moet het volgende weten:

Ik ben Pete LePage. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 130.

Scherm-in-scherm voor documenten

De scherm-in-scherm-API is ideaal als je een video uit een browsertabblad wilt halen, zodat je de video in de gaten kunt houden terwijl je interactie hebt met andere sites of apps. Maar het doet alleen video.

Het scherm-in-scherm-venster van Spotify

De scherm-in-scherm API voor documenten heft die beperking op, zodat je een scherm-in-scherm-venster kunt maken waarin je de content beheert. Het is ideaal voor aangepaste videospelers, videovergaderingen en productiviteitsapps. Ik vind het geweldig wat Spotify ermee heeft gedaan in hun webspeler. Ik krijg een venster met de hoes van het huidige nummer en afspeelbediening. Ook kan ik het nummer makkelijk toevoegen aan mijn favorieten.

Vraag een nieuw scherm-in-schermvenster voor documenten aan om de functie te gebruiken. De geretourneerde promise wordt opgelost met een JavaScript-object voor het scherm-in-scherm-venster. Gebruik dit om je content aan het venster toe te voegen.

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

pipButton.addEventListener('click', openDPiP);

Met de nieuwe eigenschap preferInitialWindowPlacement kun je Chrome vertellen het scherm-in-scherm-venster altijd te openen op de standaardpositie en met het standaardformaat, in plaats van de positie of het formaat van het vorige venster opnieuw te gebruiken.

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

Bekijk de post van François Scherm-in-scherm voor elk element voor veel meer informatie.

Geneste CSS-declaraties

CSS-nesting maakt kortere kiezers, makkelijker lezen en meer modulariteit mogelijk door regels in andere regels te nesten. CSS Nesting is Baseline Nieuw beschikbaar en is al bijna een jaar beschikbaar.

Er waren een paar uitzonderingen die niet werkten zoals verwacht. Met het volgende CSS-blok zou je bijvoorbeeld verwachten dat de achtergrondkleur groen is, omdat deze als laatste komt, maar de kleur is rood.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

De CSS-werkgroep heeft de regel voor geneste declaraties geïntroduceerd om dit soort extreme gevallen op te lossen. Deze regel is geïmplementeerd in Chrome 130. Nu resulteert hetzelfde CSS-blok in een groene achtergrond, zoals verwacht. Als je kale declaraties afwisselde met geneste regels, moet je je code dubbelchecken.

Ga naar het artikel van Bramus CSS nesting improves with CSSNestedDeclarations voor een uitgebreidere uitleg.

box-decoration-break

Met de box-decoration-break CSS-property kunt u aangeven hoe de fragmenten van een element moeten worden gerenderd als ze over meerdere regels, kolommen of pagina's worden verdeeld.

Geen regeleinden

Dit element ziet er bijvoorbeeld goed uit als alles op één regel staat.

Regeleinden met segmenten

Als de content over meerdere regels wordt verdeeld, worden decoraties zoals achtergrond, schaduw, rand enzovoort afgesneden, waardoor de content er heel anders uitziet.

Regeleinden met klonen

Als je box-decoration-break: clone toevoegt, wordt elk fragment onafhankelijk gerenderd, waardoor het er veel beter uitziet.

Het is niet helemaal Baseline, maar het is beschikbaar in Chrome en Firefox en heeft een leveranciersvoorvoegsel in Safari.

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

Ga naar de box-decoration-breakdocumentatie op MDN en de post van Rachel De eigenschap box-decoration-break in Chrome 130 voor meer informatie.

En meer

Natuurlijk is er nog veel meer.

Aanvullende informatie

Dit zijn maar enkele belangrijke punten. Check de volgende links voor meer wijzigingen in Chrome 130.

Abonneren

Abonneer je op het YouTube-kanaal van Chrome Developers om up-to-date te blijven. Je krijgt dan een e-mailmelding als we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 131 is uitgebracht, zijn we hier om je te vertellen wat er nieuw is in Chrome.