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

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 7 năm 2024.

Rachel Andrew

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

Vào tháng 7 năm 2024, Firefox 128, Safari 17.6 và Chrome 127 đã 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.

Cú pháp màu tương đối CSS

Firefox 128 bao gồm cú pháp màu tương đối CSS, điều này cho phép bạn tạo một màu tương đối với màu gốc. CSS sau đây làm giảm độ bão hoà của màu indigo một nửa bằng cách sử dụng hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Bạn có thể tìm thấy nhiều ví dụ khác trong bài đăng trên blog Cú pháp màu tương đối CSS. Cú pháp màu tương đối là một trong những lĩnh vực trọng tâm của Interop 2024, vì vậy, bản cập nhật này giúp cải thiện điểm số cho Firefox ổn định.

Văn bản thay thế cho thuộc tính content

Firefox 128 hỗ trợ văn bản thay thế cho thuộc tính content CSS, khi thuộc tính này chứa hình ảnh. Văn bản thay thế sẽ hiển thị trong cây hỗ trợ tiếp cận. Điều này có nghĩa là tất cả trình duyệt hiện đều hỗ trợ văn bản thay thế cho content.

Bản cập nhật Chrome 127 đảm bảo rằng Chrome chấp nhận số lượng phần tử tuỳ ý thay vì chỉ một chuỗi, chẳng hạn như cho phép sử dụng hàm attr().

Thuộc tính font-size-adjust

Chrome 127 bao gồm font-size-adjust, cũng là một lĩnh vực trọng tâm của Interop 2024. Thuộc tính này hữu ích trong các trường hợp có thể xảy ra phông chữ dự phòng, vì thuộc tính này giúp bạn so khớp kích thước của phông chữ dự phòng với phông chữ lựa chọn đầu tiên.

Với bản phát hành Chrome này, thuộc tính font-size-adjust sẽ trở thành một phần của Baseline Newly Available (Đường cơ sở mới có sẵn).

Hỗ trợ API Chuyển đổi khung hiển thị trong iframe

Từ Chrome 127, bạn sẽ có thể chuyển đổi đồng thời các chế độ xem cùng tài liệu trong khung chính và iframe cùng nguồn gốc.

Trước đây, việc chạy quá trình chuyển đổi chế độ xem bằng document.startViewTransition trong một iframe cùng nguồn gốc sẽ không hoạt động nếu khung chính đang chạy quá trình chuyển đổi cùng lúc. Quá trình chuyển đổi của iframe sẽ tự động bị bỏ qua. Lúc này, cả hai quá trình chuyển đổi sẽ được thực thi.

Vùng chứa cuộn có thể lấy tiêu điểm bằng bàn phím

Theo mặc định, trình cuộn trên Chrome 127 có thể làm tâm điểm bằng cách nhấp vào cũng như có thể lập trình để làm tâm điểm. Theo mặc định, trình cuộn không có phần tử con có thể làm tâm điểm sẽ có thể làm tâm điểm bằng bàn phím.

Tìm hiểu thêm về thay đổi này trong bài đăng Bộ cuộn có thể lấy tiêu điểm bằng bàn phím.

Quy tắc @property

Firefox 128 hỗ trợ quy tắc @property và các API JavaScript liên quan. Điều này có nghĩa là bạn có thể tạo các thuộc tính tuỳ chỉnh CSS để xác định cú pháp, tính kế thừa và giá trị ban đầu.

Trong ví dụ sau, thuộc tính tuỳ chỉnh được xác định để chỉ chấp nhận giá trị <color>, không kế thừa và có giá trị ban đầu là hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Quy tắc @property hiện là một phần của Baseline mới ra mắt. Vui lòng đọc thêm trong @property: Các biến CSS mới hiện đã hỗ trợ trình duyệt toàn cầu.

ArrayBuffer có thể đổi kích thước và SharedArrayBuffer có thể mở rộng

ArrayBuffer có thể đổi kích thước và SharedArrayBuffer có thể tăng kích thước hiện được hỗ trợ trong Firefox 128, cho phép thay đổi kích thước của vùng đệm mà không cần phân bổ vùng đệm mới và sao chép dữ liệu vào vùng đệm đó. Các thuộc tính này cũng tham gia chương trình Baseline Newly Available.

Từ khoá safe trong các thuộc tính flexbox

Safari 17.6 chủ yếu là bản phát hành sửa lỗi cho các tính năng hiện có, tuy nhiên, bản phát hành này cũng bao gồm từ khoá safe cho các thuộc tính căn chỉnh hộp linh hoạt. Điều này giúp từ khoá safe tương tác được trên các trình duyệt.

Từ khoá safe ngăn việc căn chỉnh đã chọn khiến nội dung hiển thị bên ngoài vùng có thể xem. CodePen sau đây cho thấy cách hoạt động của thuộc tính này với các mục được căn giữa. Nếu việc căn chỉnh center làm mất dữ liệu, thì start sẽ được sử dụng.

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 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 rộng rãi. Các phiên bản beta mới là Firefox 129 và Chrome 128. Bản thử nghiệm Safari 18 vẫn đang diễn ra. 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. Đây chỉ là một vài điểm nổi bật.

Chrome 128 bao gồm thuộc tính ruby-align CSS, cùng với các thay đổi để có thể ngắt dòng trong các phần tử có display: ruby, thuộc tính zoom cũng đã được cập nhật để khớp với thông số kỹ thuật. Có một bản cập nhật cho API AudioContext để thêm lệnh gọi lại được chỉ định cho AudiContext.onerror, báo cáo lỗi tạo và kết xuất AudioContext.

Firefox 129 bao gồm quy tắc @starting-style và thuộc tính transition-behavior. Các thuộc tính này sẽ trở thành một phần của Baseline Newly Available sau khi Firefox 129 được phát hành chính thức.