Neu in Chrome im 1. Quartal 2025: CSS-Textfeld, Dateisystemzugriff für Android, Baseline-Updates und mehr

Mariko Kosaka
X

Es ist schon eine Weile her. Das Video „Neu in Chrome“ ist zurück und enthält Informationen zu folgenden Themen:

Ich heiße Mariko. Sehen wir uns an, was es in den letzten drei Chrome-Versionen Neues gibt.

CSS-Textfeld

Mit der CSS-Property text-box können Sie den vertikalen Abstand mithilfe der Schriftmetriken genau steuern.

Jede Schriftart erzeugt einen unterschiedlichen Abstand über und unter den Zeichen, was die Größe des Elements bestimmt.

Bisher war es nicht möglich, die Größe dieser Bereiche zu steuern.

In der Überschrift ist überschüssiger Platz zu sehen, der mit einer Schere herausgeschnitten wurde.

Mit der neuen Property text-box-trim werden die Seiten angegeben, die zu trimmen sind (oben oder unten), und mit der Property text-box-edge wird angegeben, wie sie zu trimmen sind. Sie können beispielsweise die Kürzung auf die Kappenhöhe festlegen, also auf die Oberseite von Großbuchstaben.

Sie können dies auch mit der Kurzschreibweise text-box schreiben.

Weitere Informationen zur Verwendung dieser neuen Eigenschaften finden Sie im Artikel CSS text-box-trim.

File System Access API

Mit dem in Chrome 133 hinzugefügten DOM-Primitiven Node.prototype.moveBefore können Sie Elemente in einem DOM-Baum verschieben, ohne den Status des Elements zurückzusetzen.

Wenn Sie ein Element entfernen und dann wieder einfügen, um ein DOM-Element zu verschieben, wird der Status dieses Elements zurückgesetzt. Mit diesem neuen Primitiven wird der Status eines Knotens beibehalten.

So bleiben Iframes geladen, aktive Elemente im Fokus, Pop-ups und Dialogfelder geöffnet und CSS-Übergänge oder -Animationen laufen weiter.

Statuserhaltendes Verschieben eines DOM-Elements

Die File System Access API ist schon seit einiger Zeit auf dem Computer in Chrome verfügbar. Mit dieser API können Webanwendungen mit Dateien im lokalen Dateisystem des Nutzers interagieren. Ab Chrome 132 ist die API auch auf Android-Geräten und in WebViews verfügbar.

Rufen Sie showOpenFilePicker() auf, um eine Datei zu lesen. Diese Methode zeigt eine Dateiauswahl an und gibt dann einen Dateihandle zurück, mit dem Sie die Datei lesen können.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Wenn Sie eine Datei auf dem Laufwerk speichern möchten, können Sie denselben Dateihandle verwenden, den Sie zuvor erhalten haben, oder showSaveFilePicker() aufrufen, um einen neuen Dateihandle zu erhalten.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Das Element <dialog> kann jetzt durch Wischen geschlossen werden

Wenn Sie mit der Popover API ein Popover erstellt haben, wissen Sie, dass eine der praktischen Funktionen der Popover API das einfache Schließen ist. Nutzer können auf den Hintergrund klicken, um das Pop-over-Element zu schließen, ohne die Schaltfläche „Schließen“ zu drücken.

Diese Funktion wird jetzt auch vom Element <dialog> unterstützt.

Wenn Sie das Attribut closedby auf any festlegen, kann das Dialogfeld geschlossen werden, indem Sie außerhalb des Dialogfelds klicken oder die Esc-Taste drücken.


<dialog closedby="any">...</dialog>

Das ist dasselbe Verhalten wie bei einem Pop-over, das auf „auto“ gesetzt ist.

Aktualisierungen in der Baseline

Und hier sind Neuigkeiten zu Baseline:

Baseline (neu verfügbar)

Erstens: Neu verfügbare Funktionen. Das sind Funktionen, die vor Kurzem in allen vier großen Browsern eingeführt wurden.

scrollbar-gutter und scrollbar-width

Mit der CSS-Eigenschaft scrollbar-gutter können Sie einen Bereich für die Bildlaufleiste reservieren, um unerwünschte Layoutänderungen zu vermeiden, wenn die Bildlaufleiste erscheint oder verschwindet. Mit scrollbar-width können Sie eine schmalere Bildlaufleiste erstellen oder die Bildlaufleiste sogar vollständig ausblenden, ohne dass sich dies auf die Scrollbarkeit auswirkt.

ruby-align

Mit der CSS-Eigenschaft ruby-align können Sie die Ausrichtung des Ruby-Grundtexts und des Ruby-Anmerkungstexts festlegen.

Promise.try

Promise.try ist eine praktische Methode, um die Fehlerbehandlung für synchrone Anfragen zu vereinfachen. So können Sie Callback-Funktionen vermeiden, wenn Sie eine Anfrage mit Promise.resolve stellen.

Wasm-Speicherbereinigung und Tail-Call-Optimierungen

WebAssembly unterstützt jetzt die automatische Speicherbereinigung und Tail-Call-Optimierungen.

Referenzwert: Weit verbreitet

Array findLast() und findLastIndex()

Die Arraymethoden findLast() und findLastIndex() sind sehr praktische Methoden, um Elemente vom Ende eines Arrays abzurufen. Diese Funktion wird seit 30 Monaten von allen gängigen Browsern unterstützt. Sie ist also jetzt weithin verfügbar.

Einzelne Transformationseigenschaften

Einzelne Transformeigenschaften, mit denen Sie CSS-Transformierungen genauer steuern können, sind jetzt auch in der Baseline Widely verfügbar .

Weitere Informationen zu Baseline

Weitere Informationen zu Baseline und dem Unterschied zwischen „Neu“ und „Weitgehend verfügbar“ finden Sie in diesem kurzen Video.

Weitere Informationen zum Baseline-Status einer Funktion finden Sie im Dashboard zum Status der Webplattform.

Interoperabilitätsprojekt 2025

Und zu guter Letzt: Das Interop-Projekt kehrt 2025 mit einer Liste von Schwerpunktbereichen zurück, darunter Ansichtsübergänge, CSS-Ankerpositionierung und die Navigation API. Hier findest du die Projektankündigung.

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 Mariko Kosaka und in drei Monaten erzähle ich Ihnen mehr über die Neuigkeiten bei Chrome.