Đ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. API này cung cấp các tính năng hiện đại như điện toán GPU, giảm mức hao tổn khi truy cập vào phần cứng GPU, khả năng kết xuất sang nhiều canvas từ một thiết bị đồ hoạ và hiệu suất tốt hơn, 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à cách để các tổ chức khai báo mối quan hệ giữa các trang web, nhờ đó, trình duyệt có thể quyết định thời điểm cho phép cookie của bên thứ ba truy cập một cách hạn chế vào các trang web trong một nhóm. 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 bao gồm 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.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Nguồn

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

Hỗ trợ trình duyệt

  • Chrome: 113.
  • Edge: 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 ví dụ trong bài đăng Có nhiều quyền kiểm soát hơn đối với lựa chọn :nth-child() bằng cú pháp of 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 phần Giới thiệu về API cửa sổ bật lên.

Hỗ trợ trình duyệt

  • Chrome: 114.
  • Edge: 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, Chrome 115 còn có các tiện ích ScrollTimelineViewTimeline cho quy cách Ảnh động trên web. Các lớp này cho phép hiệu ứng chuyển động do 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 hỗ trợ cho 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