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

Pete LePage

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

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

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

Nhật ký thay đổi

Nội dung này chỉ đề cập đến 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 các thay đổi khác trong Chrome 74.

Trường lớp riêng tư

Các trường lớp giúp đơn giản hoá cú pháp lớp bằng cách tránh việc cần có hàm khởi tạo chỉ để xác định các thuộc tính thực thể. Trong Chrome 72, chúng tôi đã thêm tính năng hỗ trợ cho các trường lớp công khai.

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

Và tôi đã nói rằng các trường lớp riêng tư đang được xây dựng. Tôi vui mừng thông báo rằng các trường lớp riêng tư đã có trong Chrome 74. Cú pháp trường riêng tư mới tương tự như các trường công khai, ngoại trừ việc bạn đánh dấu trường là riêng tư bằng cách sử dụng # (dấu thăng). Hãy coi # là một phần của tên trường.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

Hãy nhớ rằng các trường private chỉ là riêng tư. Bạn có thể truy cập vào các thuộc tính này bên trong lớp, nhưng không thể truy cập bên ngoài phần nội dung của lớp.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

Để đọc thêm về các lớp công khai và riêng tư, hãy xem bài đăng của Mathias về các trường của lớp.

prefers-reduced-motion

Một số người dùng đã báo cáo rằng họ bị say khi xem hiệu ứng cuộn thị sai, thu phóng và các hiệu ứng chuyển động khác. Để giải quyết vấn đề này, nhiều hệ điều hành cung cấp tuỳ chọn giảm chuyển động bất cứ khi nào có thể.

Chrome hiện cung cấp truy vấn nội dung nghe nhìn, prefers-reduced-motion – một phần của thông số kỹ thuật Truy vấn nội dung nghe nhìn cấp 5, cho phép bạn phát hiện thời điểm bật tuỳ chọn này.


@media (prefers-reduced-motion: reduce)

Hãy tưởng tượng tôi có một nút đăng ký thu hút sự chú ý bằng một chuyển động nhẹ. Truy vấn mới cho phép tôi tắt chuyển động chỉ cho nút.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Hãy xem bài viết của Tom Move Ya! Hoặc có thể không nên nếu người dùng muốn giảm hiệu ứng chuyển động! để biết thêm chi tiết.

Sự kiện transition CSS

Quy cách Chuyển đổi CSS yêu cầu sự kiện chuyển đổi được gửi khi một chuyển đổi được đưa vào hàng đợi, bắt đầu, kết thúc hoặc bị huỷ. Các sự kiện này đã được hỗ trợ trong các trình duyệt khác trong một thời gian…

Tuy nhiên, cho đến nay, các tính năng này chưa được hỗ trợ trong Chrome. Trong Chrome 74, giờ đây, bạn có thể nghe:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

Bằng cách theo dõi các sự kiện này, bạn có thể theo dõi hoặc thay đổi hành vi khi một chuyển đổi được chạy.

Nội dung cập nhật về API chính sách về tính năng

Chính sách về tính năng cho phép bạn bật, tắt và sửa đổi hành vi của API cũng như các tính năng web khác một cách có chọn lọc. Bạn có thể thực hiện việc này thông qua tiêu đề Chính sách tính năng hoặc thông qua thuộc tính cho phép trên một iframe.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 giới thiệu một bộ API mới để kiểm tra xem tính năng nào được bật:

  • Bạn có thể nhận được danh sách các tính năng được phép bằng document.featurePolicy.allowedFeatures().
  • Bạn có thể kiểm tra xem một tính năng cụ thể có được cho phép hay không bằng document.featurePolicy.allowsFeature(...).
  • Ngoài ra, bạn có thể lấy danh sách các miền được sử dụng trên trang hiện tại cho phép một tính năng được chỉ định bằng document.featurePolicy.getAllowlistForFeature().

Hãy xem bài đăng Giới thiệu về Chính sách về tính năng để biết thêm thông tin.

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

Tất nhiên, đây chỉ là một số thay đổi trong Chrome 74 dành cho nhà phát triển, còn có nhiều thay đổi khác. Cá nhân tôi khá hào hứng với KV Storage, một dịch vụ lưu trữ khoá/giá trị siêu nhanh, không đồng bộ, có sẵn dưới dạng bản dùng thử gốc.

Sự kiện Google I/O sắp diễn ra!

Và đừng quên, Google I/O chỉ còn vài tuần nữa là diễn ra (từ ngày 7 đến ngày 9 tháng 5) và chúng tôi sẽ có rất nhiều nội dung mới tuyệt vời dành cho bạn. Nếu bạn không thể tham dự, tất cả các phiên sẽ được phát trực tiếp và sẽ có trên kênh YouTube dành cho nhà phát triển Chrome sau đó.

Đăng ký

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