Neu in Chrome 104

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 104 gibt.

Zuschneidebereich mit der Regionserfassung angeben

Mit getDisplayMedia() können Sie einen Videostream aus dem aktuellen Tab erstellen. Manchmal möchten Sie aber nicht den gesamten Tab, sondern nur einen kleinen Teil davon. Bisher war das nur möglich, indem Sie jeden Videoframes manuell zugeschnitten haben.

Mit der Region Capture API kann eine Webanwendung den spezifischen Bereich des Bildschirms definieren, den sie freigeben möchte. In Google-Präsentationen könnten Sie beispielsweise in der Standardbearbeitungsansicht bleiben und die aktuelle Folie freigeben.

Screenshot eines Browserfensters mit einer Web-App, in der der Hauptinhaltsbereich und ein Cross-Origin-iFrame hervorgehoben sind.
Der Hauptinhaltsbereich ist blau und der Cross-Origin-iFrame rot.

Wählen Sie dazu das Element aus, das Sie freigeben möchten, und erstellen Sie dann ein neues CropTarget basierend auf diesem Element. Starte dann die Bildschirmfreigabe, indem du getDisplayMedia() anrufst. Dadurch wird der Nutzer aufgefordert, die Berechtigung zum Teilen 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 Tab-Freigabe mit Region Capture verbessern.

Einfachere Media-Anfragen mit Syntax und Auswertung auf Ebene 4

Medienabfragen sind für responsives Design unerlässlich, da Sie damit bestimmte Stile für verschiedene Größen des Darstellungsbereichs definieren können. Wenn Sie sie aber nicht jeden Tag verwenden, kann die Syntax etwas verwirrend sein.

In Chrome 104 wird die Unterstützung für Media Queries – Level 4 – Syntax and Evaluation hinzugefügt. Damit können Sie Media Queries mit normalen mathematischen Vergleichsoperatoren schreiben.

Anstelle von etwas wie diesem für einen Viewport zwischen 400 und 600 Pixeln:

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

Das kann so geschrieben werden:

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

Die neue Syntax ist nicht nur weniger ausführlich, sondern kann auch genauer sein. Die Abfragen min- und max- sind inklusiv. Beispiel: min-width: 400px testet auf eine Breite von mindestens 400 Pixel. Mit der neuen Syntax können Sie genauer angeben, 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. */
}

Sie wird bereits in Firefox unterstützt und es gibt ein PostCSS-Plug-in, das die neue Syntax in die alte Syntax umschreibt und so die Browserkompatibilität gewährleistet.

Weitere Informationen finden Sie im Artikel von Rachel New syntax for range media queries in Chrome 104.

Ursprungstest für Shared Element Transitions

Plattformspezifische Apps haben in der Regel flüssige Übergänge zwischen verschiedenen Ansichten, sehen gut aus, bieten dem Nutzer Kontext und sorgen für eine bessere Leistung. Im Web kann eine vollständige Navigation jedoch störend sein und manchmal zu einem kurzzeitigen leeren Bildschirm führen. Bei einer Single-Page-App kann es besser sein, aber Übergänge sind immer noch schwierig.

Mit Shared Element Transitions, für die in Chrome 104 ein neuer Ursprungstest gestartet wird, können Sie für reibungslose Übergänge sorgen, unabhängig davon, ob es sich um dokumentübergreifende (z. B. in einer mehrseitigen App) oder dokumentinterne Übergänge (z. B. in einer Single-Page-App) handelt.

Hier ist ein grobes Beispiel dafür, wie Übergänge für eine Single-Page-App funktionieren. Rufen Sie in der Funktion „navigate“ die neuen Seiteninhalte ab und prüfen Sie dann, ob Übergänge unterstützt werden. Wenn nicht, aktualisieren Sie die Seite ohne Übergang. Wenn das der Fall ist, erstellen Sie ein transition() und rufen Sie start() dafür auf, um der API mitzuteilen, wann 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));
}

Shared Element Transitions verwendet CSS-Animationen. Sie können also den Einblendeffekt ändern, z. B. in „Einblenden“ oder „Einrutschen“.

Ich habe nur an der Oberfläche gekratzt. Sehen Sie sich also Jakes Video Bringing Page Transitions to the Web an oder lesen Sie die Erklärung.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Wenn Cookies mit einem expliziten Expires- oder Max-Age-Attribut gesetzt werden, wird der Wert jetzt auf maximal 400 Tage begrenzt.
  • Die Window Placement API für mehrere Bildschirme wurde verbessert.
  • Die CSS-Property overflow-clip-margin gibt an, wie weit der Inhalt eines Elements gerendert werden darf, bevor er abgeschnitten wird.

Weitere Informationen

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

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 105 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.