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

Khám phá một số tính năng thú vị đã ra mắt trong các trình duyệt web phiên bản ổn định và thử nghiệm vào tháng 6 năm 2024.

Rachel Andrew

Bản phát hành trình duyệt ổn định

Vào tháng 6 năm 2024, Firefox 127 và Chrome 126 đã trở thành phiên bản ổn định. Bài đăng này xem xét các tính năng mới được thêm vào nền tảng web.

Lưu ý: Dữ liệu về khả năng tương thích với trình duyệt được lấy từ MDN có trong các bài đăng này và có thể chưa được cập nhật cho các bản phát hành trình duyệt rất mới. Bài đăng sẽ hiển thị thông tin chính xác ngay khi thông tin đó xuất hiện trong bản phát hành browser-compat-data.

Phương thức Set của JavaScript

Tập hợp là một cấu trúc dữ liệu thiết yếu trong mọi ngôn ngữ lập trình. Giờ đây, bạn có thể sử dụng các phương thức tích hợp sẵn của JavaScript để thực hiện các phép toán tập hợp. Các phương thức đặt sau đây hiện có trong Firefox 127 và trở thành một phần của Baseline Newly Available:

• intersection()
• union()
• difference()
• symmetricDifference()
• isSubsetOf()
• isSupersetOf()
• isDisjointFrom()

Hỗ trợ trình duyệt

• 122
• 122
• 127
• 17

Nguồn

Để tìm hiểu thêm, hãy đọc bài viết Các phương thức Set JavaScript hiện là một phần của Đường cơ sở.

API Bảng nhớ tạm không đồng bộ

Clipboard API hiện được hỗ trợ đầy đủ từ Firefox 127. Firefox hiện hỗ trợ giao diện ClipboardItem, cùng với các phương thức read() và write() của giao diện Bảng nhớ tạm. Tìm hiểu thêm về Clipboard API trong phần Bỏ chặn quyền truy cập vào bảng nhớ tạm.

Hỗ trợ trình duyệt

• 76
• 79
• 127
• 13.1

Nguồn

Nội suy màu trong hiệu ứng chuyển màu CSS

Các hiệu ứng chuyển màu CSS được chỉ định để chấp nhận <color-interpolation-method> và hiệu ứng này hiện được hỗ trợ trong Firefox, giúp hiệu ứng này tương tác được trên tất cả các công cụ chính. Ví dụ: giờ đây, bạn có thể chỉ định linear-gradient() bằng cách sử dụng hệ thống màu hsl và nội suy lâu hơn.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Hỗ trợ trình duyệt

• 111
• 111
• 127
• 16.2

Chuyển đổi chế độ xem giữa các tài liệu

Trước đây, bạn phải thiết kế lại trang web của mình thành một SPA để sử dụng API Chuyển đổi thành phần hiển thị. Nay không còn như vậy nữa. Kể từ Chrome 126, các hiệu ứng chuyển đổi khung hiển thị hiện được bật theo mặc định cho các thao tác điều hướng cùng nguồn gốc. Bạn có thể tạo hiệu ứng chuyển đổi chế độ xem giữa hai tài liệu khác nhau có cùng nguồn gốc.

Để bật tính năng chuyển đổi chế độ xem trên nhiều tài liệu, cả hai bên đều phải chọn sử dụng. Để làm việc này, hãy sử dụng quy tắc tại @view-transition và đặt chỉ số mô tả điều hướng thành auto.

@view-transition {
  navigation: auto;
}

Hỗ trợ trình duyệt

• 126
• 126
• x
• 

Tìm hiểu thêm trong tài liệu về hiệu ứng chuyển đổi chế độ xem giữa các tài liệu.

Tiện ích trigger-rumble của API tay điều khiển trò chơi

Chrome 126 mở rộng giao diện GamepadHapticActuator để hiển thị khả năng trigger-rumble trên web cho các tay điều khiển tương thích. Tiện ích này sẽ cho phép các ứng dụng web tận dụng Gamepad API cũng như rung các nút kích hoạt của các thiết bị tay điều khiển có trang bị chức năng này.

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

Các phiên bản trình duyệt beta cho bạn xem trước những tính năng 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 việc xoá những tính năng có thể ảnh hưởng đến trang web của bạn trước khi chúng được phát hành rộng rãi. Các bản thử nghiệm beta mới là Firefox 128, Chrome 127, Safari 18 và Safari 17.6. 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 tất cả thông tin chi tiết. Sau đây là một số điểm nổi bật.

Safari 17.6 là bản phát hành các bản sửa lỗi cho các tính năng hiện có. Safari 18 có một số tính năng mới thú vị, bao gồm các truy vấn vùng chứa kiểu, API chuyển đổi chế độ xem cho ứng dụng một trang và hỗ trợ từ khoá safe trong các thuộc tính flexbox.

Chrome 127 bao gồm thuộc tính CSS font-size-adjust, khả năng chỉ định văn bản thay thế trên nội dung được tạo dưới dạng một số lượng phần tử tuỳ ý và khả năng thêm thông tin về từng chương trong MediaMetaData.

Firefox 128 bao gồm các thuộc tính và giá trị CSS, đưa tính năng này vào dòng Mới có sẵn. Sử dụng @property để xác định type và đặt giá trị dự phòng cho các thuộc tính tuỳ chỉnh CSS.