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

Pete LePage

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

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

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

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

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

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.

Snap cuộn CSS

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à, trơn tru, bằng cách khai báo các vị trí cuộn để cho trình duyệt biết nơi sẽ dừng sau mỗi thao tác cuộn. Thao tác này cực kỳ 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; vào 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à đến 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 hiệu quả, ngay cả khi các mục tiêu chụp nhanh có kích thước khác hoặc khi lớn hơn thanh cuộn! Hãy xem bài đăng Kiểm soát hiệu quả kỹ thuật cuộn bằng CSS Scroll Snap để biết thêm thông tin chi tiết và ví dụ mà bạn có thể dùng thử!

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

điện thoại di động có vết cắt trên màn hình
Các trình duyệt thêm một ít lề trên thiết bị di động có vết cắt trên màn hình để ngăn nội dung bị vết cắt che mất.

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

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

Với các biến môi trường CSS và thẻ meta viewport-fit, giờ đây bạn có thể làm được điều đó. Ví dụ: để yêu cầu trình duyệt mở rộng đến vùng cắt trên 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ể dùng các biến môi trường CSS safe-area-inset-* để sắp xếp bố cục nội dung.

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

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

API Web Locks

Web Locks API cho phép bạn lấy khoá một cách không đồng bộ, giữ khoá trong khi thực hiện công việc, sau đó huỷ khoá. Trong khi khoá được giữ, không tập lệnh nào khác trong nguồn gốc có thể có đượ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ỉ một thẻ được đồng bộ hoá với mạng, thì mã đồng bộ hoá sẽ cố gắng lấy khoá có tên 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 có được khoá sẽ đồng bộ hoá dữ liệu với mạng. Nếu một thẻ khác cố có được cùng một khoá, thì thẻ đó sẽ được đưa vào hàng đợi. Sau khi nhả khoá, yêu cầu trong hàng đợi tiếp theo sẽ được cấp khoá và thực thi.

MDN có phần mở đầu về Web Lock tuyệt vời, bao gồm nội dung giải thích chi tiết hơn cùng nhiều ví dụ. Hoặc tìm hiểu kỹ hơn và xem spec.

Và nhiều kiến thức khác!

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

chuyển màu hình nón

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

Trứng phục sinh

Bạn có tìm thấy tất cả trứng phục sinh trong video không?

Xin chân thành cảm ơn tất cả những người đã giúp chúng tôi thực hiện 28 tập Mới trong Chrome. Mỗi người trong số họ đều rất tuyệt!

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 trên Chrome đã phát triển đến mức nào kể từ tập đầu tiên của chúng tôi? Hãy xem video tiến trình 30 giây thú vị này để đánh dấu lịch sử của chúng tôi từ video đầu tiên cho đến hôm nay!

Và tất nhiên, cảm ơn bạn đã xem và đưa ra nhận xét cũng như ý kiến phản hồi! Tôi đọc tất cả thông tin và ghi nhớ những đề xuất của bạn. Những video này đã trở nên tốt hơn nhờ có bạn!

Cảm ơn bạn đã theo dõi!

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

Chúng tôi đã tổng hợp một đoạn phim ngắn vui nhộn để bạn thưởng thức! Sau khi xem, tôi đã học được một vài điều:

  • Khi tôi lảm nhảm những câu nói của mình, tôi phát ra những âm thanh kỳ lạ.
  • Tôi làm mặt và thè lưỡi ra.
  • Tôi lắc lư nhiều.

Đă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 70 đượ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!