Nieuw in Chrome 104

Pete LePage

Dit is wat u moet weten:

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

Geef een bijsnijdgebied op met regio-opname

getDisplayMedia() kun je een videostream maken van het huidige tabblad. Maar soms wil je niet het hele tabblad, maar slechts een klein deel ervan. Tot nu toe was de enige manier om dat te doen, door elk videoframe handmatig bij te snijden.

Met Region Capture kan een webapp het specifieke gebied van het scherm definiëren dat hij wil delen. Zo kun je met Google Slides bijvoorbeeld in de standaardbewerkingsweergave blijven en de huidige dia delen.

Schermafbeelding van een browservenster met een web-app die het hoofdinhoudsgebied en een cross-origin iframe markeert.
Het hoofdinhoudsgebied is blauw en het cross-origin iframe is rood.

Om het te gebruiken, selecteert u het te delen element en maakt u een nieuwe CropTarget op basis van dat element. Start vervolgens het delen van het scherm door getDisplayMedia() aan te roepen. Dit vraagt ​​de gebruiker om toestemming om het 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 Betere tabbladdeling met Regiovastlegging voor meer informatie.

Eenvoudigere mediaquery's met syntaxis en evaluatie op niveau 4

Media Query's zijn essentieel voor responsief design, omdat je hiermee specifieke stijlen kunt definiëren voor verschillende viewportgroottes. Maar tenzij je ze dagelijks gebruikt, kan de syntaxis wat verwarrend zijn.

Chrome 104 biedt ondersteuning voor Media Queries - Niveau 4 - Syntaxis en evaluatie , zodat u media query's kunt schrijven met behulp van gewone wiskundige vergelijkingsoperatoren.

Dus in plaats van zoiets 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 maakt media queries niet alleen minder omslachtig, maar kan ook nauwkeuriger zijn. De min- en max- query's zijn inclusief, bijvoorbeeld: min-width: 400px test op een breedte van 400px of groter. De nieuwe syntaxis maakt het mogelijk om explicieter te zijn over wat je 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 herschrijft naar de oude syntaxis, waardoor de compatibiliteit met de browser wordt gegarandeerd!

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

Gedeelde elementovergangen starten nieuwe oorsprongsproef

Platformspecifieke apps hebben doorgaans vloeiende overgangen tussen verschillende weergaven, zien er prachtig uit, houden de gebruiker in de juiste context en zorgen voor een betere gebruikerservaring. Op het web kan volledige navigatie echter stroef verlopen en soms zelfs een kortstondig leeg scherm betekenen. Voor een app met één pagina kan het beter zijn, maar de overgangen zijn nog steeds lastig.

Met Shared Element Transitions, een nieuwe proefversie in Chrome 104, kunt u vloeiende overgangen bieden, ongeacht of de overgangen zich tussen documenten (bijvoorbeeld in een app met meerdere pagina's) of binnen documenten (bijvoorbeeld in een app met één pagina) voordoen.

Hier is een globaal voorbeeld van hoe overgangen werken voor een app met één pagina. Haal in de navigeerfunctie de nieuwe pagina-inhoud op en controleer of overgangen worden ondersteund. Zo niet, werk dan de pagina bij zonder overgang. Als dat wel het geval is, maak dan een transition() aan en roep start() aan om de API te laten weten 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 wisselen tussen een fade-in-effect, een slide-in-effect of wat u maar wilt.

Ik heb nog maar het topje van de ijsberg gezien, dus bekijk de video van Jake , Bringing Page Transitions to the Web , of duik in de uitleg .

En nog veel meer!

Er is natuurlijk nog veel meer.

  • Wanneer cookies worden ingesteld met een expliciet Expires of Max-Age -kenmerk, wordt de waarde nu beperkt tot maximaal 400 dagen.
  • Er zijn verbeteringen aan de API voor het plaatsen van vensters op meerdere schermen.
  • De CSS-eigenschap overflow-clip-margin geeft aan hoe ver de inhoud van een element mag worden getekend voordat deze wordt bijgesneden.

Verder lezen

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

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 105 uitkomt, vertel ik u graag wat er nieuw is in Chrome!