Nieuw in Chroom 93

Piet LePage

Dit is wat u moet weten:

  • U kunt nu CSS-stijlbladen laden met import , net als JavaScript-modules.
  • Geïnstalleerde PWA's kunnen zich registreren als URL-handlers , waardoor gebruikers rechtstreeks naar uw PWA kunnen springen.
  • De Multi-Screen Window Placement API is bijgewerkt op basis van uw feedback en start een tweede origin-proefperiode.
  • De PWA Summit vindt plaats van 6 tot 7 oktober.
  • En er is nog veel meer .

Ik ben Pete LePage , ik werk en fotografeer vanuit huis. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 93.

CSS-modulescripts

U kunt nu CSS-stijlbladen laden met import , net als JavaScript-modules. De stijlbladen kunnen vervolgens op dezelfde manier als construeerbare stijlbladen op het document of de schaduwwortels worden toegepast.

De nieuwe CSS Module Scripts-functie is geweldig voor aangepaste elementen. En in tegenstelling tot andere manieren om CSS vanuit JavaScript toe te passen, is het niet nodig om elementen te maken of te knoeien met JavaScript-reeksen van CSS-tekst.

Om het te gebruiken, importeert u het stijlblad met assert {type: 'css'} en past u het vervolgens toe op het document of shadowRoot door adoptedStyleSheets aan te roepen.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Maar pas op: als u de assert achterwege laat, wordt het bestand behandeld als JavaScript en zal het niet werken!

Bekijk CSS-modulescripts gebruiken om stylesheets op web.dev te importeren voor volledige details.

API voor vensterplaatsing op meerdere schermen

Voor sommige apps is het openen van nieuwe vensters en het plaatsen ervan op specifieke plaatsen of specifieke schermen een belangrijke functie. Wanneer ik bijvoorbeeld Dia's gebruik om te presenteren, wil ik dat de dia's op het volledige scherm op het primaire scherm verschijnen en dat mijn sprekersnotities op het andere scherm verschijnen.

De Multi-Screen Window Placement API maakt het mogelijk om de beeldschermen op te sommen die op de machine van de gebruiker zijn aangesloten, en om vensters op specifieke schermen te plaatsen. Dit is de tweede origin-proefversie en we hebben een aantal wijzigingen aangebracht op basis van uw feedback.

Je kunt snel controleren of er meer dan één scherm op het apparaat is aangesloten:

const isExtended = window.screen.isExtended;
// returns true/false

Maar de belangrijkste functionaliteit bevindt zich in window.getScreens() , dat alle details over de aangesloten beeldschermen biedt.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

U kunt bijvoorbeeld het primaire scherm bepalen en vervolgens requestFullscreen() gebruiken om een ​​element op dat scherm weer te geven.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

En het biedt een manier om te luisteren naar veranderingen, bijvoorbeeld als een nieuw beeldscherm wordt aangesloten of verwijderd.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Bekijk Tom's artikel Meerdere beeldschermen beheren met de Multi-Screen Window Placement API op web.dev voor een diepere duik.

Verkorte releasecyclus

In maart hebben we onze plannen aangekondigd om de releasecyclus te verkorten en elke vier weken een nieuwe versie van Chrome uit te brengen.

Die tijd is aangebroken en we verzenden Chrome 94 op 21 september. Je kunt geplande releasedatums voor elke versie vinden in de Chrome-agenda .

Nieuwe PWA-functies

Als u een Progressive Web App bouwt, zijn er twee nieuwe Origin-proefversies die de moeite waard zijn om te bekijken.

URL-handlers voor PWA's

Als u een PWA hebt geïnstalleerd en u op een link naar die PWA klikt, wilt u waarschijnlijk dat deze in de PWA wordt geopend en niet in een browsertabblad.

Door url_handlers op te geven in uw webapp-manifest en een web-app-origin-association toe te voegen aan uw .well-known/ directory, kunt u de browser vertellen dat als een gebruiker op een link naar uw PWA klikt, deze moet worden geopend binnen de PWA geïnstalleerd.

Voorbeeld url_handlers in het bestand manifest.json :

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Voorbeeld van web-app-origin-association :

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

En met een beetje extra verificatie kunt u zelfs uw PWA-links laten verwerken van andere bronnen waarvan u de eigenaar bent.

Alle details over de origin-proef staan ​​in PWA's als URL-handlers op web.dev.

Overlay met vensterbediening

De overlay met vensterbedieningselementen breidt het clientgebied uit tot het gehele venster, inclusief de titelbalk en de vensterbedieningsknoppen, zoals de knoppen Sluiten, Maximaliseren en Minimaliseren.

U kunt deze functie gebruiken om uw geïnstalleerde PWA meer op andere geïnstalleerde apps te laten lijken.

Voor meer informatie over de origin-proefversie ga je naar De overlay van de vensterbedieningen van de titelbalk van je PWA aanpassen .

PWA-top

In oktober vindt de PWA Summit plaats. Het is een gratis, online conferentie die erop gericht is iedereen te helpen slagen met Progressive Web Apps. De PWA Summit is een samenwerking tussen mensen van een handvol verschillende bedrijven die betrokken zijn bij de creatie van PWA-technologieën: Google, Intel, Microsoft en Samsung.

Er zijn een heleboel geweldige gesprekken en inhoud. Meer informatie en registratie kunt u vinden op PWASummit.org .

En meer!

Natuurlijk is er nog veel meer.

  • Flexbox- en flexbox-items hebben ondersteuning toegevoegd voor de uitlijningssleutelwoorden: start , end , self-start , self-end , left en right .
  • De asynchrone klembord-API ondersteunt nu SVG-bestanden.
  • En het media attribuut wordt gerespecteerd bij het instellen van meta theme-color , zodat u verschillende themakleuren kunt opgeven voor de lichte en donkere modi.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Verder lezen

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

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