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"

想將數字四捨五入到小數點後兩位嗎？沒問題！

指定 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。

歡迎參閱 Jhey 的文章，查看更多範例和 API 選項。

註冊原生試用版，輕鬆為使用者提供及時資訊。請提供您寶貴的意見。

新的 CSS 功能

我們推出了兩項新的 CSS 功能，可改善互通性，希望能讓您事半功倍。

新的長度單位現身：ic 加入行列。ic 與 ch 相似，不過，ic 是專門用於以表意文字書寫的文字，基本上，它會根據這個字元 [點] 的寬度或高度來測量長度，這個字元代表水。

這是專為設定文字大小而設計的單位，可讓您限制寬度以提升可讀性，無論文字大小為何，都能提供可預測的控制項。

舉例來說，如果您將容器的 max-width 設為 10ic，您就知道，無論字型大小為何，容器最多會包含 10 個全寬字形。請參考以下範例：

CSS 格線支援 grid-template-columns 和 grid-template-rows 的插補功能即將推出，原本預計在 106 版推出，但因故延後，將在 Chrome 107 版推出，您仍可在 Chrome Beta 版中試用。以下是 Bramus 的程式碼範例：

還有更多獎品等著您！

當然，還有許多其他功能。

  • 我們將從使用者代理程式縮減計畫第五階段開始。
  • 我們將淘汰 HTTP2 Push 和永久配額類型的支援。
  • 而且 CSS 屬性 hyphenate-character 現已可用於不含前置字元的情況。

延伸閱讀

這只涵蓋部分重要亮點。請參閱下方連結，瞭解 Chrome 106 的其他異動。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Adriana Jara 當 Chrome 107 推出後，我會在這裡與您分享 Chrome 的新功能