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 7 năm 2024.
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 của CSS
Firefox 128 bao gồm
Cú pháp màu tương đối của CSS,
Thao tác này cho phép bạn tạo màu tương ứng với màu gốc.
CSS sau đây giảm độ rực màu indigo đi một nửa, sử dụng hsl().
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Hỗ trợ trình duyệt
- 119
- 119
- 128
- 16,4
Bạn có thể xem nhiều ví dụ khác trong bài đăng trên blog Cú pháp màu tương đối của CSS. Cú pháp màu tương đối là một trong những trọng tâm của Khả năng tương tác 2024, do đó 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 chứa hình ảnh. Văn bản thay thế hiển thị với cây hỗ trợ tiếp cận.
Điều này có nghĩa là văn bản thay thế hiện được tất cả trình duyệt cho content hỗ trợ.
Hỗ trợ trình duyệt
- 77
- 79
- 128
- 17,4
Bản cập nhật Chrome 127 đảm bảo rằng Chrome chấp nhận số lượng
thay vì chỉ một chuỗi, việc này cho phép sử dụng attr()
.
Thuộc tính font-size-adjust
Chrome 127 có font-size-adjust, cũng là một khía cạnh trọng tâm cho Khả năng tương tác 2024.
Thuộc tính này hữu ích cho các trường hợp phông chữ dự phòng có thể xảy ra,
vì nó giúp bạn khớp kích thước của phông chữ dự phòng với phông chữ được 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
Cơ sở mới có sẵn.
Hỗ trợ View Transition API 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, bạn sẽ không thể chạy một lượt chuyển đổi khung hiển thị bằng document.startViewTransition trong iframe cùng nguồn gốc nếu khung chính đang chạy một lượt 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àm tâm điểm trên bàn phím
Trên Chrome 127, trình cuộn 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. 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 Trình cuộn có thể làm tâm điểm bằng bàn phím.
Quy tắc @property
Firefox 128 có hỗ trợ cho quy tắc @property và JavaScript liên quan
API. Tức 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à một giá trị ban đầu.
Trong ví dụ sau, thuộc tính tuỳ chỉnh được xác định để chấp nhận <color>
chỉ giá trị, 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 đã có trong dự án Baseline mới ra mắt. Vui lòng đọc thêm trong
@property: Biến CSS thế hệ mới hiện đã hỗ trợ trình duyệt chung.
ArrayBuffer có thể thay đổi kích thước và SharedArrayBuffer có thể phát triển
Có thể đổi kích thước ArrayBuffer và có thể phát triển SharedArrayBuffer hiện đã được hỗ trợ trong Firefox 128, cho phép thay đổi kích thước vùng đệm mà không phải phân bổ bộ đệm mới rồi sao chép dữ liệu vào đó. 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 của Flexbox
Safari 17.6 gần như là bản phát hành sửa lỗi cho các tính năng hiện có,
tuy nhiên, đoạn mã này cũng chứa 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 có thể tương tác trên các trình duyệt.
Hỗ trợ trình duyệt
- 115
- 115
- 63
- 18
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 tính năng này
có 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ì
Thay vào đó, hệ thống sẽ dùng start.
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 129 và Chrome 128. Chiến lược phát hành đĩa đơn Safari 18 chương trình thử nghiệm beta vẫn đang diễn ra. 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.
Chrome 128 bao gồm thuộc tính CSS ruby-align, cùng với các thay đổi đối vớ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 để phù hợp với quy cách. Có
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 các lỗi tạo và kết xuất AudioContext.
Firefox 129 bao gồm quy tắc @starting-style và transition-behavior
thuộc tính này. Các thuộc tính này sẽ trở thành một phần của chương trình Cơ sở mới có sẵn sau khi
Firefox 129 được phát hành bản ổn định.