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

Pete LePage

Đã mười năm kể từ lần đầu tiên Chrome được phát hành. Kể từ đó, nhiều thứ đã thay đổi, nhưng mục tiêu của chúng tôi là xây dựng một nền tảng vững chắc cho các ứng dụng web hiện đại vẫn không thay đổi!

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

• CSS Scroll Snap giúp bạn tạo ra trải nghiệm cuộn mượt mà, mượt mà.
• Vết cắt trên màn hình cho phép bạn sử dụng toàn bộ khu vực của màn hình, bao gồm mọi không gian phía sau vết cắt trên màn hình, đôi khi còn được gọi là phần cắt.
• Web Locks API cho phép bạn thu nạp khoá một cách không đồng bộ, giữ khoá đó trong khi thực hiện công việc, sau đó giải phóng khoá.

Và nhiều lợi ích khác!

Tôi là Pete LePage. Hãy cùng tìm hiểu có gì mới dành cho nhà phát triển trong Chrome 69!

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.

Tính năng cuộn chụp nhanh CSS

Cảnh báo: Bài đăng này đề cập đến CSS Scroll Snap (Điểm cuộn CSS) là tiêu chuẩn hiện tại, đừng nhầm lẫn với CSS Scroll Snap Points (Điểm cuộn CSS) đã ngừng hoạt động và không còn nằm trong lộ trình tiêu chuẩn nữa.

Xem bản minh hoạ | Nguồn

CSS Scroll Snap cho phép bạn tạo trải nghiệm cuộn mượt mà, mượt mà bằng cách khai báo các vị trí bắt chụp cuộn cho trình duyệt biết vị trí dừng lại sau mỗi thao tác cuộn. Điều này rất hữu ích cho băng chuyền hình ảnh hoặc các phần được phân trang mà bạn muốn người dùng cuộn đến một điểm cụ thể.

Đối với băng chuyền hình ảnh, tôi sẽ thêm scroll-snap-type: x mandatory; vào vùng chứa cuộn và scroll-snap-align: center; cho mỗi hình ảnh. Sau đó, khi người dùng cuộn qua băng chuyền, từng hình ảnh sẽ được cuộn mượt mà vào vị trí hoàn hảo.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

Tính năng chụp nhanh CSS hoạt động tốt, ngay cả khi các mục tiêu chụp nhanh có kích thước khác hoặc khi chúng lớn hơn trình cuộn! Hãy xem bài đăng Cuộn có kiểm soát tốt bằng tính năng CSS Scroll Snap để biết thêm thông tin chi tiết và các mẫu bạn có thể thử!

Vết cắt trên màn hình (còn gọi là phần cắt)

Các trình duyệt thêm một số lề bổ sung trên thiết bị di động có phần cắt màn hình để ngăn nội dung bị phần cắt che khuất.

Số lượng thiết bị di động được phát hành có phần cắt màn hình (đôi khi gọi là phần cắt) ngày càng tăng. Để giải quyết vấn đề này, trình duyệt sẽ thêm một chút lề vào trang của bạn để nội dung không bị phần vết cắt che khuất.

Nhưng nếu bạn muốn sử dụng không gian đó thì sao?

Giờ đây, bạn có thể làm được điều này nhờ các biến môi trường CSS và thẻ meta viewport-fit. Ví dụ: để yêu cầu trình duyệt mở rộng vào vùng cắt màn hình, hãy đặt thuộc tính viewport-fit trong thẻ meta viewport thành cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Sau đó, bạn có thể sử dụng safe-area-inset-* các biến môi trường CSS để bố trí nội dung.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Lưu ý: Hãy nhớ: Bạn cần kiểm thử kỹ vấn đề này; bạn đang cho trình duyệt biết rằng sẽ không sao nếu một số nội dung bị ẩn sau phần cắt màn hình. Đừng quên thử nghiệm ở cả chế độ dọc và ngang.

Có một bài đăng hay trên blog WebKit về Thiết kế trang web cho iPhone X, hoặc xem công cụ giải thích để biết thêm chi tiết.

Web Locks API

Web Locks API cho phép bạn thu nạp khoá một cách không đồng bộ, giữ khoá đó trong khi thực hiện công việc, sau đó giải phóng khoá. Khi khoá được giữ, không tập lệnh nào khác trong nguồn gốc có thể nhận được cùng một khoá đó, giúp điều phối việc sử dụng tài nguyên dùng chung.

Ví dụ: nếu một ứng dụng web chạy trong nhiều thẻ muốn đảm bảo rằng chỉ có một thẻ đang đồng bộ hoá với mạng, thì mã đồng bộ hoá sẽ cố gắng lấy khoá có tên là network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Thẻ đầu tiên để lấy khoá sẽ đồng bộ hoá dữ liệu với mạng. Nếu một thẻ khác cố gắng có được cùng một khoá, thì thẻ đó sẽ được đưa vào hàng đợi. Sau khi khoá được phát hành, yêu cầu tiếp theo trong hàng đợi sẽ được cấp khoá và thực thi.

MDN có một hướng dẫn cơ bản tuyệt vời về Khoá web, đồng thời cung cấp nội dung giải thích chuyên sâu hơn và nhiều ví dụ. Hoặc tìm hiểu sâu hơn và xem thông số kỹ thuật.

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

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

• Từ thông số kỹ thuật CSS4, giờ đây, bạn có thể tạo hiệu ứng chuyển màu xung quanh chu vi của một vòng tròn bằng cách sử dụng hiệu ứng chuyển màu hình nón. Lea Verou có một polyfill CSS conic-gradient() mà bạn có thể sử dụng và trang này bao gồm một loạt các mẫu rất thú vị do cộng đồng gửi.
• Có một phương thức toggleAttribute() mới trên các phần tử bật/tắt sự tồn tại của một thuộc tính, tương tự như classList.toggle().
• Mảng JavaScript sẽ có hai phương thức mới: flat() và flatMap(). Các hàm này trả về một mảng mới với tất cả các phần tử mảng con được hợp nhất vào đó.
• Và OffscreenCanvas di chuyển công việc ra khỏi luồng chính vào một worker, giúp loại bỏ nút thắt cổ chai về hiệu suất.

Trứng phục sinh

Bạn đã tìm thấy tất cả quả trứng phục sinh trong video này chưa?

• Truyện tranh của Chrome
• Dây đeo Chromercise
• Potato pháo
• Pete Monster
• Khủng long bằng gỗ từ CDS 2017

Xin cảm ơn đặc biệt tất cả những người đã giúp chúng tôi thực hiện 28 tập của loạt video Mới trong Chrome. Tất cả những người này đều tuyệt vời!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Bạn muốn xem tính năng Mới trong Chrome đã phát triển như thế nào kể từ tập đầu tiên? Hãy xem video tiến trình thú vị dài 30 giây này để biết quá trình phát triển của chúng tôi từ video đầu tiên cho đến nay!

Cảm ơn bạn đã theo dõi cũng như đưa ra nhận xét cũng như ý kiến phản hồi! Tôi đã đọc tất cả các ý kiến và ghi nhớ những đề xuất của bạn. Những video này trở nên hay hơn là nhờ bạn!

Cảm ơn bạn đã xem!

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

Chúng tôi đã tổng hợp một số cảnh quay vui nhộn để bạn thưởng thức! Sau khi xem video này, tôi đã học được một số điều:

• Khi tôi vấp phải từ, tôi phát ra một số âm thanh kỳ lạ.
• Tôi làm mặt và thè lưỡi.
• Tôi lắc lư rất nhiều.

Đăng ký

Nếu bạn muốn cập nhật video, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome của chúng tôi. 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 70 đượ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!