Neu in Chrome 106

Pete LePage
Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Es gibt neue internationale APIs, die Ihnen mehr Kontrolle bei der Formatierung von Zahlen ermöglichen.
  • Für die Pop-up API gibt es einen Ursprungstest, mit dem Sie Nutzern wichtige Inhalte ganz einfach zur Verfügung stellen können.
  • Wir fügen einige CSS-Funktionen hinzu, um die Interoperabilität zu verbessern.
  • Und es gibt viele weitere.

Mein Name ist Pete LePage und ich bin Adriana Jara. Sehen wir uns nun an, was es bei Chrome 106 Neues gibt.

Neue internationale APIs

Mit den internationalen APIs können Inhalte in einem lokalisierten Format dargestellt werden.

Wie bei anderen internationalen APIs verlagert dies die Belastung auf das System, sodass Sie nicht für jeden Nutzer komplexen Lokalisierungscode versenden oder verwalten müssen.

Die API weiß, wo das Währungssymbol platziert wird, wie Datum und Uhrzeit formatiert oder eine Liste zusammengestellt werden soll.

In Chrome 106 gibt es eine Reihe neuer Zahlenformatfunktionen.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Soll eine Preisspanne angezeigt werden? formatRange kann Ihnen helfen.

Erstellen Sie ein neues numberFormat-Objekt, geben Sie den style und andere Optionen an und legen Sie fest, wie viele Ziffern angezeigt werden sollen.

Rufen Sie dann formatRange() auf, um den formatierten String abzurufen.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Möchten Sie eine Zahl auf die nächste Fünferschritte mit einer Genauigkeit von zwei Dezimalstellen runden? Kein Problem.

Geben Sie minimumFractionDigits und roundingIncrement an und rufen Sie dann format() auf.

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Mit trailingZeroDisplay kannst du dem Browser sogar mitteilen, dass er am Ende Nullen einfügen soll. Das ist sehr hilfreich bei den Preisen.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Weitere Informationen finden Sie in der Dokumentation zum internationalen Zahlenformat in der MDN.

Die Pop-up-API erleichtert das Erstellen von Benutzeroberflächen erheblich, wenn Sie nur Informationen direkt an den Nutzer weitergeben möchten.

Über das Attribut popup wird das Element automatisch auf der obersten Ebene der Website platziert. Außerdem können Sie mit dem Attribut „Sichtbarkeit“ ganz einfach die Sichtbarkeit ändern. Sie müssen sich nicht mehr um die Positionierung, das Stapeln von Elementen, den Fokus oder die Tastaturinteraktionen kümmern. Und das Beste daran: Es ist kein JavaScript erforderlich.

Nur mit dem folgenden Snippet rendert die API das Element über allen anderen Inhalten und übernimmt die Nutzereingabe sowie die Fokusverwaltung.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Standardmäßig können Nutzende das Pop-up-Fenster mit Gesten wie der Esc-Taste oder dem Klicken auf andere Elemente schließen.

Entwickler haben die volle Kontrolle über den Stil,die Positionierung und die Größe der obersten Ebene, können aber auch das Standardverhalten flexibel ändern. Nur CSS und HTML verwenden

Weitere Beispiele und API-Optionen finden Sie in diesem Artikel zu Jhey.

Registrieren Sie sich für den Ursprungstest, um Ihre Nutzer zeitnah zu informieren. Wir würden gern Ihre Meinung zum Google Partners-Programm erfahren.

Neue CSS-Funktionen

Es gibt zwei neue CSS-Funktionen, die die Interoperabilität verbessern und Ihnen die Arbeit erleichtern.

Es gibt eine neue Längeneinheit in der Stadt: ic ist dabei. ic ähnelt ch. ic wird jedoch speziell für Text in Sprachen verwendet, die Ideogramme verwenden. Grundsätzlich wird damit die Länge anhand der Breite oder Höhe des Zeichens [irgendwo Punkt] gemessen, also „Wasser“.

Dabei handelt es sich um eine Einheit, die für die Textgröße vorgesehen ist, sodass Sie die Breite einschränken können, um die Lesbarkeit zu verbessern, und sie ermöglicht vorhersehbare Kontrollen unabhängig von der Textgröße.

Wenn Sie beispielsweise den max-width eines Containers auf 10 ic festlegen, wissen Sie, dass dieser Container unabhängig von der Schriftgröße maximal 10 Glyphen in voller Breite enthalten wird. Hier ein Beispiel:

Die CSS-Grid-Unterstützung für die Interpolation für grid-template-columns und grid-template-rows ist geplant. Diese ist für Version 106 geplant, wird aber in Chrome 107 eingeführt. Sie können die Funktion noch in Chrome Beta ausprobieren. Hier ist der Bramus-Code als Beispiel:

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Wir beginnen mit der fünften Phase des User-Agents-Reduzierungsplans.
  • Die Unterstützung für HTTP2-Push und den Kontingenttyp „Persistent“ wird eingestellt.
  • Die CSS-Property hyphenate-character ist jetzt ohne Präfix verfügbar.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 106 finden Sie unter den folgenden Links.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 107 veröffentlicht wird, melde ich mich mit Neuigkeiten zu Chrome.