Nieuw in Chrome 104

Piet LePage

Dit is wat u moet weten:

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 104.

Geef een bijsnijdgebied op met regio-opname

getDisplayMedia() maakt het mogelijk om een ​​videostream te maken vanaf het huidige tabblad. Maar er zijn momenten waarop u niet het hele tabblad wilt, maar slechts een klein deel ervan. Tot nu toe was de enige manier om dat te doen het handmatig bijsnijden van elk videoframe.

Met Region Capture kan een webapp het specifieke gebied van het scherm definiëren dat hij wil delen. Met Google Presentaties kunt u bijvoorbeeld in de standaardbewerkingsweergave blijven en de huidige dia delen.

Schermafbeelding van een browservenster met een webapp die het hoofdinhoudsgebied en een cross-origin iframe benadrukt.
Het hoofdinhoudsgebied is blauw en het cross-origin-iframe is rood.

Om het te gebruiken, selecteert u het element dat u wilt delen en maakt u vervolgens een nieuwe CropTarget op basis van dat element. Start vervolgens het delen van het scherm door getDisplayMedia() aan te roepen. Dat vraagt ​​de gebruiker om toestemming om zijn scherm te delen. Roep vervolgens track.cropTo() aan en geef de eerder gemaakte cropTarget door.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Bekijk Beter tabbladen delen met Region Capture voor meer details.

Gemakkelijkere mediaquery's met syntaxis en evaluatie op niveau 4

Mediaquery's zijn van cruciaal belang voor responsief ontwerp, waardoor u specifieke stijlen voor verschillende viewportgroottes kunt definiëren. Maar tenzij je ze elke dag gebruikt, kan de syntaxis een beetje verwarrend zijn.

Chrome 104 voegt ondersteuning toe voor mediaquery's - niveau 4 - syntaxis en evaluatie , waardoor u mediaquery's kunt schrijven met behulp van gewone wiskundige vergelijkingsoperatoren.

Dus in plaats van zoiets als dit om een ​​viewport tussen 400 en 600 pixels aan te geven:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Het kan als volgt worden geschreven:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

De nieuwe syntaxis kan niet alleen de mediaquery's minder uitgebreid maken, maar kan ook nauwkeuriger zijn. De min- en max- query's zijn inclusief, bijvoorbeeld: min-width: 400px test voor een breedte van 400px of groter. Dankzij de nieuwe syntaxis kunt u explicieter zijn over wat u bedoelt.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Het wordt al ondersteund in Firefox en er is een PostCSS-plug-in die de nieuwe syntaxis naar de oude syntaxis herschrijft, waardoor browsercompatibiliteit wordt gegarandeerd!

Bekijk Rachels artikel Nieuwe syntaxis voor bereikmediaquery's in Chrome 104 voor meer details.

Shared Element Transitions starten een nieuwe origin-proefperiode

Platformspecifieke apps hebben doorgaans vloeiende overgangen tussen verschillende weergaven, ze zien er prachtig uit, ze houden de gebruiker in de juiste context en zorgen ervoor dat de ervaring beter presteert. Terwijl op internet een volledige navigatie lastig kan zijn en soms een kortstondig leeg scherm betekent. Voor een app met één pagina kan het beter zijn, maar overgangen zijn nog steeds moeilijk.

Met Shared Element Transitions, waarmee een nieuwe origin-proefversie in Chrome 104 wordt gestart, kunt u vloeiende overgangen bieden, ongeacht of de overgangen tussen verschillende documenten plaatsvinden (bijvoorbeeld in een app met meerdere pagina's) of binnen een document (bijvoorbeeld in één enkele pagina). pagina-app).

Hier is een ruw voorbeeld van hoe overgangen werken voor een app met één pagina. Haal in de navigatiefunctie de nieuwe pagina-inhoud op en controleer vervolgens of overgangen worden ondersteund. Zo niet, update dan de pagina zonder overgang. Als dit het geval is, maakt u een transition() en roept u start() aan, zodat de API weet wanneer de DOM-wijziging is voltooid.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Onder de motorkap maakt Shared Element Transitions gebruik van CSS-animaties, zodat u kunt overschakelen van een fade-in-effect naar een slide-in-effect of wat u maar wilt.

Ik heb nog maar net de oppervlakte bereikt, dus bekijk Jake's video Bringing Page Transitions to the Web , of duik in de uitleg .

En meer!

Natuurlijk is er nog veel meer.

  • Wanneer cookies zijn ingesteld met een expliciet Expires of Max-Age -attribuut, wordt de waarde nu beperkt tot niet meer dan 400 dagen.
  • Er zijn verbeteringen aan de API voor vensterplaatsing op meerdere schermen.
  • En de CSS-eigenschap overflow-clip-margin specificeert hoe ver de inhoud van een element mag verven voordat deze wordt geknipt.

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 104.

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 105 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!