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

Chrome 106 の新機能

Pete LePage

Adriana Jara

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

数値の形式をより細かく制御できる新しい Intl API が導入されました。
Pop-up API のオリジントライアルがあり、重要なコンテンツを簡単にユーザーに表示できます。
相互運用性を向上させるために、いくつかの CSS 機能を追加します。
他にもたくさんあります。

ピートルページ、アドリアナジャラです。Chrome 106 のデベロッパー向け新機能を見ていきましょう

新しい Intl API

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

他の国際 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 の新機能

相互運用性を改善し、作業の負担を軽減する CSS の新機能が 2 つあります。

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

テキストのサイズに合わせて設計されたユニットで、幅を制限して読みやすくすることができます。また、テキストサイズに関係なく予測可能な制御が可能です。

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

CSS グリッドの grid-template-columns と grid-template-rows の補間が、まもなくサポートされるようになります。106 でリリースが予定されていますが、遅れて Chrome 107 でリリースされる予定です。Chrome ベータ版で引き続きお試しいただけます。Bramus のコードの例を以下に示します。

など多数

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

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

Chrome 106 の新機能

新しい Intl API

ポップアップ API

CSS の新機能

など多数

関連情報

登録