Tính năng mới trong Chrome 106

Pete LePage
Adriana Jara

Dưới đây là những gì bạn cần phải biết:

  • Hiện đã có API Intl mới giúp bạn có nhiều quyền kiểm soát hơn khi định dạng số.
  • Chúng tôi có một bản dùng thử gốc cho Pop-up API để giúp người dùng dễ dàng xem nội dung quan trọng.
  • Chúng tôi sẽ thêm một số tính năng CSS để cải thiện khả năng tương tác.
  • Và còn nhiều nhiều lợi ích khác.

Tôi là Pete LePage, Adriana Jara. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 106.

API quốc tế mới

API Intl giúp hiển thị nội dung ở định dạng được bản địa hoá.

Giống như các API Intl khác, API này chuyển gánh nặng sang hệ thống – vì vậy, bạn không cần phải vận chuyển hoặc duy trì mã bản địa hoá phức tạp cho mọi người dùng.

API biết vị trí của ký hiệu đơn vị tiền tệ, cách định dạng ngày và giờ hoặc biên dịch danh sách.

Chrome 106 bổ sung một loạt chức năng định dạng số mới.

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

Bạn cần hiển thị khoảng giá? formatRange sẽ giúp bạn.

Tạo một đối tượng numberFormat mới, cung cấp style và các tuỳ chọn khác, cũng như số chữ số cần hiển thị.

Sau đó, hãy gọi formatRange() để lấy chuỗi đã định dạng.

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"

Bạn muốn làm tròn một số đến số gia gần nhất của 5 với độ chính xác là hai chữ số thập phân? Không thành vấn đề.

Chỉ định minimumFractionDigits và roundingIncrement, sau đó gọi 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%"

Bạn thậm chí có thể yêu cầu trình duyệt thêm số 0 ở cuối bằng trailingZeroDisplay, rất hữu ích cho giá.

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%

Hãy xem tài liệu về Định dạng số quốc tế trên MDN để biết thêm thông tin.

API cửa sổ bật lên giúp bạn dễ dàng xây dựng giao diện người dùng hơn, đặc biệt là khi bạn chỉ cần đưa thông tin ngay trước mặt người dùng.

Thuộc tính popup tự động đưa phần tử này vào lớp trên cùng của trang web và cung cấp các chế độ điều khiển dễ dàng để bật/tắt chế độ hiển thị. Bạn không còn phải lo lắng về việc định vị, xếp chồng các phần tử, tiêu điểm hoặc tương tác bằng bàn phím nữa. Hơn hết, bạn không cần JavaScript.

Chỉ với đoạn mã sau, API sẽ xử lý việc hiển thị phần tử trên tất cả nội dung khác, đồng thời xử lý dữ liệu đầu vào của người dùng và quản lý tiêu điểm.

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

Theo mặc định, người dùng có thể đóng cửa sổ bật lên bằng các cử chỉ như phím ESC hoặc nhấp vào các phần tử khác.

Ngoài ra, nhà phát triển có toàn quyền kiểm soát kiểu, vị trí và kích thước của lớp trên cùng, đồng thời có thể linh hoạt sửa đổi các hành vi mặc định. Chỉ sử dụng CSS và HTML.

Hãy xem bài viết của Jhey để biết thêm ví dụ và lựa chọn API.

Đăng ký dùng thử phiên bản gốc để dễ dàng cung cấp thông tin kịp thời cho người dùng. Hãy chia sẻ suy nghĩ của bạn.

Các tính năng mới của CSS

Có hai tính năng CSS mới giúp cải thiện khả năng tương tác và hy vọng sẽ giúp cuộc sống của bạn dễ dàng hơn một chút.

Có một đơn vị đo lường chiều dài mới: ic sẽ tham gia nhóm. ic tương tự như ch. Tuy nhiên, ic được dùng riêng cho văn bản viết bằng ngôn ngữ sử dụng biểu tượng, về cơ bản, thuộc tính này đo chiều dài dựa trên chiều rộng hoặc chiều cao của ký tự này [point Một nơi nào đó], nghĩa là nước.

Đây là một đơn vị được thiết kế để định cỡ văn bản, cho phép bạn giới hạn chiều rộng để cải thiện khả năng đọc và cung cấp khả năng kiểm soát có thể dự đoán được bất kể kích thước văn bản.

Ví dụ: nếu bạn đặt max-width của một vùng chứa, giả sử là 10ic, bạn biết rằng vùng chứa sẽ chứa tối đa 10 ký tự có chiều rộng đầy đủ, bất kể kích thước phông chữ. Hãy xem ví dụ sau:

Tính năng hỗ trợ Lưới CSS cho hoạt động nội suy cho grid-template-columns và grid-template-rows sắp ra mắt. Tính năng này dự kiến sẽ ra mắt trong phiên bản 106, nhưng bị trì hoãn và sẽ ra mắt trong Chrome 107. Bạn vẫn có thể dùng thử tính năng này trong Chrome Beta. Dưới đây là mã của Bramus để minh hoạ:

Và nhiều tính năng khác!

Tất nhiên còn nhiều tính năng khác.

  • Chúng tôi đang bắt đầu giai đoạn 5 của kế hoạch giảm tác nhân người dùng.
  • Chúng tôi sẽ ngừng hỗ trợ tính năng Đẩy HTTP2 và loại Hạn mức cố định.
  • Và thuộc tính CSS hyphenate-character hiện không có tiền tố.

Tài liệu đọc thêm

Bài viết này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm các thay đổi trong Chrome 106.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Adriana Jara. Ngay khi Chrome 107 được phát hành, tôi sẽ ở đây để giới thiệu cho bạn những tính năng mới trong Chrome!