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

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

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

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

Thuộc tính HTML chung

Firefox 111 thêm tính năng hỗ trợ cho một số thuộc tính HTML chung hữu ích. Thuộc tính autocapitalize kiểm soát việc văn bản có thể tự động viết hoa khi người dùng nhập trên bàn phím ảo hay không.

Hỗ trợ trình duyệt

  • 43
  • 79
  • 111
  • x

Nguồn

Thuộc tính translate cho biết có cần dịch một phần tử khi một trang được bản địa hoá hay không.

Hỗ trợ trình duyệt

  • 19
  • 79
  • 111
  • 6

Nguồn

Hệ thống tệp riêng tư gốc (OPFS)

Firefox bổ sung tính năng hỗ trợ cho Hệ thống tệp riêng tư gốc (OPFS) khi sử dụng API Truy cập hệ thống tệp. Tìm hiểu thêm về OPFS.

View Transitions API (API Chuyển đổi khung hiển thị)

Chrome 111 bổ sung API Chuyển đổi khung hiển thị, giúp quá trình tạo các hiệu ứng chuyển đổi tinh tế trong Ứng dụng một trang (SPA) trở nên đơn giản hơn bằng cách chụp nhanh khung hiển thị và cho phép DOM thay đổi mà không có sự chồng chéo nào giữa các trạng thái.

Tìm hiểu thêm trong bài đăng sau khi chuyển đổi chế độ xem sang SPA trong Chrome 111.

Hỗ trợ trình duyệt

  • 111
  • 111
  • x
  • x

Nguồn

Hàm và hệ màu CSS mới

Chrome 111 cũng bao gồm một loạt cách thức hoàn toàn mới để sử dụng màu trên web. Chrome hiện hỗ trợ các không gian màu truy cập vào các màu bên ngoài gam màu RGB, cùng với các hàm color()color-mix(). Tìm hiểu thêm trong Hướng dẫn về màu CSS độ phân giải caobài đăng trên blog về color-mix() của chúng tôi.

Hỗ trợ trình duyệt

  • 111
  • 111
  • 113
  • 16,2

Nguồn

Bản phát hành Chrome cũng bao gồm Công cụ cho nhà phát triển mới để giúp bạn làm việc với chức năng màu mới này.

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

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

Hỗ trợ trình duyệt

  • 111
  • 111
  • 113
  • 9

Hỗ trợ trang trình bày trước và trang trình bày tiếp theo trong Media Session API

Cuối cùng, trong danh sách các tính năng bổ sung của Chrome 111 này là Thao tác trình bày trang trình bày cho API phiên phát nội dung đa phương tiện – "previousslide""nextslide".

Hỗ trợ trình duyệt

  • 111
  • 111
  • x
  • x

Hỗ trợ lớp giả trong Safari

Safari 16.4 là một bản phát hành tuyệt vời dành cho nền tảng web. Bài viết này sẽ không đề cập đến tất cả tính năng bổ sung, vì vậy, hãy xem danh sách đầy đủ các tính năng trong ghi chú phát hành của Safari 16.4.

Bản phát hành này có một loạt lớp giả lập CSS bổ sung có hỗ trợ: :user-invalid, :user-valid, :dir(), :modal:fullscreen.

Cú pháp phạm vi mới cho truy vấn phương tiện

Bản phát hành Safari này giúp cú pháp phạm vi tinh tế và hữu ích hơn nhiều cho các truy vấn phương tiện có thể tương tác trên cả 3 công cụ. Xem ví dụ về cú pháp này trong bài đăng này, được xuất bản khi cú pháp được chuyển trong Chrome.

Hỗ trợ trình duyệt

  • 104
  • 104
  • 102
  • 16,4

Nguồn

Thuộc tính và giá trị CSS

Safari 16.4 hỗ trợ thêm cho @property, cho phép đăng ký thuộc tính tuỳ chỉnh CSS ngay trong biểu định kiểu. Tìm hiểu thêm về điều này trong @property: cung cấp siêu năng lực cho biến CSS.

Hỗ trợ trình duyệt

  • 85
  • 85
  • 16,4

Nguồn

Hỗ trợ CSS API

Các bổ sung tuyệt vời cho CSS tiếp tục được bổ sung, với sự hỗ trợ cho CSS đã nhập OM. API này hiển thị các giá trị CSS dưới dạng đối tượng JavaScript đã nhập thay vì chuỗi. Phương pháp này giúp làm việc với CSS từ JavaScript dễ dàng hơn và có hiệu suất cao hơn so với các phương pháp hiện tại.

Hỗ trợ trình duyệt

  • 66
  • 79
  • x
  • 16,4

Nguồn

Ngoài ra, chúng tôi cũng hỗ trợ các biểu định kiểu có thể tạo bằng CSSStyleSheet(). Thao tác này cho phép chia sẻ biểu định kiểu giữa một tài liệu và cây con DOM bóng của tài liệu đó. Với phiên bản Safari này, biểu định kiểu có thể tạo được hỗ trợ trong cả 3 công cụ.

Hỗ trợ trình duyệt

  • 73
  • 79
  • 101
  • 16,4

Nguồn

Web Push và API Huy hiệu

Safari hiện hỗ trợ tính năng Gửi dữ liệu web, cùng với Huy hiệu API, đây là một tin vui dành cho nhà phát triển ứng dụng. Cụ thể, trong phiên bản này, thông báo đẩy được hỗ trợ trong tất cả các công cụ chính.

Hỗ trợ trình duyệt

  • 42
  • 17
  • 44
  • 16

Nguồn

Nhập bản đồ

Một tính năng bổ sung khác mang lại tính năng cho trạng thái có thể tương tác là bổ sung tính năng Nhập bản đồ JavaScript, giúp việc nhập các mô-đun ES dễ dàng hơn nhiều.

Hỗ trợ trình duyệt

  • 89
  • 89
  • 108
  • 16,4

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 beta mới là Firefox 112, Safari 16.5Chrome 112. 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 112 bổ sung tính năng hỗ trợ cho thuộc tính inert, nhờ đó, thuộc tính hữu ích này có thể sử dụng được trên mọi công cụ. Bạn có thể tìm hiểu thêm về inert trong phần Giới thiệu về inert. Firefox cũng sẽ cho phép hỗ trợ hàm gia tốc linear().

Chrome 112 và Safari 16.5 đều hỗ trợ thêm CSS Nesting, một tính năng được nhiều nhà phát triển kỳ vọng.

Chrome 112 cũng hỗ trợ animation-composition. Tìm hiểu cách hoạt động của thuộc tính này trong phần Chỉ định cách kết hợp nhiều hiệu ứng ảnh động với thành phần ảnh động.

Nếu bạn sử dụng chế độ Không có giao diện người dùng của Chrome, chẳng hạn như với Puppeteer, thì 112 sẽ cung cấp chế độ Không có giao diện người dùng hoàn toàn mới. Hãy tìm hiểu về tính năng này trong bản nâng cấp của chế độ Không có giao diện người dùng của Chrome.

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