Neu in Chrome 106

Pete LePage
Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit den neuen Intl APIs haben Sie mehr Kontrolle bei der Formatierung von Zahlen.
  • 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 die Belastung auf das System übertragen. Sie müssen also keinen komplexen Lokalisierungscode für jeden Nutzer bereitstellen oder verwalten.

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 style und andere Optionen sowie die Anzahl der Ziffern an, die angezeigt werden sollen.

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

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"

Sie möchten eine Zahl mit einer Genauigkeit von zwei Dezimalstellen auf das nächste Vielfache von fünf aufrunden? 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 der MDN.

Die Pop-up API vereinfacht das Erstellen von UIs, 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, um die Sichtbarkeit umzuschalten. 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. Verwenden Sie nur CSS und HTML.

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

Melden Sie sich für den Testzeitraum an, um Ihren Nutzern zeitnah Informationen zur Verfügung stellen zu können. 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 Maßeinheit für Längen: ic ist da. ic ähnelt ch. ic wird jedoch speziell für Texte 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 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 wichtige Highlights. Unter den folgenden Links finden Sie weitere Informationen zu den Ä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.