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 aber nicht den gesamten Tab, sondern nur einen kleinen Teil davon. 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 dem der Hauptinhaltsbereich und ein Cross-Origin-iFrame hervorgehoben sind
Der Hauptinhaltsbereich ist blau und der Cross-Origin-iFrame ist rot.

Wählen Sie dazu das Element aus, das Sie freigeben möchten, und erstellen Sie dann ein neues CropTarget auf 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 Verbesserte Tabfreigabe mit der Regionserfassung.

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 also 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 genauer 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 von Rachel Neue Syntax für Bereichsmediaabfragen in Chrome 104.

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

Plattformspezifische Apps haben in der Regel reibungslose Übergänge zwischen den verschiedenen Ansichten, sehen gut aus, halten den Nutzer im Kontext und sorgen für eine bessere Leistung. Im Web kann eine vollständige Navigation jedoch störend sein und manchmal zu einem kurzen schwarzen Bildschirm führen. Bei einer Single-Page-App kann es 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 ist ein grobes Beispiel dafür, wie Übergänge in einer App mit einer Seite funktionieren. In der Navigationsfunktion wird der neue Seiteninhalt abgerufen und dann geprüft, ob Übergänge unterstützt werden. Falls nicht, wird die Seite ohne Übergang aktualisiert. 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 viel mehr.

  • 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.