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

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

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

Vào tháng 12 năm 2023, Firefox 121, Chrome 120Safari 17.2 đã trở nên ổn định. Bài đăng này sẽ xem xét ý nghĩa của điều đó đối với nền tảng web.

Phân tích cú pháp thoải mái cho CSS Nesting

Chrome 120 và Safari 17.2 có phân tích cú pháp thư giãn cho CSS Nesting. Vì tính năng này đã được hỗ trợ trong Firefox từ phiên bản 117, nên tất cả công cụ chính đều hỗ trợ việc thay đổi cú pháp này.

Các phong cầm độc quyền có phần tử <details>

Chrome 120 và Safari 17.2 hỗ trợ thuộc tính name cho phần tử <details>. Điều này có nghĩa là bạn có thể tạo các thành phần phong cầm độc quyền bằng cách nhóm một số phần tử <details>.

Tìm hiểu thêm trong bộ đàn phong cầm độc quyền.

Hỗ trợ trình duyệt

  • 120
  • 120
  • x
  • 17,2

Bộ chọn :has()

Firefox 121 bao gồm bộ chọn CSS :has(). Bản phát hành này giúp :has() có khả năng tương tác trên tất cả các công cụ chính.

Tìm hiểu thêm trong :has(): bộ chọn gia đình.

Hỗ trợ trình duyệt

  • 105
  • 105
  • 121
  • 15,4

Nguồn

API Làm nổi bật tuỳ chỉnh CSS

Safari 17.2 tích hợp API Làm nổi bật tuỳ chỉnh của CSS cho phép bạn tạo và tạo kiểu cho các dải văn bản, mở rộng các lớp giả lập về vùng nổi bật tiêu chuẩn như ::selection.

Hỗ trợ trình duyệt

  • 105
  • 105
  • 17,2

Nguồn

API CloseWatcher

Chrome 120 có API CloseWatcher, một API mới để lắng nghe và phản hồi các yêu cầu đóng. Các yêu cầu này được kích hoạt bằng phím ESC trên máy tính và cử chỉ hoặc nút quay lại trên Android, và có thể khó triển khai hiệu quả.

Ngoài API, Chrome 120 còn nâng cấp <dialog> và thuộc tính popover để phản hồi nút quay lại của Android.

Hỗ trợ trình duyệt

  • 120
  • 120
  • x
  • x

CSS text-wrap: balancestable

Firefox 121 bao gồm các giá trị balancestable cho text-wrap. Giá trị balance hữu ích cho các khối nội dung ngắn như tiêu đề, giúp văn bản trở nên dễ đọc và dễ đọc hơn. Giá trị stable ngăn không cho nội dung chỉnh sửa được tốc độ lại trong khi chỉnh sửa.

Tìm hiểu thêm về text-wrap: balance.

text-wrap: balance

Hỗ trợ trình duyệt

  • 114
  • 114
  • 121

Nguồn

text-wrap: stable

Hỗ trợ trình duyệt

  • x
  • x
  • 121

Nguồn

Tải từng phần các phần tử <iframe>

Firefox 121 hỗ trợ thuộc tính loading trên các phần tử <iframe>. Điều này có nghĩa là tính năng tải từng phần của iframe hiện đã được hỗ trợ trong tất cả các công cụ chính.

Hỗ trợ trình duyệt

  • 77
  • 79
  • 121
  • 16,4

Hỗ trợ hàm gia tốc linear()

Safari 17.2 cũng hỗ trợ hàm gia tốc linear(), có thể dùng để tạo hiệu ứng thoát và lò xo.

Hỗ trợ trình duyệt

  • 113
  • 113
  • 112
  • 17,2

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 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 tuyệt vời để thử nghiệm hoặc xoá bỏ những tính năng mới có thể ảnh hưởng đến trang web của bạn trước khi cả thế giới nhận được bản phát hành đó. Các phiên bản thử nghiệm mới là Firefox 122, Chrome 121Safari 17.3. 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. Dưới đây chỉ là một vài điểm nổi bật.

Firefox 122 và Chrome 121 bao gồm phương thức showPicker() cho HTMLSelectElement. Thao tác này cho thấy cùng một bộ chọn sẽ xuất hiện khi phần tử được chọn, nhưng có thể được kích hoạt qua thao tác nhấn nút hoặc hoạt động tương tác khác của người dùng.

Chrome 121 tích hợp các thuộc tính định kiểu thanh cuộn scrollbar-colorscrollbar-width, cùng với tính năng che phủ CSS đã cải tiến cho SVG và làm nổi bật các phần tử giả cho văn bản đã sai chính tả hoặc bị sai ngữ pháp.