Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in Chrome 86

Pete LePage

Twitter GitHub Glitch Mastodon Startseite

Chrome 86 wird als stabile Version eingeführt.

Dazu sollten Sie Folgendes wissen:

Die File System Access API ist jetzt im stabilen Zustand verfügbar.
Es gibt neue Ursprungstests für Web HID und die Multi-screen Window Placement API.
Es gibt einige neue Funktionen in CSS und zahlreiche weitere.

Ich bin Pete LePage, arbeite von zu Hause aus. Sehen wir uns nun an, was es für Entwickler bei Chrome 86 Neues gibt.

Zugriff auf Dateisystem

Heute können Sie mit dem Element <input type="file"> eine Datei von der Festplatte lesen. Wenn Sie Änderungen speichern möchten, fügen Sie einem Anchor-Tag download hinzu. Daraufhin wird die Dateiauswahl angezeigt. Anschließend wird die Datei gespeichert. Es gibt keine Möglichkeit, in dieselbe Datei zu schreiben, die Sie geöffnet haben. Dieser Workflow ist lästig.

Mit der File System Access API (früher Native File System API), die aus dem Ursprungstest entstanden ist und jetzt im stabilen Format verfügbar ist, können Sie showOpenFilePicker() aufrufen, das eine Dateiauswahl anzeigt und dann einen Datei-Handle zurückgibt, mit dem Sie die Datei lesen können.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Um eine Datei auf dem Laufwerk zu speichern, können Sie entweder das zuvor verwendete Datei-Handle verwenden oder showSaveFilePicker() aufrufen, um einen neuen Datei-Handle zu erhalten.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

Screenshot zu Berechtigungsaufforderung — Aufforderung an den Nutzer, der die Berechtigung zum Schreiben in eine Datei anfordert.

Vor dem Schreiben prüft Chrome, ob der Nutzer Schreibberechtigung erteilt hat. Wenn keine Schreibberechtigung erteilt wurde, fordert Chrome den Nutzer zuerst an.

Durch den Aufruf von showDirectoryPicker() wird ein Verzeichnis geöffnet, in dem Sie eine Liste der Dateien abrufen oder neue Dateien in diesem Verzeichnis erstellen können. Ideal für IDEs oder Mediaplayer, die mit vielen Dateien interagieren. Bevor Sie etwas schreiben können, muss der Nutzer natürlich die Schreibberechtigung erteilen.

Die API bietet noch viel mehr. Lesen Sie daher den Artikel zum Dateisystemzugriff auf web.dev.

Ursprungstest: WebHID

Human-Interface-Geräte, allgemein als HID bezeichnet, nehmen Eingaben von Menschen oder stellen diese für sie bereit. Es gibt eine Vielzahl von Geräten mit menschlichen Schnittstellen, die zu neu, zu alt oder zu selten sind, um für die Gerätetreiber des Systems zugänglich zu sein.

Die WebHID API, die jetzt als Ursprungstest verfügbar ist, löst dieses Problem, indem sie eine Möglichkeit für den Zugriff auf diese Geräte in JavaScript bietet. Mit WebHID können webbasierte Spiele Gamepads voll ausnutzen, einschließlich aller Tasten, Joysticks, Sensoren, Trigger, LEDs, Rumble Packs und mehr.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Webbasierte Anwendungen für Videoanrufe können die Telefonieschaltflächen auf speziellen Lautsprechern verwenden, um Anrufe zu starten oder zu beenden, den Ton stummzuschalten und vieles mehr.

Natürlich können leistungsstarke APIs wie diese nur mit Geräten interagieren, wenn der Nutzer dies explizit zulässt.

Unter Verbindung zu ungewöhnlichen HID-Geräten herstellen finden Sie weitere Details, Beispiele, die ersten Schritte und eine coole Demo.

Ursprungstest: Multi-Screen Window Placement API

Derzeit können Sie die Eigenschaften des Bildschirms abrufen, in dem sich das Browserfenster befindet, indem Sie window.screen() aufrufen. Aber was ist, wenn Sie mehrere Monitore verwenden? Tut mir leid, der Browser informiert dich nur über den aktuellen Bildschirm.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Die Multi-Screen Window Placement API startet einen Ursprungstest in Chrome 86, mit dem Sie die mit Ihrem Computer verbundenen Bildschirme auflisten und Fenster auf bestimmten Bildschirmen platzieren können. Die Möglichkeit, Fenster auf bestimmten Bildschirmen zu platzieren, ist wichtig für Präsentationen, Apps für Finanzdienstleistungen und mehr.

Bevor Sie die API verwenden können, müssen Sie eine Berechtigung anfordern. Andernfalls wird der Nutzer beim ersten Versuch, ihn zu verwenden, vom Browser darauf hingewiesen.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Sobald der Nutzer die Berechtigung erteilt hat, gibt der Aufruf von window.getScreens() ein Versprechen zurück, das mit einem Array von Screen-Objekten aufgelöst wird.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Diese Informationen kann ich dann beim Aufrufen von requestFullScreen() oder beim Platzieren neuer Fenster verwenden. Weitere Informationen hierzu findet er im Artikel Mehrere Bildschirme mit der Multi-Screen Window Placement API verwalten auf web.dev.

Und noch mehr

Mit dem neuen CSS-Selektor :focus-visible können Sie dieselbe Heuristik aktivieren, die der Browser verwendet, wenn er entscheidet, ob der standardmäßige Fokusindikator angezeigt werden soll.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Mit dem CSS-Pseudoelement ::marker können Sie die Farbe, Größe oder Art der Nummer oder der Aufzählungszeichen für Listen anpassen.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Der Chrome Dev Summit wird demnächst auf einem Bildschirm in Ihrer Nähe zu sehen sein. Weitere Informationen finden Sie in unserem YouTube-Kanal.

Weitere Informationen

Hier sind nur einige der wichtigsten Punkte aufgeführt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 86.

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen, oder fügen unseren RSS-Feed zu Ihrem Feed-Reader hinzu.

Ich bin Pete LePage. Sobald Chrome 87 veröffentlicht wird, erzähle ich Ihnen, was es bei Chrome Neues gibt!