Hãy khám phá một số tính năng thú vị đã xuất hiện trên trình duyệt web ổn định và thử nghiệm trong tháng 5 năm 2024.
Bản phát hành trình duyệt ổn định
Vào tháng 5 năm 2024, Firefox 126, Safari 17.5 và Chrome 125 đã trở nên ổn định. Bài đăng này đề cập đến các tính năng mới được thêm vào nền tảng web.
Vị trí neo CSS
Chrome 125 bao gồm tính năng định vị neo CSS. Việc này cho phép bạn chia sẻ Internet một phần tử có vị trí tuyệt đối với một hoặc nhiều phần tử khác trên trang (quảng cáo cố định cuối màn hình) theo cách rõ ràng mà không cần sử dụng JavaScript. Tính năng định vị vị trí neo hoạt động hiệu quả khi các quảng cáo cố định có thể cuộn được. Một trường hợp sử dụng phổ biến là đặ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 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 bài viết Giới thiệu về API định vị neo CSS.
Các hàm giá trị theo bậc của CSS: round(), mod() và rem()
Chrome 125 cũng bao gồm các hàm giá trị theo bậc, tức là các hàm này hiện là hàm Cơ sở mới được cung cấp. Các hàm giá trị bậc thang (round(), mod() và rem()) đều chuyển đổi một giá trị nhất định theo một "giá trị bước" khác.
Tìm hiểu thêm trong bài viết Các hàm toán học giá trị theo bậc của CSS hiện đã có trong Baseline 2024.
Hàm light-dark()
Ngoài ra, tham gia Cơ sở mới có sẵn là hàm màu CSS light-dark(), có 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 thuộc tính trên được chọn tuỳ thuộc vào bảng phối màu đã sử dụng.
- Nếu bảng phối màu được sử dụng là
lighthoặc không xác định, thì giá trị đã tính của giá trị đầu tiên sẽ được trả về. - Nếu bảng phối màu được sử dụng là
darkthì giá trị đã 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 lược đồ màu của CSS với Light-dark() .
API Khoá chế độ thức trên màn hình
Phiên bản Firefox 126 ra mắt là API Khóa chế độ thức màn hình, một tính năng khác hiện nằm trong hệ thống Baseline mới có sẵn. API này cung cấp một cách ngăn thiết bị làm mờ 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 Không khoá màn hình bằng API Chế độ thức trên màn hình.
API Áp suất tính toán
API Áp suất tính toán cung cấp các trạng thái cấp cao đại diện cho tải CPU trên hệ thống. Việc 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 người dùng có thể tận dụng tất cả khả năng xử lý có sẵn, miễn là hệ thống không bị quá tải.
Tính năng này đã có trong Chrome 125. Intel đã dẫn đầu công tá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 cân bằng linh động giữa các tính năng và hiệu suất.
Đọc tài liệu về Compute Compute API.
Quy tắc @starting-style
Safari 17.5 bao gồm quy tắc @starting-style. Quy tắc CSS này cho phép bạn áp dụng 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 của mục nhập.
Quy tắc @starting-style là một trong những tính năng được đề cập trong Bốn tính năng CSS mới để giúp ảnh động nhập và thoát mượt mà.
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 127 và Chrome 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 toàn bộ thông tin chi tiết. Dưới đây chỉ là một vài điểm nổi bật.
Chrome 126 có các hiệu ứng chuyển đổi chế độ xem nhiều tài liệu cho các hoạt động điều hướng gốc. Trước đây, bạn phải thiết kế lại trang web thành một SPA để sử dụng View Transitions API (API Chuyển đổi khung hiển thị). Nay không còn như vậy nữa. Theo mặc định, tính năng chuyển đổi chế độ xem hiện được bật cho các hoạt động điều hướng cùng nguồn gốc. Bạn có thể tạo lượt 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 Đặt JavaScript bổ sung – intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() và isDisjointFrom().