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

Khám phá một số tính năng thú vị đã có phiên bản ổn định và phiên bản beta trình duyệt web trong tháng 12 năm 2023.

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

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

Chrome 120 và Safari 17.2 bao gồm phân tích cú pháp đơn giản khi dùng tính năng lồng ghép CSS. Vì Firefox phiên bản 117 đã hỗ trợ, nên tất cả công cụ chính đều hỗ trợ thay đổi cú pháp này.

Đàn phong cầm độc quyền với phần tử <details>

Chrome 120 và Safari 17.2 có hỗ trợ thuộc tính name cho thuộc tính Phần tử <details>. Điều này có nghĩa là bạn có thể tạo các thành phần đà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 về đàn phong cầm độc quyền.

Hỗ trợ trình duyệt

  • 120
  • 120
  • x
  • 17,2

Bộ chọn :has()

Firefox 121 có 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ô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 đánh dấu tuỳ chỉnh CSS

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

Hỗ trợ trình duyệt

  • 105
  • 105
  • 17,2

Nguồn

API CloseWatcher

Chrome 120 tích hợp API CloseWatcher, một API mới để theo dõi 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.

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 trên Android.

Hỗ trợ trình duyệt

  • 126
  • 126
  • 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 đề, tạo ra văn bản thú vị và dễ đọc hơn. Giá trị stable ngăn nội dung có thể chỉnh sửa tải chậm 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
  • 17,5

Nguồn

text-wrap: stable

Hỗ trợ trình duyệt

  • x
  • x
  • 121
  • 17,5

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 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 easing linear(). Bạn có thể dùng hàm này để tạo hiệu ứng độ nảy và hiệu ứng lò xo.

Hỗ trợ trình duyệt

  • 113
  • 113
  • 112
  • 17,2

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

Phiên bản trình duyệt beta cung cấp cho bạn bản xem trước về những tính năng sẽ có trong phiên bản ổn định 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ó thể ảnh hưởng đến trang web của bạn trước khi toàn cầu nhận được bản phát hành đó. Mới phiên bản thử nghiệm Firefox 122, Chrome 121Safari 17.3. 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. Xem bản phát hành để biết tất cả thông tin chi tiết. Đâ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 người dùng chọn phần tử. nhưng có thể được kích hoạt từ việc nhấn nút hoặc tương tác khác của người dùng.

Chrome 121 bao gồm các thuộc tính định kiểu thanh cuộn scrollbar-colorscrollbar-width, cùng với việc cải thiện tính năng tạo mặt nạ CSS cho SVG, và đánh dấu các phần tử giả cho những văn bản bị sai chính tả hoặc không đúng ngữ pháp.