Điểm mới trên nền tảng web vào tháng 7

Hãy khám phá một số tính năng thú vị trên trình duyệt web ổn định và phiên bản thử nghiệm trong tháng 7 năm 2023.

Vào tháng 7 năm 2023, Firefox 115Chrome 115 đã trở nên ổn định. Bài đăng này sẽ xem xét ý nghĩa của điều đó đối với nền tảng web.

Nhiều giá trị cho thuộc tính display CSS

Chrome 115 bao gồm nhiều giá trị cho thuộc tính CSS display. Tức là display: flex trở thành display: block flexdisplay: block trở thành display: block flow. Các giá trị đơn lẻ được duy trì dưới dạng từ khoá cũ. Các giá trị này hiện có thể sử dụng trong 3 công cụ chính.

Hỗ trợ trình duyệt

  • 115
  • 115
  • 70
  • 15

Ảnh động di chuyển theo thao tác cuộn

Ngoài ra trong Chrome 115 còn có các tiện ích ScrollTimelineViewTimeline cho thông số kỹ thuật của Ảnh động trên web. Chúng bật ảnh động điều khiển cuộn thông qua CSS và JavaScript.

Hỗ trợ trình duyệt

  • 115
  • 115
  • x
  • x

Nguồn

API Hộp cát về quyền riêng tư

API liên quan và đo lường của Hộp cát về quyền riêng tư đã được vận chuyển trong Chrome 115. Trong đó có các API Chủ đề, Đối tượng được bảo vệ, Báo cáo phân bổ, Tổng hợp riêng tư, Bộ nhớ dùng chung và API Khung bảo vệ.

Để hiểu thêm về các API này, hãy xem bản minh hoạ Hộp cát về quyền riêng tư.

Thuộc tính animation-composition

Firefox 115 hỗ trợ thuộc tính CSS animation-composition. Hỗ trợ animation-composition trong cả 3 công cụ chính. Tìm hiểu thêm trong bài viết Chỉ định cách kết hợp nhiều hiệu ứng ảnh động với cấu trúc ảnh động.

Hỗ trợ trình duyệt

  • 112
  • 112
  • 115
  • 16

Nguồn

Phương thức mảng

Ngoài ra, khả năng tương tác với Firefox 115 là một tập hợp các phương thức cho ArrayTypedArray. Array.toReversed(), Array.toSorted(), Array.toSpliced(), Array.with(), TypedArrays.toReversed(), TypedArrays.toSorted()TypedArrays.with() trả về một mảng mới chứa các phần tử đã được sao chép nông.

Hỗ trợ trình duyệt

  • 110
  • 110
  • 115
  • 16

Nguồn

Bản phát hành trình duyệt beta

Phiên bản trình duyệt beta cho phép bạn xem trước những nội dung sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm thích hợp để thử nghiệm các tính năng mới hoặc xoá bỏ những tính năng có thể ảnh hưởng đến trang web của bạn trước khi toàn thế giới ra mắt bản phát hành đó. Các phiên bản thử nghiệm mới là Firefox 116Chrome 116. Các phiên bản beta của Safari 17Safari 16.6 vẫn đang tiếp tục. Các bản phát hành này mang đến nhiều tính năng tuyệt vời cho nền tảng. Hãy xem ghi chú phát hành để biết toàn bộ thông tin chi tiết, đây chỉ là một vài điểm nổi bật.

Firefox 116 hỗ trợ Audio Output Devices API trên tất cả các nền tảng, ngoại trừ Android. API này cho phép các ứng dụng web chuyển hướng đầu ra âm thanh đến tai nghe Bluetooth, loa ngoài hoặc thiết bị khác được cho phép, thay vì phải sử dụng trình duyệt hoặc chế độ mặc định cơ bản của hệ điều hành.

Chrome 116 có CSS Motion Path cho phép tạo ảnh động bất kỳ đối tượng đồ họa nào theo đường dẫn do nhà phát triển chỉ định. Điều này cho phép một số khả năng biến đổi mới cực kỳ hiệu quả, chẳng hạn như việc định vị bằng toạ độ cực (bằng hàm ray()) thay vì các toạ độ hình chữ nhật tiêu chuẩn mà hàm translate() sử dụng hoặc tạo ảnh động cho một phần tử dọc theo một đường dẫn đã xác định. Điều này giúp bạn dễ dàng xác định các hiệu ứng chuyển đổi không gian 2d phức tạp và đẹp mắt. Bạn có thể chỉ định đường dẫn dưới dạng circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray()url().

Ngoài ra, trong Chrome 116 cũng có API hình trong hình tài liệu. Thao tác này sẽ bật một cửa sổ luôn ở trên cùng có thể được điền bằng các HTMLElement tuỳ ý. Đây là phần mở rộng dựa trên API HTMLVideoElement hiện có, chỉ cho phép đặt HTMLVideoElement vào cửa sổ Hình trong hình (PiP).

Một phần trong loạt video New to the web Series