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à 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 74!

Nhật ký thay đổi

Phần này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập 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 đơn giản hoá cú pháp lớp bằng cách tránh nhu cầu sử dụng các hàm 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 nghiên cứu. Tôi vui mừng thông báo rằng các trường lớp riêng tư đã xuất hiện trong Chrome 74. Cú pháp các trường riêng tư mới cũng 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 # (ký hiệu bảng Anh). 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 lớp này bên trong lớp nhưng không thể truy cập bên ngoài nội dung 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 lớp.

prefers-reduced-motion

Một số người dùng cho biết bạn bị say chuyển động khi xem thao tác 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 trong thông số kỹ thuật về 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)

Giả sử tôi có một nút đăng ký thu hút sự chú ý 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ỉ đối với 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 sử dụng nếu người dùng thích-reduced-motion! để biết thêm thông tin chi tiết.

Sự kiện transition của CSS

Thông số kỹ thuật về quá trình chuyển đổi CSS yêu cầu gửi các sự kiện chuyển đổi khi một lượt chuyển đổi được xếp vào hàng đợi, bắt đầu, kết thúc hoặc bị huỷ. Những sự kiện này đã được hỗ trợ trên các trình duyệt khác trong một thời gian...

Tuy nhiên, cho đến nay, các chức năng này vẫn chưa được hỗ trợ trong Chrome. Giờ đây, trong Chrome 74, bạn có thể nghe:

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

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

Nội dung cập nhật đối với 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 đề Feature-Policy hoặc thông qua thuộc tính allow trên 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ể xem danh sách các tính năng được phép sử dụ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 thông qua document.featurePolicy.allowsFeature(...).
  • Bạn có thể nhận được danh sách các miền được dùng trên trang hiện tại cho phép một tính năng đã chỉ định thông qua document.featurePolicy.getAllowlistForFeature().

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

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

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

Google I/O sắp diễn ra!

Và đừng quên rằng sự kiện Google I/O chỉ còn vài tuần nữa (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ự kiện sẽ được phát trực tiếp và sau đó sẽ có trên kênh YouTube dành cho nhà phát triển Chrome của chúng tôi.

Đăng ký

Nếu bạn muốn nắm bắt thông tin mới nhất về 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 75 được phát hành, tôi sẽ có mặt ngay để cho bạn biết -- Chrome có tính năng gì mới!