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. Đã có nhiều thay đổi kể từ đó, 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 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 cho phép bạn tạo trải nghiệm cuộn mượt mà và bóng bẩy.
Vết cắt trên màn hình cho phép bạn sử dụng toàn bộ diện tích màn hình, kể cả mọi không gian phía sau vết cắt trên màn hình (đôi khi còn gọi là tai thỏ).
Web Locks API cho phép bạn không đồng bộ lấy một khoá, giữ khoá đó trong khi thực hiện công việc, sau đó giải phóng khoá.

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

Tôi là Pete LePage. Hãy cùng khám phá những điểm 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? Xem danh sách thay đổi trong kho lưu trữ nguồn Chromium.

CSS Scroll Snap

CSS Scroll Snap cho phép bạn tạo trải nghiệm cuộn mượt mà và trơn tru bằng cách khai báo các vị trí chụp cuộn để cho trình duyệt biết nơi dừng 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; vào mỗi hình ảnh. Sau đó, khi người dùng di chuyển qua băng chuyền, mỗi hình ảnh sẽ được di chuyển mượt mà vào đúng vị trí.

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

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

Tính năng CSS Scroll Snapping hoạt động hiệu quả, ngay cả khi các mục đích chụp có kích thước khác nhau hoặc khi chúng lớn hơn trình cuộn! Hãy xem bài đăng Tính năng cuộn có kiểm soát tốt bằng tính năng Chụp cuộn CSS để 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à 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 số lề bổ sung 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 khuất.

Ngày càng có nhiều thiết bị di động được phát hành có vết cắt trên màn hình, đôi khi còn gọi là vết khuyết. Để xử lý vấn đề đó, các trình duyệt sẽ thêm một chút khoảng lề vào trang của bạn để nội dung không bị che khuất bởi vết cắ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 việc này bằng 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 vết 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-* 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);
}

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

Web Locks API

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

Ví dụ: nếu một ứng dụng web chạy trên nhiều thẻ muốn đảm bảo rằng chỉ có một thẻ đồng bộ hoá với mạng, thì mã đồng bộ hoá sẽ cố gắng lấy một 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 có được 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 giải phóng, yêu cầu tiếp theo trong hàng đợi sẽ được cấp khoá và thực thi.

MDN có một tài liệu giới thiệu tuyệt vời về Web Locks, đồng thời cung cấp nội dung giải thích chi tiết hơn và nhiều ví dụ. Hoặc tìm hiểu kỹ 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.

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

Theo quy cách CSS4, giờ đây, bạn có thể tạo hiệu ứng chuyển màu xung quanh chu vi của một hình 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 conic-gradient() CSS 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 đến.
Có một phương thức toggleAttribute() mới trên các phần tử, phương thức này sẽ 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 có 2 phương thức mới: flat() và flatMap(). Chúng trả về một mảng mới có tất cả các phần tử mảng con được kết hợp vào đó.
Và OffscreenCanvas sẽ di chuyển công việc ra khỏi luồng chính vào một luồng thực thi, giúp loại bỏ các 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ả quả trứng phục sinh trong video này 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 của loạt video New in Chrome. Mỗi người trong số họ đều rất 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 có muốn xem những thay đổi của New in Chrome kể từ tập đầu tiên không? Hãy xem video thú vị này (dài 30 giây) để biết quá trình phát triển của chúng tôi từ video đầu tiên cho đến nay!

Và tất nhiên, cảm ơn bạn đã xem cũng như đưa ra bình luận và ý 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. Các video này đã trở nên hay hơn nhờ có bạn!

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

New in Chrome Bloopers

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

Khi nói vấp, tôi thường phát ra những âm thanh kỳ lạ.
Tôi làm mặt ngớ ngẩn và thè lưỡi.
Tôi hay ngọ nguậy.

Nếu muốn nắm bắt thông tin mới nhất về các video của chúng tôi, hãy đăng ký theo dõi kênh YouTube của Chrome Developers. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt một video mới.

Tôi là Pete LePage và ngay khi Chrome 70 được phát hành, tôi sẽ có mặt ở đây để cho bạn biết những điểm mới trong Chrome!