Neu in Chrome 106

Pete LePage
Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit den neuen Intl APIs haben Sie bei der Formatierung von Zahlen mehr Kontrolle.
  • Es gibt einen Ursprungstest für die Pop-up API, mit dem wichtige Inhalte für Nutzer leicht zugänglich gemacht werden können.
  • Wir fügen einige CSS-Funktionen hinzu, um die Interoperabilität zu verbessern.
  • Und es gibt noch viele weitere.

Ich bin Pete LePage und das ist Adriana Jara. Sehen wir uns an, was in Chrome 106 für Entwickler neu ist.

Neue internationale APIs

Mit den Intl APIs können Inhalte in einem lokalisierten Format angezeigt werden.

Wie bei anderen Intl APIs wird auch hier die Last auf das System verlagert, sodass Sie keinen komplexen Lokalisierungscode an jeden Nutzer senden oder verwalten müssen.

Die API weiß, wo das Währungssymbol eingefügt werden muss, wie Datumsangaben und Uhrzeiten formatiert werden oder wie eine Liste erstellt wird.

Chrome 106 bietet eine Reihe neuer Funktionen für das Zahlenformat.

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

Müssen Sie eine Preisspanne anzeigen? formatRange ist die richtige Wahl.

Erstellen Sie ein neues numberFormat-Objekt, geben Sie die Option style und weitere 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 mit einer Genauigkeit von zwei Dezimalstellen auf die nächste Fünferschritte 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 können Sie dem Browser sogar mitteilen, dass er Endnullen einbeziehen soll. Das ist sehr hilfreich bei 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 auf MDN.

Mit der Pop-up API können Sie ganz einfach Benutzeroberflächen erstellen, wenn Sie Nutzern Informationen direkt präsentieren möchten.

Mit dem Attribut popup wird das Element automatisch in die oberste Ebene der Website verschoben und bietet einfache Steuerelemente zum Ein- und Ausblenden. Sie müssen sich keine Gedanken mehr über die Platzierung, das Stapeln von Elementen, den Fokus oder die Tastaturinteraktionen machen. Und das Beste: Es ist kein JavaScript erforderlich.

Mit nur dem folgenden Snippet kümmert sich die API um das Rendern des Elements über allen anderen Inhalten und um die Nutzereingabe und 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 Nutzer das Pop-up mit Touch-Gesten wie der ESC-Taste oder durch Klicken auf andere Elemente schließen.

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

Weitere Beispiele und API-Optionen findest du in diesem Artikel von Jhey.

Registrieren Sie sich für den Ursprungstest, um Ihren Nutzern ganz einfach aktuelle Informationen zu geben. Sag uns deine Meinung.

Neue CSS-Funktionen

Es gibt zwei neue CSS-Funktionen, die die Interoperabilität verbessern und Ihnen hoffentlich das Leben ein wenig erleichtern.

Es gibt eine neue Längeneinheit in der Stadt: ic nimmt an der Party teil. ic ähnelt ch. ic wird jedoch speziell für Text in Sprachen verwendet, die Ideogramme verwenden. Die Länge wird im Grunde anhand der Breite oder Höhe dieses Zeichens gemessen [irgendwohin zeigen], das „Wasser“ bedeutet.

Diese Einheit ist für die Textgröße vorgesehen. Sie können die Breite begrenzen, um die Lesbarkeit zu verbessern, und unabhängig von der Textgröße eine vorhersehbare Kontrolle haben.

Wenn Sie beispielsweise die max-width eines Containers auf 10ic festlegen, wissen Sie, dass der Container unabhängig von der Schriftgröße maximal 10 Glyphen in voller Breite enthält. Sehen Sie sich dazu das folgende Beispiel an:

Die CSS-Grid-Unterstützung für die Interpolation von grid-template-columns und grid-template-rows ist in Arbeit. Sie war für Chrome 106 geplant, wurde aber verschoben und wird in Chrome 107 eingeführt. Sie können sie aber schon in der Chrome-Betaversion ausprobieren. Hier ist Bramus' Code als Beispiel:

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Wir beginnen mit Phase 5 des Plans zur Reduzierung von User-Agents.
  • Die Unterstützung für HTTP2-Push und den Typ „Persistent Quota“ wird eingestellt.
  • Die CSS-Property hyphenate-character ist jetzt ohne Präfix verfügbar.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 106.

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 Adriana Jara. Sobald Chrome 107 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.