このページは Cloud Translation API によって翻訳されました。

Chrome 106 の新機能

Pete LePage

Adriana Jara

必知事項は次のとおりです。

数値のフォーマット設定をより細かく制御できる新しい Intl API が追加されました。
重要なコンテンツをユーザーに簡単に表示できるポップアップ API のオリジントライアルが実施されています。
相互運用性を改善するために、いくつかの CSS 機能が追加されます。
他にも多くの機能を利用できます。

Pete LePage と Adriana Jara と申します。Chrome 106 のデベロッパー向けの新機能について詳しく見てみましょう。

新しい Intl API

Intl API は、ローカライズされた形式でコンテンツを表示するのに役立ちます。

他の Intl API と同様に、負担はシステムに移行されるため、複雑なローカライズコードをすべてのユーザーに配布したり、維持したりする必要はありません。

API は、通貨記号の位置、日時の書式設定、リストのコンパイル方法を把握しています。

Chrome 106 では、数値形式の新しい機能が多数追加されています。

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

価格帯を表示する必要がある場合formatRange が対応します。

新しい numberFormat オブジェクトを作成し、style などのオプションと表示する桁数を指定します。

次に、formatRange() を呼び出してフォーマット済み文字列を取得します。

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"

数値を小数点以下 2 桁の精度で 5 の倍数に四捨五入したい場合、大丈夫。

minimumFractionDigits と roundingIncrement を指定して、format() を呼び出します。

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

trailingZeroDisplay を使用して、末尾のゼロを含めるようにブラウザに指示することもできます。これは価格に非常に便利です。

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%

詳しくは、MDN の国際数値形式のドキュメントをご覧ください。

Pop-Up API を使用すると、ユーザーの目の前に情報を表示するだけで済む場合に、UI を簡単に作成できます。

popup 属性を使用すると、要素がサイトの最上位レイヤに自動的に移動し、可視性を簡単に切り替えることができます。要素の配置、スタッキング、フォーカス、キーボード操作について心配する必要はありません。何よりも、JavaScript は必要ありません。

次のスニペットのみを使用して、API が他のすべてのコンテンツの上に要素をレンダリングし、ユーザー入力とフォーカス管理を処理します。

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

デフォルトでは、ユーザーは Esc キーなどのジェスチャーや、他の要素をクリックしてポップアップを閉じることができます。

デベロッパーは、トップレイヤのスタイル、配置、サイズを完全に制御できるだけでなく、デフォルトの動作を柔軟に変更することもできます。CSS と HTML のみを使用します。

その他の例と API オプションについては、Jhey の記事をご覧ください。

オリジントライアルに登録して、ユーザーにタイムリーな情報を簡単に提供しましょう。ご意見、ご感想をお寄せください。

CSS の新機能

相互運用性を改善し、作業を少しでも楽にするための 2 つの新しい CSS 機能があります。

町に新たな長さのユニットがあります。「ic」がパーティーに参加します。ic は ch と同様です。ただし、ic は表意文字を使用する言語で記述されたテキスト専用です。基本的には、この文字 [どこかにポイント] という水を意味する幅または高さに基づいて長さを測定します。

テキストのサイズを指定するために設計された単位で、幅を制限して読みやすくすることができます。また、テキストサイズに関係なく予測可能な制御が可能です。

たとえば、コンテナの max-width を 10ic に設定すると、フォントサイズに関係なく、コンテナに最大 10 個の全角グリフが含まれることがわかります。次の例をご覧ください。

grid-template-columns と grid-template-rows の補間に対する CSS グリッドのサポートが実装されます。106 でサポートされる予定ですが、遅れて Chrome 107 でリリースされる予定です。Chrome ベータ版では引き続き試すことができます。以下に、Bramus のコードを示します。

その他

もちろん、他にもたくさんあります。

ユーザーエージェントを削減する計画のフェーズ 5 を開始します。
HTTP2 Push と永続的な割り当てタイプのサポートが非推奨になりました。
また、CSS プロパティ hyphenate-character をプレフィックスなしで使用できるようになりました。

Chrome 106 の新機能

新しい Intl API

ポップアップ API

CSS の新機能

その他

関連情報

登録