Neu in Chrome 104

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 104 für Entwickler neu ist.

Zuschneidebereich mit der Funktion „Region erfassen“ angeben

Mit getDisplayMedia() können Sie einen Videostream vom aktuellen Tab aus erstellen. Manchmal möchten Sie jedoch nicht den gesamten Tab, sondern nur einen kleinen Teil davon anzeigen lassen. Bisher war das nur möglich, indem jeder Videoframe manuell zugeschnitten wurde.

Mit der Regionserfassung kann eine Webanwendung den Bereich des Bildschirms definieren, der freigegeben werden soll. In Google Präsentationen könnten Sie beispielsweise in der Standardbearbeitungsansicht bleiben und die aktuelle Folie freigeben.

Screenshot eines Browserfensters mit einer Webanwendung, in der der Hauptinhaltsbereich und ein ursprungsübergreifender iFrame hervorgehoben sind.
Der Hauptinhaltsbereich ist blau und der Cross-Origin-iFrame ist rot.

Wählen Sie dazu das freizugebende Element aus und erstellen Sie dann eine neue CropTarget auf der Grundlage dieses Elements. Starten Sie als Nächstes die Bildschirmfreigabe, indem Sie getDisplayMedia() aufrufen. Daraufhin wird der Nutzer aufgefordert, die Freigabe seines Bildschirms zuzulassen. Rufen Sie dann track.cropTo() auf und übergeben Sie die 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 Tab-Freigabe mit Region Capture.

Einfachere Medienabfragen mit Syntax und Auswertung der Ebene 4

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

Chrome 104 unterstützt Media Queries – Level 4 – Syntax und Auswertung. Damit können Sie Media Queries mit gewöhnlichen mathematischen Vergleichsoperatoren schreiben.

Verwenden Sie anstelle dieser Angabe für einen Darstellungsbereich zwischen 400 und 600 Pixeln Folgendes:

@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 ist nicht nur prägnanter, sondern auch genauer. Die Abfragen min- und max- sind inkludierend, z. B.: min-width: 400px prüft auf eine Breite von mindestens 400 Pixeln. Mit der neuen Syntax können Sie Ihre Absichten klarer ausdrücken.

@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, mit dem die neue Syntax in die alte Syntax umgeschrieben wird, um die Browserkompatibilität zu gewährleisten.

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

Neue Ursprungstests für Übergänge mit freigegebenen Elementen

Plattformspezifische Apps haben in der Regel reibungslose Übergänge zwischen verschiedenen Ansichten, sie sehen schön aus, halten den Nutzer im Kontext und sorgen dafür, dass die Nutzung dadurch leistungsstärker wird. Im Web kann eine vollständige Navigation jedoch störend sein und manchmal zu einem kurzen schwarzen Bildschirm führen. Eine einseitige App kann besser sein, aber Übergänge sind immer noch schwierig.

Mit Ursprungstests für gemeinsame Elementübergänge, die in Chrome 104 eingeführt werden, können Sie reibungslose Übergänge ermöglichen, unabhängig davon, ob die Übergänge dokumentübergreifend (z. B. in einer mehrseitigen App) oder innerhalb eines Dokuments (z. B. in einer App mit einer Seite) erfolgen.

Hier siehst du ein grobes Beispiel dafür, wie Übergänge bei einer einseitigen App funktionieren. Rufe in der Navigationsfunktion den neuen Seiteninhalt ab und prüfe dann, ob Übergänge unterstützt werden. Ist dies nicht der Fall, aktualisiere die Seite ohne Übergang. Wenn ja, erstellen Sie eine transition() und rufen Sie start() darauf auf, um die API darüber zu informieren, dass 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));
}

Für Übergänge für freigegebene Elemente werden CSS-Animationen verwendet. Sie können also zwischen einem Einblendungseffekt und einem Einblendungseffekt wechseln.

Das war nur ein kleiner Ausschnitt. Sehen Sie sich Jakes Video Seitenübergänge im Web oder die Erläuterung an.

…und vieles mehr

Natürlich gibt es noch viele weitere.

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

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu den Änderungen in Chrome 104.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 105 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.