Trang này được dịch bởi Cloud Translation API.

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

Pete LePage

Đã mười năm kể từ khi Chrome được phát hành lần đầu tiên. Từ đó đến nay, đã có nhiều thay đổi 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ì chưa!

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ộ màn hình, bao gồm cả 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.
Web Locks API cho phép bạn thu nạp khoá không đồng bộ, giữ khoá trong khi thực hiện thao tác rồi thả 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.

Ảnh chụp nhanh khi 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à, 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 cực kỳ hữu ích đối với 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à 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 Kiểm soát tính năng cuộn hiệu quả bằng CSS Scroll Snap để biết thêm thông tin và mẫu 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ó thiết kế vết cắt trên màn hình — Trình duyệt sẽ thêm một phần lề trên thiết bị di động có vết cắt trên màn hình để nội dung không bị vết cắt che khuất.

Số lượng thiết bị di động ngày càng tăng được phát hành với một vết cắt trên màn hình, đôi khi được gọi là một vết cắt. Để 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 anh muốn 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 này. 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ể sử dụng safe-area-inset-* 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);
}

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.

API Web Locks

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

MDN có một bản tóm tắt về Khoá web tuyệt vời, bao gồm nội dung giải thích chi tiết hơn và nhiều ví dụ. Hoặc tìm hiểu sâu hơn và xem spec.

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 nữa.

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

Từ thông số CSS4, giờ đây, bạn có thể tạo 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 sắc độ. Lea Verou có một CSS conic-gradient() polyfill mà bạn có thể sử dụng, ngoài ra trang này có rất nhiều mẫu rất thú vị do cộng đồng gửi.
Hiện đã có phương thức toggleAttribute() mới trên các phần tử giúp 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ẽ nhận hai 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 với tất cả các phần tử của mảng con được nối liền vào đó.
Và OffscreenCanvas di chuyển công việc ra khỏi luồng chính cho một worker, giúp loại bỏ điểm tắc nghẽn về hiệu suất.

Trứng Phục sinh

Bạn có tìm thấy tất cả điều thú vị ẩn giấu trong video này không?

Chúng tôi gửi lời cảm ơn đặc biệt đến những người đã giúp chúng tôi thực hiện 28 tập của tính năng Mới trong Chrome. Mỗi người trong số 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 biết tính năng Mới trong Chrome đã phát triển như thế nào kể từ tập đầu tiên của chúng tôi? Hãy xem video tiến trình dài 30 giây thú vị này để so sánh lịch sử của chúng ta từ video đầu tiên cho đến hôm 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ả đề xuất 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 đã 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 kinh dị vui nhộn để bạn thưởng thức! Sau khi xem video đó, tôi đã học được một số điều:

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

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 và ngay sau khi Chrome 70 được phát hành, tôi sẽ có mặt ngay tại đây để cho bạn biết -- tính năng mới trong Chrome!