本頁面由 Cloud Translation API 翻譯而成。

Chrome 106 新功能

Pete LePage

Adriana Jara

以下是一些注意事項：

推出新的 Intl API，可讓您進一步控管數字格式設定。
Pop-up 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"

想要將數字無條件進位到最接近的五倍，且精確度要到小數點後兩位嗎？也沒問題

指定 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，使用者就能以更簡單的方式建構使用者介面，需要將資訊放在使用者眼前。

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 功能，可提升互通性，讓你的生活更加輕鬆。

鎮上沒有新的可預約時間：ic正在加入派對。ic 與 ch 類似，不過，ic 專門用於使用表圖的語言文字，基本上就是根據這個字元 [指向某處] (意指水) 的寬度或高度測量長度。

這個單元專為調整文字大小而設計，可讓您限制寬度來提高可讀性。無論文字大小為何，都能控制相關控制項。

舉例來說，假設您將容器的 max-width 設為 10ic，就「知道」無論字型大小為何，容器最多可包含 10 個全寬度字符。請看以下範例：

我們即將推出 grid-template-columns 和 grid-template-rows 的 CSS 格線支援，並預計於 106 推出。不過，我們將在 Chrome 107 版本延後推出這項功能，您仍可在 Chrome 107 中試用此功能。Bramus 的程式碼範例如下：

還有更多獎品等著您！

當然還有許多其他事物。

我們進入了使用者代理程式縮減計畫的第 5 階段。
停止支援 HTTP2 推送和永久配額類型。
此外，CSS 屬性 hyphenate-character 現已不支援前置字串。

其他資訊

以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 106 的其他變更，請點選下方連結。

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Adriana Jara，Chrome 107 推出後，我將立刻為您介紹 Chrome 的新功能！

Chrome 106 新功能

新的 Intl API

Pop-up API

新的 CSS 功能

還有更多獎品等著您！

其他資訊

訂閱