Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in Chrome 86

Pete LePage

Chrome 86 wird jetzt in der stabilen Version eingeführt.

Dazu sollten Sie Folgendes wissen:

Die File System Access API ist jetzt in der stabilen Version verfügbar.
Es gibt neue Testkampagnen für Web HID und die Window Placement API für mehrere Bildschirme.
Es gibt einige neue Dinge in CSS und viel mehr.

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

Dateisystemzugriff

Derzeit können Sie mit dem Element <input type="file"> eine Datei vom Laufwerk lesen. Wenn Sie Änderungen speichern möchten, fügen Sie einem Anker-Tag download hinzu. Daraufhin wird die Dateiauswahl angezeigt und die Datei wird gespeichert. Es ist nicht möglich, in dieselbe Datei zu schreiben, die Sie geöffnet haben. Dieser Workflow ist ärgerlich.

Mit der File System Access API (früher Native File System API), die die ursprüngliche Testphase abgeschlossen hat und jetzt in der stabilen Version verfügbar ist, können Sie showOpenFilePicker() aufrufen. Daraufhin wird eine Dateiauswahl angezeigt und ein Dateihandle zurückgegeben, 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);
}

Wenn Sie eine Datei auf dem Laufwerk speichern möchten, können Sie entweder den zuvor erhaltenen Dateihandle verwenden oder showSaveFilePicker() aufrufen, um einen neuen Dateihandle 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 der Berechtigungsanfrage — Nutzer wird aufgefordert, die Berechtigung zum Schreiben in eine Datei zu gewähren.

Vor dem Schreiben prüft Chrome, ob der Nutzer die Schreibberechtigung erteilt hat. Wenn die Schreibberechtigung nicht erteilt wurde, wird der Nutzer zuerst von Chrome aufgefordert.

Wenn Sie showDirectoryPicker() aufrufen, wird ein Verzeichnis geöffnet, in dem Sie eine Liste der Dateien abrufen oder neue Dateien erstellen können. Perfekt 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 viele weitere Funktionen. Weitere Informationen finden Sie im Artikel zum Dateisystemzugriff auf web.dev.

Ursprungstest: WebHID

Human Interface Devices, kurz HID, nehmen Eingaben von oder geben Ausgaben an… Menschen weiter. Es gibt eine große Anzahl von Eingabegeräten, die zu neu, zu alt oder zu selten sind, um von den Gerätetreibern des Systems genutzt zu werden.

Die WebHID API, die jetzt als Origin Trial verfügbar ist, bietet eine Möglichkeit, in JavaScript auf diese Geräte zuzugreifen. Mit WebHID können webbasierte Spiele alle Funktionen von Gamepads nutzen, einschließlich aller Tasten, Joysticks, Sensoren, Trigger, LEDs und Rumble-Pakete.

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 Videochat-Apps können die Telefontasten auf speziellen Lautsprechern verwenden, um Anrufe zu starten oder zu beenden, den Ton stummzuschalten und vieles mehr.

HID-Geräteauswahl — Auswahl von HID-Geräten.

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

Weitere Informationen, Beispiele, eine Einführung und eine coole Demo finden Sie unter Verbindung zu ungewöhnlichen HID-Geräten herstellen.

Ursprungstest: Window Placement API für mehrere Bildschirme

Derzeit können Sie die Eigenschaften des Bildschirms, auf dem sich das Browserfenster befindet, durch Aufrufen von window.screen() abrufen. Aber was ist, wenn Sie mehrere Monitore verwenden? Der Browser kann Ihnen nur Informationen zum Bildschirm geben, auf dem er gerade geöffnet ist.

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

Mit der Window Placement API für mehrere Bildschirme wird in Chrome 86 ein Origin Trial gestartet. Sie können damit die mit Ihrem Computer verbundenen Bildschirme auflisten und Fenster auf bestimmten Bildschirmen platzieren. Die Möglichkeit, Fenster auf bestimmten Bildschirmen zu platzieren, ist beispielsweise für Präsentations- und Finanzdienstleistungs-Apps wichtig.

Bevor Sie die API verwenden können, müssen Sie eine Genehmigung beantragen. Andernfalls wird der Nutzer vom Browser aufgefordert, wenn er die Funktion zum ersten Mal verwenden möchte.

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 Promise zurück, das in ein 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, ...},
// ]

Ich kann diese Informationen dann verwenden, wenn ich requestFullScreen() anrufe oder neue Fenster platziere. Tom hat alle Details in seinem Artikel Mehrere Displays mit der Window Placement API für mehrere Bildschirme verwalten auf web.dev zusammengestellt.

Und vieles mehr

Mit dem neuen CSS-Selektor :focus-visible können Sie dieselbe Heuristik aktivieren, die der Browser verwendet, um zu entscheiden, ob der Standardfokusindikator 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 den Typ der Zahl oder Aufzählungspunkt für Listen anpassen.

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

Das Chrome Dev Summit wird auch in Ihrer Nähe übertragen. Weitere Informationen dazu finden Sie auf unserem YouTube-Kanal.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Ä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 erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen. Alternativ können Sie auch unseren RSS-Feed in Ihren Feedreader aufnehmen.

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