- Chrome 62 giúp API thông tin mạng trở nên hữu ích hơn bằng cách cung cấp các chỉ số hiệu suất thực tế thay vì kết quả lý thuyết.
- Chúng tôi đã hỗ trợ phông chữ biến OpenType.
- Bạn có thể ghi lại luồng nội dung nghe nhìn bằng các phần tử nội dung nghe nhìn HTML.
- Tôi có lời nhắc đặc biệt về một thay đổi quan trọng liên quan đến Chrome 62.
Tôi là Pete LePage. Hãy cùng tìm hiểu xem có gì mới dành cho nhà phát triển trong Chrome 62!
Bạn muốn xem toàn bộ danh sách 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 một thời gian, nhưng chỉ cung cấp tốc độ mạng trên lý thuyết dựa trên kết nối của người dùng. Giả sử bạn đang sử 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 Wi-Fi!
console.log(navigator.connection.type);
> wifi
Trong Chrome 62, API này đã được mở rộng để cung cấp chỉ số hiệu suất mạng thực tế từ ứng dụng. Khi sử dụng những 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 một phiên bản giảm.
Để đơn giản hoá logic ứng dụng, API sẽ trả về hiệu suất mạng đo lường được so với kết nối di động. Ví dụ: được 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 đề của yêu cầu HTTP và được bật thông qua Gợi ý ứng dụng. Hãy xem mẫu và xem spec để tìm hiểu kỹ hơn.
Phông chữ biến 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 trang thông thường, in đậm và in nghiêng, bạn cần thêm 3 phông chữ riêng biệt để tăng độ đậm của trang.
Phông chữ biến OpenType tương đương với nhiều phông chữ riêng lẻ có thể được đóng gói nhỏ gọn 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 thuộc tính CSS, độ giãn, kiểu, trọng lượng và các thành phần khác, cung cấp vô số biến thể về kiểu cách. Giờ đây, 3 phông chữ đó có thể được kết hợp thành một tệp nhỏ gọn và duy nhất.
.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 OpenType cung cấp cho chúng tôi một công cụ mới mạnh mẽ để tạo kiểu chữ thích ứng và giảm dung lượng trang. Hãy xem bài viết Giới thiệu về phông chữ biến OpenType của John Hudson để biết thêm chi tiết.
Thu thập nội dung nghe nhìn qua các phần tử DOM
Giờ đây, bạn có thể
ghi lại trực tiếp
nội dung vào MediaStream ngay trong HTMLMediaElements như âm thanh và
video, bằng
Media Capture từ API phần tử DOM.
Sau khi gọi captureStream() trên một phần tử nội dung nghe nhìn HTML, nội dung phát trực tuyến có thể được xử lý, xử lý, gửi từ xa hoặc ghi lại. Hãy tưởng tượng việc sử dụng âm thanh trên web để tạo bộ cân bằng âm thanh hoặc bộ mã hoá âm thanh của riêng bạn. Bạn cũng có thể phát trực tuyến nội dung đến một trang web từ xa bằng WebRTC. Hầu như mọi khả năng đều là vô tậ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 đây, kể từ phiên bản Chrome 62, khi người dùng nhập dữ liệu trên trang HTTP, Chrome sẽ đánh dấu trang đó là "Không an toàn" bằng nhãn trong thanh địa chỉ. Nhãn này cũng sẽ hiển thị ở Chế độ ẩn danh đối với tất cả các trang HTTP.
Và nhiều kiến thức khác!
Đây chỉ là một vài trong số rất nhiều thay đổi trong Chrome 62 dành cho nhà phát triển. Tất nhiên, còn rất nhiều thay đổi khác.
- API Yêu cầu thanh toán hiện đã có trên Chrome cho iOS.
- Bạn có thể bắt đầu xây dựng trải nghiệm thực tế ảo phong phú thử nghiệm bằng bản dùng thử theo nguyên gốc WebVR.
Sau đó, hãy đăng ký kênh YouTube của chúng tôi. Bạn sẽ nhận được thông báo qua email bất cứ khi nào 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 tại đây để cho bạn biết -- những điểm mới trong Chrome!