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:

Tôi là Pete LePage, còn tôi là Adriana Jara. Hãy cùng tìm hiểu sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 106.

API Intl mới

API Quốc tế giúp hiển thị nội dung theo định dạng đã bản địa hoá.

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

API này biết vị trí ký hiệu tiền tệ, cách định dạng ngày và giờ hoặc tổng hợp 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ị một khoảng giá? formatRange đã giúp bạn giải quyết vấ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ố lượng chữ số sẽ hiển thị.

Sau đó, 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 là 5 với độ chính xác là hai chữ số thập phân? Không thành vấn đề.

Hãy 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 theo sau vào trailingZeroDisplay, cực kỳ hữu ích về 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 việc xây dựng giao diện người dùng trở nên dễ dàng hơn, chẳng hạn như khi bạn chỉ cần đưa thông tin ngay cho người dùng.

Thuộc tính popup, tự động đưa phần tử lên 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 sắp xếp vị trí, xếp chồng các phần tử, tiêu điểm hoặc tương tác với bàn phím nữa. Hơn hết, ứng dụng này không cần JavaScript.

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

<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 thành phần khác.

Các 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, nhưng cũng 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 đọc bài viết của Jhey để biết thêm ví dụ và các lựa chọn về API.

Đăng ký bản dùng thử theo nguyê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 CCS

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ị độ dài mới trong thị trấn: ic đang 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ữ có sử dụng chữ tượng hình, về cơ bản, thuộc tính này đo lường độ dài dựa trên chiều rộng hoặc chiều cao của ký tự này [điểm ở đâu đó] có nghĩa là nước.

Đây là một đơn vị được thiết kế để định kích thướ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à cho phép 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 đặt max-width của một vùng chứa, giả sử là 10ic, bạn sẽ biết 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 tìm hiểu trong ví dụ sau:

Sắp tới, chúng tôi sẽ hỗ trợ nội suy lưới CSS cho grid-template-columns và grid-template-rows, dự kiến cho phiên bản 106, nhưng bị 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à ví dụ về mã của Bramus:

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

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

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

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

Đăng ký

Để 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 sau khi Chrome 107 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!