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 về 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 lại 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 WiFi!

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

Theo truyền thống, một phông chữ chỉ chứa một thực thể của một bộ phông chữ, ví dụ: 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 đổi 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ằng cách điều chỉnh thuộc tính CSS font-variation-settings, bạn có thể dễ dàng điều chỉnh độ giãn, kiểu, độ đậm và nhiều thuộc tính khác, mang đến vô số biến thể kiểu. 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.

Quay video 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 nội dung phát trực tuyến. Hãy tưởng tượng bạn sử dụng âm thanh trên web để tạo bộ cân bằng hoặc bộ mã hoá/giải mã giọng nói của riêng mình. Hoặc truyền trực tuyến nội dung đến một trang web từ xa bằng WebRTC. Có vô vàn khả năng để bạn khai thác.

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ẽ xuất hiện trong 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. Ngay khi Chrome 63 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!