Dit is wat u moet weten:
- Document Picture in Picture geeft u meer controle over Picture-in-Picture-vensters.
- Met CSS-geneste declaraties worden een aantal lastige randgevallen opgelost.
- U kunt het gedrag van decoraties opgeven op elementen die over meerdere lijnen zijn verdeeld.
- En er is nog veel meer .
Ik ben Pete LePage. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 130.
Documenteer Picture-in-Picture
De Picture-in-Picture API is geweldig als u een video uit een browsertabblad wilt weergeven, zodat u de video in de gaten kunt houden terwijl u met andere sites of applicaties communiceert. Maar het doet alleen video.
De document Picture-in-Picture API elimineert deze beperking, waardoor u een Picture-in-Picture-venster kunt maken waarin u controle heeft over de inhoud. Het is geweldig voor zaken als aangepaste videospelers, videoconferenties en productiviteitsapps. Ik vind het geweldig wat Spotify ermee heeft gedaan in hun webplayer. Ik krijg een venster met het artwork voor het huidige nummer, afspeelknoppen en kan het nummer eenvoudig aan mijn favorieten toevoegen.
Om het te gebruiken, vraagt u een nieuw document beeld-in-beeld venster aan. De geretourneerde promise wordt opgelost met een Picture-in-Picture-venster JavaScript-object. Gebruik dat vervolgens om uw inhoud 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 vertellen het beeld-in-beeld-venster altijd in de standaardpositie en -grootte te openen, 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' post Picture-in-Picture voor elk element voor nog veel meer details!
CSS-geneste declaraties
CSS-nesten zorgt voor kortere selectors, gemakkelijker lezen en meer modulariteit door regels in andere te nesten. CSS Nesting is Baseline Nieuw beschikbaar en is al bijna een jaar beschikbaar.
Er waren een paar randgevallen die niet werkten zoals verwacht. Bij het volgende CSS-blok zou je bijvoorbeeld verwachten dat de achtergrondkleur groen is, aangezien deze als laatste komt, maar deze 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 in een groene achtergrond, zoals verwacht. Als u kale declaraties met geneste regels tussenvoegde, moet u uw code nogmaals controleren.
Bekijk het artikel van Bramus CSS-nesten verbetert met 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 als ze over meerdere regels, kolommen of pagina's zijn verdeeld.
Dit element ziet er bijvoorbeeld geweldig uit als alles op één regel staat.
Wanneer de inhoud over meerdere lijnen wordt verdeeld, worden decoraties zoals achtergrond, kaderschaduw, rand, enzovoort in plakjes gesneden, waardoor een nogal drastische uitstraling ontstaat.
Door box-decoration-break: clone toe te voegen, wordt elk fragment afzonderlijk weergegeven, waardoor een veel mooier uiterlijk ontstaat.
Hoewel het niet helemaal Baseline is, is het beschikbaar in Chrome en Firefox, en wordt het voorafgegaan door de leverancier in Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Bekijk de box-decoration-break documentatie op MDN en Rachel's post The box-decoration-break in Chrome 130 voor meer details.
En meer!
Natuurlijk is er nog veel meer.
- Na een paar valse starts landen eindelijk de scrollcontainers die op het toetsenbord kunnen worden gefocust .
- WebGPU krijgt dubbele bronmenging.
- En webserie krijgt een verbonden attribuut.
Verder lezen
Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 130.
- Releaseopmerkingen voor Chrome 130 .
- Wat is er nieuw in Chrome DevTools (130)
- ChromeStatus.com-updates voor Chrome 130
- Wijzigingslijst voor Chromium-bronrepository's
- Chrome-releasekalender
Abonneren
Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.
Ik ben Pete LePage, en zodra Chrome 131 uitkomt, zijn we hier om je te vertellen wat er nieuw is in Chrome!