Trong Chrome 71, chúng tôi đã thêm tính năng hỗ trợ cho:
- Việc hiển thị thời gian tương đối hiện là một phần của API
Intl. - Chỉ định bên nào của văn bản sẽ được gạch chân xuất hiện cho văn bản chạy theo chiều dọc.
- Yêu cầu kích hoạt người dùng trước khi sử dụng API tổng hợp giọng nói.
Tôi là Pete LePage. Hãy cùng tìm hiểu kỹ và xem có gì mới dành cho nhà phát triển trong Chrome 71!
Nhật ký thay đổi
Bài viết này chỉ bao gồm 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 về những thay đổi trong Chrome 71.
- Danh sách thay đổi kho lưu trữ nguồn Chromium
- Thông tin cập nhật về ChromeStatus.com cho Chrome 71
- Ngừng sử dụng và xoá Chrome 71
Hiển thị thời gian tương đối bằng Intl.RelativeTimeFormat()
Nhiều ứng dụng web sử dụng các cụm từ như "hôm qua", "sau hai ngày" hoặc "một giờ trước" để cho biết thời điểm một việc gì đó đã 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 đã bản địa hoá để xử lý việc này cho chúng ta. Trên thực tế, 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 tôi thêm vào, rõ ràng là nhằm mục đích này.
Chrome 71 ra mắt Intl.RelativeTimeFormat(),
chuyển công việc sang công cụ JavaScript và cho phép định dạng đã bản địa hoá về
thời gian tương đối. Điều này giúp tăng hiệu suất một chút, đồng nghĩa với việc chúng tôi chỉ cần các thư viện đó dưới dạng 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
Khi văn bản tiếng Trung hoặc tiếng Nhật hiển thị trong luồng dọc, các trình duyệt không phù hợp với vị trí đặt dấu 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ố trang trí văn bản CSS3. Quy cách trang trí văn bản CSS3 bổ sung 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 dòng cần sử dụng, kiểu, màu sắc và vị trí.
.left {
text-underline-position: left;
}
.right {
text-underline-position: right;
}
Tổng hợp giọng nói cần có người dùng kích hoạt
Tất cả chúng tôi đều ngạc nhiên khi nhấn vào một trang web và trang web đó đột nhiên bắt đầu trao đổi với chúng tôi. Chính sách tự động phát ngăn các trang web tự động phát tệp âm thanh hoặc tệp video có âm thanh. Một số trang web đã tìm cách giải quyết 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 giọng nói hiện yêu cầu một số hình thức kích hoạt người dùng trên trang để API này hoạt động. Điều này giúp quảng cáo này 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 mã này trước khi người dùng tương tác với trang, thì trang sẽ kích hoạt lỗi.
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 một trang web và khiến bạn cũng như các đồng nghiệp ngồi xung quanh bạn ngạc nhiên.
Và nhiều kiến thức khác!
Đây chỉ là một vài trong số những thay đổi trong Chrome 71 dành cho nhà phát triển. Tất nhiên, còn rất nhiều thay đổi khác.
- Phương thức
Element.requestFullscreen()nay có thể tuỳ chỉnh được trên Android và cho phép bạn chọn hiển thị thanh điều hướng hoặc chế độ hiển thị hoàn toàn chìm (trong đó không có thao tác điều khiển tác nhân người dùng nào hiển thị cho đến khi thực hiện cử chỉ của người dùng). - Chế độ thông tin đăng nhập mặc định cho các yêu cầu tập lệnh mô-đun đã thay đổi từ
omitthànhsame-origin. - Đồng thời, khi Chrome tuân theo
thông số kỹ thuật của DOM bóng phiên bản 1,
Chrome 71 giờ đây sẽ tính toán tính cụ thể cho các lớp giả
:host()và:host-context()cũng như đối số cho::slotted().
Video về Chrome DevSummit
Nếu bạn không tham dự hoặc có thể bạn đã tham dự Hội nghị Nhà phát triển Chrome nhưng không xem hết các buổi trò chuyện, hãy xem danh sách phát của Hội nghị Nhà phát triển Chrome 2018 trên kênh YouTube của chúng tôi.
Eve và Phil đã đi vào một số kỹ thuật đơn giản để sử dụng trình chạy dịch vụ trong Xây dựng ứng dụng nhanh hơn, kiên cường hơn với trình chạy dịch vụ.
Mariko và Jake đã nói về cách họ xây dựng Squoosh trong Ứng dụng web phức tạp nặng JS, Tránh tốc độ chậm.
Katie và Houssein đã đề cập đến một số kỹ thuật tuyệt vời để tối đa hoá hiệu suất trang web trong Speed Essentials: Key Kỹ thuật để trang web nhanh.
Jake làm rơi chiếc bánh. Và còn nhiều video hay khác trong danh sách phát Chrome DevSummit 2018, vì vậy, hãy xem các video đó.
Đăng ký
Nếu bạn muốn luôn nhận được thông tin mới nhất về video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome và 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 72 được phát hành, tôi sẽ có mặt tại đây để cho bạn biết – Chrome có những điểm gì mới!