Đ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 2024.

Vào tháng 5 năm 2024, Firefox 126, Safari 17.5Chrome 125 đã trở nên ổn định. Bài đăng này xem xét các tính năng mới được thêm vào nền tảng web.

Định vị neo CSS

Chrome 125 bao gồm tính năng định vị neo CSS. Điều này cho phép bạn liên kết một phần tử được định vị tuyệt đối với một hoặc nhiều phần tử khác trên trang (đinh neo) theo cách khai báo mà không cần sử dụng JavaScript. Vị trí neo hoạt động hiệu quả khi các neo có thể cuộn được. Một trường hợp sử dụng phổ biến là định vị một cửa sổ bật lên, chẳng hạn như chú giải công cụ bên cạnh phần tử đã gọi cửa sổ bật lên đó, hoặc một trình đơn chọn và danh sách tuỳ chọn cửa sổ bật lên.

Tìm hiểu thêm trong phần Giới thiệu API định vị neo CSS.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Hàm giá trị tăng dần CSS – round(), mod()rem()

Chrome 125 cũng bao gồm các hàm giá trị tăng dần, nghĩa là các hàm này hiện đã có sẵn trong Đường cơ sở mới. Các hàm giá trị tăng dần, round(), mod()rem(), đều biến đổi một giá trị nhất định theo "giá trị bước" khác.

Khám phá thêm trong bài viết Các hàm toán học giá trị tăng dần CSS hiện đã có trong Đường cơ sở 2024.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

Hàm light-dark()

Cũng tham gia Baseline Newly Available là hàm màu CSS light-dark() trong Safari 17.5.

light-dark() là một hàm chấp nhận hai đối số, cả hai đều phải là <color>. Một trong hai sẽ được chọn tuỳ thuộc vào bảng phối màu được sử dụng.

  • Nếu bảng phối màu được sử dụng là light hoặc không xác định, thì giá trị được tính toán của giá trị đầu tiên sẽ được trả về.
  • Nếu bảng phối màu được sử dụng là dark, thì giá trị được tính toán của màu thứ hai sẽ được trả về.

Đọc thêm trong phần Màu phụ thuộc vào bảng phối màu CSS bằng light-dark() .

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

API Khoá chế độ thức trên màn hình

Trong Firefox 126, bạn sẽ thấy Screen Wake Lock API, một tính năng khác hiện thuộc Baseline Newly Available. API này cung cấp một cách để ngăn thiết bị giảm độ sáng và khoá màn hình.

Tìm hiểu cách sử dụng tính năng này trong bài viết Giữ trạng thái thức bằng API Khoá chế độ thức trên màn hình.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Compute Pressure API

Compute Pressure API cung cấp các trạng thái cấp cao thể hiện mức tải CPU trên hệ thống. API này cho phép quá trình triển khai sử dụng các chỉ số phần cứng cơ bản phù hợp để đảm bảo rằng người dùng có thể tận dụng tất cả sức mạnh xử lý có sẵn, miễn là hệ thống không chịu áp lực không thể kiểm soát.

Tính năng này có trong Chrome 125. Intel đã dẫn dắt công việc thiết kế và triển khai API này, cho phép các ứng dụng hội nghị truyền hình tự động cân bằng các tính năng và hiệu suất.

Đọc tài liệu về API Áp lực tính toán.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Quy tắc @starting-style

Safari 17.5 bao gồm quy tắc @starting-style. Quy tắc tại CSS này cho phép bạn áp dụng một kiểu mà trình duyệt có thể tra cứu trước khi phần tử mở trên trang, nếu cần cho ảnh động nhập.

Quy tắc @starting-style là một trong những tính năng được đề cập trong bài viết Bốn tính năng CSS mới để tạo ảnh động vào và thoát mượt mà.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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 ổ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 việc xoá những tính năng có thể ảnh hưởng đến trang web của bạn trước khi chúng được phát hành trên toàn thế giới. Các bản thử nghiệm beta mới là Firefox 127Chrome 126. 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. Sau đây là một số điểm nổi bật.

Chrome 126 bao gồm các hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu cho các thao tác điều hướng cùng nguồn gốc. Trước đây, bạn phải thiết kế lại trang web của mình thành một SPA để sử dụng API Chuyển đổi thành phần hiển thị. Nay không còn như vậy nữa. Theo mặc định, các hiệu ứng chuyển đổi khung hiển thị hiện được bật cho các thao tác điều hướng cùng nguồn gốc. Bạn có thể tạo hiệu ứng chuyển đổi chế độ xem giữa hai tài liệu khác nhau có cùng nguồn gốc.

Firefox 127 bao gồm các phương thức Set JavaScript bổ sung – intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf()isDisjointFrom().