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

Pete LePage

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

Tôi là Pete LePage. 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 62!

Bạn muốn xem danh sách đầy đủ các thay đổi? Hãy xem danh sách thay đổi kho lưu trữ nguồn Chromium.

Chỉ báo chất lượng mạng

Network Information API đã có trong Chrome được một thời gian, nhưng API này chỉ cung cấp tốc độ mạng lý thuyết dựa trên kết nối của người dùng. Hãy tưởng tượng bạn đang dùng Wi-Fi nhưng kết nối với một điểm phát sóng di động chỉ có tốc độ 2G. API sẽ báo cáo Wi-Fi!

console.log(navigator.connection.type);
> wifi

Trong Chrome 62, API này đã được mở rộng để cung cấp các chỉ số hiệu suất mạng thực tế từ ứng dụng. Bằng cách sử dụng các tín hiệu chất lượng mạng này, bạn có thể điều chỉnh nội dung cho phù hợp với mạng. Ví dụ: trên các kết nối rất chậm, bạn có thể cải thiện hiệu suất tải trang bằng cách phân phát phiên bản rút gọn.

Để đơn giản hoá logic ứng dụng, API sẽ trả về hiệu suất mạng được đo lường theo cách so sánh với kết nối di động. Ví dụ: khi kết nối với một kết nối cáp quang siêu nhanh, API sẽ báo cáo 4G.

console.log(navigator.connection.effectiveType);
> 4G

Các tín hiệu này cũng sẽ có sẵn dưới dạng tiêu đề yêu cầu HTTP và được bật thông qua Gợi ý cho ứng dụng. Hãy xem mẫu và tham khảo quy cách để tìm hiểu sâu hơn.

Phông chữ biến đổi OpenType

Thông thường, một phông chữ chỉ chứa một phiên bản của bộ phông chữ, chẳng hạn như một độ đậm hoặc một độ giãn. Nếu muốn sử dụng phông chữ thường, in đậm và in nghiêng, bạn cần thêm 3 phông chữ riêng biệt, giúp tăng trọng số của trang.

Phông chữ biến thể OpenType tương đương với nhiều phông chữ riêng lẻ có thể được đóng gói gọn gàng trong một tệp phông chữ. Bạn có thể dễ dàng điều chỉnh thuộc tính CSS font-variation-settings, độ giãn, kiểu, độ đậm và các yếu tố khác, nhờ đó cung cấp vô số biến thể về kiểu cách. Giờ đây, bạn có thể kết hợp ba phông chữ đó thành một tệp nhỏ gọn.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

Phông chữ biến thể OpenType cung cấp cho chúng ta một công cụ mới mạnh mẽ để tạo kiểu chữ thích ứng và giảm trọng lượng trang. Hãy xem bài viết Giới thiệu về Phông chữ biến thể OpenType của John Hudson để biết thêm chi tiết.

Chụp nội dung nghe nhìn từ các phần tử DOM

Giờ đây, bạn có thể quay trực tiếp nội dung vào MediaStream ngay từ HTMLMediaElements như âm thanh và video, bằng API Quay nội dung đa phương tiện từ phần tử DOM.

Sau khi gọi captureStream() trên một phần tử nội dung đa phương tiện HTML, bạn có thể thao tác, xử lý, gửi từ xa hoặc ghi lại nội dung đã phát trực tuyến. Hãy tưởng tượng bạn có thể sử dụng âm thanh trên web để tạo bộ cân bằng âm thanh hoặc bộ mã hoá của riêng mình. Hoặc truyền nội dung đến một trang web từ xa bằng WebRTC. Khả năng là gần như vô hạn.

Nhãn Không an toàn cho một số trang HTTP

Như chúng tôi đã thông báo trước đó, bắt đầu từ Chrome 62, khi người dùng nhập dữ liệu trên một trang HTTP, Chrome sẽ đánh dấu trang đó là "Không an toàn" bằng một nhãn trong thanh địa chỉ. Nhãn này cũng sẽ hiển thị ở Chế độ ẩn danh cho tất cả các trang HTTP.

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

Tất nhiên, đây chỉ là một vài thay đổi trong Chrome 62 dành cho nhà phát triển, còn có rất nhiều thay đổi khác.

Sau đó, hãy đăng ký kênh YouTube của chúng tôi để nhận thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage và ngay sau khi Chrome 63 được phát hành, tôi sẽ có mặt ngay tại đây để cho bạn biết -- tính năng mới trong Chrome!