Neu in Chrome 104

Pete LePage

Dazu sollten Sie Folgendes wissen:

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es bei Chrome 104 Neues gibt.

Zuschneidebereich mit Bereichsaufnahme angeben

Mit getDisplayMedia() kann ein Videostream auf dem aktuellen Tab erstellt werden. Manchmal möchten Sie jedoch nicht den gesamten Tab, sondern nur einen kleinen Teil davon. Bisher bestand die einzige Möglichkeit darin, jeden Videoframe manuell zuzuschneiden.

Mit Region Capture kann eine Web-App den spezifischen Bildschirmbereich definieren, den sie freigeben möchte. In Google Präsentationen können Sie beispielsweise in der Standardbearbeitungsansicht bleiben und die aktuelle Folie freigeben.

Screenshot eines Browserfensters mit einer Web-App, in der der Hauptinhaltsbereich und ein ursprungsübergreifender iFrame hervorgehoben sind
Der Hauptinhaltsbereich ist blau und der ursprungsübergreifende iFrame rot.

Wenn Sie es verwenden möchten, wählen Sie das freizugebende Element aus und erstellen Sie dann ein neues CropTarget auf Grundlage dieses Elements. Starte als Nächstes die Bildschirmfreigabe, indem du getDisplayMedia() anrufst. Daraufhin wird der Nutzer aufgefordert, die Berechtigung zur Freigabe seines Bildschirms zu erteilen. Rufen Sie dann track.cropTo() auf und übergeben Sie das zuvor erstellte cropTarget.

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);

Weitere Informationen finden Sie unter Bessere Tabfreigabe mit Region Capture.

Einfachere Medienabfragen mit Syntax und Auswertung der Stufe 4

Medienabfragen sind für responsives Webdesign von entscheidender Bedeutung. Mit ihnen können Sie bestimmte Stile für verschiedene Größen des Darstellungsbereichs definieren. Aber wenn Sie sie nicht täglich verwenden, kann die Syntax etwas verwirrend sein.

In Chrome 104 wird jetzt Medienabfragen – Stufe 4 – Syntax und Auswertung unterstützt, sodass Sie Medienabfragen mit gewöhnlichen mathematischen Vergleichsoperatoren schreiben können.

Anstatt also etwa so einen Darstellungsbereich zwischen 400 und 600 Pixeln anzugeben:

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

Sie kann so geschrieben werden:

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

Die neue Syntax macht Medienabfragen nicht nur weniger ausführlich, sondern kann auch präziser sein. Die Abfragen min- und max- sind eingeschlossen. Beispiel: min-width: 400px-Tests für eine Breite von mindestens 400 Pixeln. Mit der neuen Syntax können Sie genauer erklären, was Sie meinen.

@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. */
}

Es wird bereits in Firefox unterstützt. Außerdem gibt es ein PostCSS-Plug-in, das die neue Syntax in die alte Syntax umwandelt und so für Browserkompatibilität sorgt.

Weitere Informationen finden Sie im Artikel Neue Syntax für Bereichsmedienabfragen in Chrome 104 von Rachel.

Mit Übergängen geteilter Elemente einen neuen Ursprungstest starten

Plattformspezifische Anwendungen sorgen in der Regel für reibungslose Übergänge zwischen verschiedenen Ansichten. Sie sehen ansprechend aus, halten den Nutzer im Kontext und tragen dazu bei, dass die Nutzung leistungsfähiger ist. Im Web hingegen kann eine vollständige Navigation hart sein und manchmal einen vorübergehenden leeren Bildschirm bedeuten. Bei Apps mit nur einer Seite ist das besser, aber die Übergänge sind immer noch schwierig.

Mit Shared Element-Übergängen, die einen neuen Ursprungstest in Chrome 104 starten, können Sie reibungslose Übergänge ermöglichen, unabhängig davon, ob sie dokumentübergreifend (z. B. in einer mehrseitigen App) oder dokumentenintern (z. B. in einer einseitigen App) sind.

Hier sehen Sie ein grobes Beispiel für die Funktionsweise von Übergängen in einer Single-Page-App. Rufen Sie in der Navigationsfunktion den neuen Seiteninhalt ab und prüfen Sie, ob Übergänge unterstützt werden. Falls nicht, aktualisieren Sie die Seite ohne Übergang. Ist dies der Fall, erstellen Sie ein transition() und rufen Sie dafür start() auf. So wird die API informiert, wenn die DOM-Änderung abgeschlossen ist.

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));
}

Bei den Übergängen geteilter Elemente werden CSS-Animationen eingesetzt, sodass Sie beliebige Elemente einblenden oder ausblenden können.

Ich habe mich gerade erst an der Oberfläche gekratzt, also seht euch Jakes Video Bringing Page Transitions to the Web (Seitenübergänge im Web) an oder schaue dir das Erklärvideo an.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Wenn Cookies mit einem expliziten Expires- oder Max-Age-Attribut gesetzt werden, ist der Wert jetzt auf maximal 400 Tage begrenzt.
  • Wir haben Verbesserungen an der API zur Platzierung von Multiscreen-Fenstern vorgenommen.
  • Die CSS-Eigenschaft overflow-clip-margin gibt an, wie weit ein Elementinhalt gezeichnet werden darf, bevor er abgeschnitten wird.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 104 finden Sie unter den folgenden Links.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 105 veröffentlicht wird, melde ich Ihnen, was es bei Chrome Neues gibt.