Dit is wat u moet weten:
- Met Picture-in-Picture in documenten hebt u meer controle over Picture-in-Picture-vensters.
- Geneste CSS-declaraties lossen een aantal lastige randgevallen op.
- U kunt het gedrag van decoraties op elementen die over meerdere regels zijn verdeeld, opgeven.
- En er is nog veel meer .
Ik ben Pete LePage. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 130.
Document Picture-in-Picture
De picture-in-picture API is ideaal als je een video uit een browsertabblad wilt halen, zodat je de video in de gaten kunt houden terwijl je andere sites of applicaties gebruikt. Maar het werkt alleen met video.
De Picture-in-Picture API voor documenten heft die beperking op, waardoor je een Picture-in-Picture-venster kunt maken waarin je zelf de controle hebt over de content. Het is geweldig voor dingen zoals aangepaste videospelers, videoconferenties en productiviteitsapps. Ik ben dol op wat Spotify ermee heeft gedaan in hun webplayer. Ik krijg een venster met de artwork van het huidige nummer, afspeelknoppen en kan het nummer eenvoudig aan mijn favorieten toevoegen.
Om het te gebruiken, vraagt u een nieuw document aan met een picture-in-picture-venster. De geretourneerde promise wordt omgezet naar een Picture-in-Picture-venster JavaScript-object. Gebruik dat vervolgens om uw 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 kunt u Chrome opdracht geven om het picture-in-picture-venster altijd te openen in de standaardpositie en -grootte, in plaats van de positie of grootte 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 François' bericht Picture-in-Picture for any Element voor nog veel meer details!
CSS-geneste declaraties
CSS-nesting maakt kortere selectoren, gemakkelijker leesbaarheid en meer modulariteit mogelijk door regels binnen andere te nesten. CSS-nesting is een nieuwe basisversie en is al bijna een jaar beschikbaar.
Er waren een paar randgevallen die niet werkten zoals verwacht. Bijvoorbeeld, bij het volgende CSS-blok zou je verwachten dat de achtergrondkleur groen zou zijn, omdat die als laatste komt, maar het is rood!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Om dit soort randgevallen op te lossen, heeft de CSS-werkgroep de regel voor geneste declaraties geïntroduceerd, die is geïmplementeerd in Chrome 130. Nu resulteert datzelfde CSS-blok, zoals verwacht, in een groene achtergrond. Als u kale declaraties met geneste regels hebt gecombineerd, controleer dan uw code nog eens.
Bekijk het artikel van Bramus CSS nesting improves with CSSNestedDeclarations voor een meer diepgaande uitleg.
box-decoration-break
Met de CSS-eigenschap box-decoration-break kunt u opgeven hoe de fragmenten van een element moeten worden weergegeven wanneer ze over meerdere regels, kolommen of pagina's zijn verdeeld.
Dit element ziet er bijvoorbeeld prachtig uit als alles op één lijn staat.
Wanneer de inhoud over meerdere regels wordt verdeeld, worden decoraties zoals achtergrond, kaderschaduw, rand en dergelijke weggelaten, wat een nogal drastische look creëert.
Door box-decoration-break: clone toe te voegen, wordt elk fragment onafhankelijk weergegeven, wat een veel mooier uiterlijk creëert.
Hoewel het niet helemaal Baseline is, is het beschikbaar in Chrome en Firefox en heeft het een vendor-prefix in Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Bekijk de box-decoration-break documentatie op MDN en Rachels bericht The box-decoration-break property in Chrome 130 voor meer informatie.
En nog veel meer!
Er is natuurlijk nog veel meer.
- Na een paar mislukte pogingen zijn scrollcontainers met toetsenbordfocus eindelijk beschikbaar.
- WebGPU krijgt dual source blending.
- En webserie krijgt een connected-attribuut.
Verder lezen
Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 130.
- Release-opmerkingen voor Chrome 130 .
- Wat is er nieuw in Chrome DevTools (130)
- ChromeStatus.com-updates voor Chrome 130
- Wijzigingslijst voor Chromium-bronrepository
- Chrome-releasekalender
Abonneren
Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.
Ik ben Pete LePage en zodra Chrome 131 uitkomt, vertellen we je direct wat er nieuw is in Chrome!