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

Pete LePage

Trong Chrome 71, chúng tôi đã thêm tính năng hỗ trợ cho:

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 71!

Nhật ký thay đổi

Nội dung 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 khác trong Chrome 71.

Hiển thị thời gian tương đối bằng Intl.RelativeTimeFormat()

Twitter hiển thị thời gian tương đối của bài đăng mới nhất

Nhiều ứng dụng web sử dụng các cụm từ như "hôm qua", "trong hai ngày" hoặc "một giờ trước" để cho biết thời điểm một sự kiện đã xảy ra hoặc sắp xảy ra, thay vì hiển thị ngày và giờ đầy đủ.

Việc hiển thị thời gian tương đối đã trở nên phổ biến đến mức hầu hết các thư viện ngày/giờ phổ biến đều cung cấp các hàm được bản địa hoá để xử lý vấn đề này cho chúng ta. Trên thực tế, trong hầu hết mọi ứng dụng web mà tôi xây dựng, Moment JS là một trong những thư viện đầu tiên mà tôi thêm vào, dành riêng cho mục đích này.

Chrome 71 ra mắt Intl.RelativeTimeFormat(), giúp chuyển công việc sang công cụ JavaScript và cho phép bản địa hoá định dạng về thời gian tương đối. Điều này giúp chúng tôi tăng một chút hiệu suất và có nghĩa là chúng tôi chỉ cần các thư viện đó làm tệp polyfill khi trình duyệt chưa hỗ trợ các API mới.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Cách sử dụng rất đơn giản, hãy tạo một thực thể mới và chỉ định ngôn ngữ, sau đó chỉ cần gọi định dạng với thời gian tương đối. Hãy xem bài đăng Intl.RelativeTimeFormat API của Mathias để biết toàn bộ thông tin chi tiết.

Chỉ định vị trí gạch chân cho văn bản dọc

Văn bản dọc có nét gạch dưới không nhất quán

Khi văn bản tiếng Trung hoặc tiếng Nhật hiển thị theo luồng dọc, trình duyệt không nhất quán với vị trí đặt đường gạch dưới, có thể ở bên trái hoặc bên phải.

Trong Chrome 71, thuộc tính text-underline-position hiện chấp nhận left hoặc right như một phần của thông số kỹ thuật trang trí văn bản CSS3. Thông số kỹ thuật trang trí văn bản CSS3 thêm một số thuộc tính mới cho phép sử dụng để chỉ định những nội dung như loại đường cần sử dụng, kiểu, màu và vị trí.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Tính năng tổng hợp lời nói yêu cầu người dùng kích hoạt

Chúng ta đều đã từng ngạc nhiên khi truy cập vào một trang web và trang web đó đột nhiên bắt đầu trò chuyện với chúng ta. Chính sách về tính năng tự động phát ngăn các trang web tự động phát tệp âm thanh hoặc video có âm thanh. Một số trang web đã cố gắng khắc phục vấn đề này bằng cách sử dụng API tổng hợp giọng nói.

Kể từ Chrome 71, API tổng hợp lời nói hiện yêu cầu người dùng kích hoạt một số loại trên trang thì API này mới hoạt động. Điều này giúp phù hợp với các chính sách tự động phát khác. Nếu bạn cố gắng sử dụng trước khi người dùng tương tác với trang, thì lỗi sẽ xảy ra.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Không có gì tệ hơn việc truy cập vào một trang web và trang web đó làm bạn và các đồng nghiệp ngồi xung quanh bạn ngạc nhiên.

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

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

Video về Chrome DevSummit

Nếu bạn không tham dự được Hội nghị nhà phát triển Chrome hoặc có tham dự nhưng không xem được tất cả các buổi nói chuyện, hãy xem danh sách phát Hội nghị nhà phát triển Chrome 2018 trên kênh YouTube của chúng tôi.

Eva và Phil đã chia sẻ một số kỹ thuật hay để sử dụng worker dịch vụ trong bài viết Tạo ứng dụng nhanh hơn, linh hoạt hơn bằng worker dịch vụ.

Mariko và Jake đã nói về cách họ xây dựng Squoosh trong Các ứng dụng web phức tạp nặng JS, Tránh sự chậm trễ.

Katie và Houssein đã đề cập đến một số kỹ thuật hiệu quả để tăng tối đa hiệu suất của trang web trong bài viết Kiến thức cơ bản về tốc độ: Các kỹ thuật chính để tạo trang web nhanh.

Jake làm rơi chiếc bánh. Ngoài ra, còn có rất nhiều video hay khác trong danh sách phát Chrome DevSummit 2018. Hãy xem các video đó.

Đăng ký

Nếu muốn cập nhật video của chúng tôi, 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à Pete LePage. Ngay khi Chrome 72 đượ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!