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

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 5 năm 2023.

Vào tháng 5 năm 2023, Firefox 113, Chrome 113, Chrome 114Safari 16.5 đã trở thành phiên bản ổn định. Hãy cùng xem điều này có ý nghĩa gì đối với nền tảng web.

WebGPU

Chrome 113 bao gồm WebGPU, phiên bản kế nhiệm của API đồ hoạ WebGL và WebGL 2 cho web. Nền tảng này cung cấp các tính năng hiện đại như điện toán GPU, khả năng truy cập vào phần cứng GPU với mức hao tổn thấp hơn, khả năng kết xuất lên nhiều canvas từ một thiết bị đồ hoạ duy nhất, cũng như hiệu suất tốt hơn và dễ dự đoán hơn.

Hỗ trợ trình duyệt

  • Chrome: 113.
  • Edge: 113.
  • Bản dùng thử công nghệ Firefox: được hỗ trợ.
  • Bản xem trước công nghệ Safari: được hỗ trợ.

Nguồn

Nhóm bên thứ nhất

Nhóm bên thứ nhất (FPS) là một phần của Hộp cát về quyền riêng tư. Đây là một cách để các tổ chức khai báo mối quan hệ giữa các trang web để trình duyệt có thể quyết định thời điểm cho phép các trang web trong một tập hợp truy cập vào cookie của bên thứ ba bị giới hạn. FPS bắt đầu được triển khai theo giai đoạn trong Chrome 113.

Các tính năng đa phương tiện CSS và nhiều tính năng khác

Đối với CSS, Chrome 113 có các tính năng đa phương tiện overflow-inlineoverflow-block.

Hỗ trợ trình duyệt

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 66.
  • Safari: 17.

Nguồn

Và tính năng nội dung nghe nhìn update.

Hỗ trợ trình duyệt

  • Chrome: 113.
  • Cạnh: 113.
  • Firefox: 102.
  • Safari: 17.

Nguồn

Ngoài ra còn có hàm easing linear() mà bạn có thể tìm hiểu thêm trong bài viết Tạo các đường cong ảnh động phức tạp trong CSS bằng hàm easing linear().

Hỗ trợ trình duyệt

  • Chrome: 113.
  • Cạnh: 113.
  • Firefox: 112.
  • Safari: 17.2.

Các tính năng của CSS Color cấp 4

Firefox 113 bao gồm các ký hiệu hàm color(), lab(), lch(), oklab(), oklch()color-mix(), cùng với thuộc tính forced-color-adjust. Điều này có nghĩa là các không gian màu và hàm mới hiện được hỗ trợ trên cả ba công cụ chính. Bạn có thể tìm hiểu thêm về các không gian màu và hàm này trong Hướng dẫn về màu CSS có độ phân giải cao.

Hỗ trợ trình duyệt

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Nguồn

Có nhiều quyền kiểm soát hơn đối với lựa chọn :nth-child()

Firefox 113 cũng bổ sung khả năng truyền danh sách bộ chọn vào :nth-child()nth-last-child(). Tìm hiểu thêm về vấn đề này và xem các ví dụ trong bài đăng Kiểm soát thêm đối với các lựa chọn :nth-child() bằng cú pháp S.

Hỗ trợ trình duyệt

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

Compressions Streams API

Hiện được hỗ trợ trong cả 3 công cụ chính nhờ được đưa vào Firefox 113, Compressions Streams API cho phép nén và giải nén các luồng. Điều này có nghĩa là các ứng dụng JavaScript không cần phải gói thư viện nén nữa.

Hỗ trợ trình duyệt

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Nguồn

Lồng CSS

Safari 16.5 chủ yếu giải quyết các vấn đề, nhưng cũng hỗ trợ thêm tính năng Lồng ghép CSS, với bộ chọn lồng ghép mới >, dùng để lồng ghép các quy tắc kiểu liên quan theo cách quen thuộc với các nhà phát triển đã sử dụng trình xử lý trước:

.nesting {
 
color: hotpink;

 
> .is {
   
color: rebeccapurple;

   
> .awesome {
     
color: deeppink;
   
}
 
}
}

Hỗ trợ trình duyệt

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Nguồn

Cân bằng dòng tiêu đề bằng text-wrap: balance

Kể từ Chrome 114, bạn có thể sử dụng text-wrap: balance. Điều này giúp bạn cân bằng dòng tiêu đề, tránh tình trạng chỉ có một từ trên dòng cuối cùng, mang lại kết quả dễ đọc và dễ chịu hơn. Bạn có thể tìm hiểu thêm trong phần CSS text-wrap: balance.

Hỗ trợ trình duyệt

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Nguồn

CHIPS: Cookie có trạng thái được phân vùng độc lập

Trong quá trình ngừng sử dụng cookie của bên thứ ba, CHIPS cho phép chọn sử dụng cookie của bên thứ ba được phân vùng theo trang web cấp cao nhất bằng cách sử dụng thuộc tính cookie mới Partitioned. CHIPS có trong Chrome 114.

Popover API

Ngoài ra, trong Chrome 114 còn có Popover API giúp bạn dễ dàng tạo các thành phần giao diện người dùng (UI) tạm thời hiển thị trên tất cả giao diện người dùng ứng dụng web khác.

Các thành phần này bao gồm các phần tử tương tác với người dùng như trình đơn thao tác, đề xuất phần tử biểu mẫu, bộ chọn nội dung và giao diện người dùng hướng dẫn.

Thuộc tính cửa sổ bật lên mới cho phép mọi phần tử tự động hiển thị trong lớp trên cùng. Điều này có nghĩa là nhà phát triển không còn phải lo lắng về việc định vị, xếp chồng các phần tử, tiêu điểm hoặc tương tác bằng bàn phím nữa.

Tìm hiểu thêm trong bài viết Giới thiệu API Cửa sổ bật lên.

Hỗ trợ trình duyệt

  • Chrome: 114.
  • Cạnh: 114.
  • Firefox: 120.
  • Safari: 17.

Nguồn

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 chính thức 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 các nội dung bị xoá có thể ảnh hưởng đến trang web của bạn trước khi chúng tôi phát hành bản cập nhật đó trên toàn cầu. Các phiên bản beta mới là Firefox 114, Chrome 115Safari 16.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. Dưới đây là một số điểm nổi bật.

Chrome 115 bao gồm nhiều giá trị cho thuộc tính display CSS. Điều này có nghĩa là display: flex trở thành display: block flexdisplay: block trở thành display: block flow. Các giá trị đơn được duy trì dưới dạng từ khoá cũ và khi chuyển sang Chrome phiên bản ổn định, các giá trị này sẽ có sẵn trên tất cả các công cụ.

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. Các định dạng này cho phép ảnh động điều khiển cuộn thông qua CSS và JavaScript.

Firefox 114 bao gồm WebTransport API, một bản cập nhật hiện đại cho WebSockets cung cấp khả năng hỗ trợ nhiều luồng, luồng một chiều và phân phối không theo thứ tự.

Một phần của chương trình Mới làm quen với web