Đ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ị đã có mặt trên các trình duyệt web ổn định và thử nghiệm trong tháng 6 năm 2024.

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

Vào tháng 6 năm 2024, Firefox 127Chrome 126 đã bắt đầu hoạt động ổ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.

Phương pháp Đặt 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 thao tác trong nhóm. Các phương thức thiết lập sau đây hiện đã có trên Firefox 127 và đã trở thành một phần của Baseline mới có sẵn:

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 Tập hợp JavaScript hiện đã có trong Nhóm cơ sở.

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

API Bảng nhớ tạm hiện đã được hỗ trợ đầy đủ trên Firefox 127. Firefox hiện hỗ trợ giao diện ClipboardItem, cùng với các phương thức read()write() của giao diện Bảng nhớ tạm. Tìm hiểu thêm về API Bảng nhớ tạm 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 dải chuyển màu CSS

Độ dốc của CSS được chỉ định để chấp nhận <color-interpolation-method> và tính năng này hiện được hỗ trợ trong Firefox, giúp tính năng này có khả năng tương tác trên tất cả các công cụ chính. Chẳng hạn, 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 dài 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 trên nhiều tài liệu

Trước đây, bạn phải thiết kế lại trang web theo SPA để sử dụng View Transitions API. Nay không còn như vậy nữa. 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 trên 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 chuyển đổi chế độ xem trên nhiều tài liệu, cả hai đầu cần phải chọn tham gia. Để thực hiện việc này, hãy sử dụng quy tắc @ @view-transition và thiết lập chỉ số mô tả điều hướng thành auto.

@view-transition {
  navigation: auto;
}

Hỗ trợ trình duyệt

  • 126
  • 126
  • x
  • x

Nguồn

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

Tiện ích trigger-rumble Gamepad API

Chrome 126 mở rộng giao diện GamepadHapticActuator để hiển thị tính năng trigger-rumble trên web cho các tay điều khiển trò chơi 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 để rung các trình kích hoạt của thiết bị tay điều khiển trò chơi được trang bị chức năng này.

Bản phát hành trình duyệt thử nghiệm

Phiên bản trình duyệt beta cho phép 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 để kiểm thử các tính năng mới hoặc xoá bớt. Những tính năng này có thể ảnh hưởng đến trang web của bạn trước khi chúng tôi ra mắt bản phát hành đó. Các phiên bản beta mới là Firefox 128, Chrome 127, Safari 18Safari 17.6. Những 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.

Safari 17.6 là bản phát hành 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 truy vấn vùng chứa kiểu, API chuyển đổi khung hiển thị cho các ứng dụng trang đơn và hỗ trợ từ khoá safe trong các thuộc tính hộp linh hoạt.

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

Firefox 128 bao gồm các Thuộc tính và Giá trị CSS, do đó, Đường cơ sở của tính năng này mới ra mắt. 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.