Hãy khám phá một số tính năng thú vị có trên trình duyệt web ổn định và phiên bản thử nghiệm trong tháng 5 năm 2023.
Bản phát hành trình duyệt ổn định
Vào tháng 5 năm 2023, Firefox 113, Chrome 113, Chrome 114 và Safari 16.5 đã trở nên ổn định. Hãy cùng xem điều này có ý nghĩa gì đối với nền tảng web.
WebGPU
Chrome 113 bao gồm WebGPU, phiên bản kế thừa cho các API đồ hoạ WebGL và WebGL 2 dành cho web. Thư viện này cung cấp các tính năng hiện đại như điện toán GPU, tiếp cận phần cứng GPU ở mức hao tổn thấp hơn, khả năng kết xuất trên nhiều canvas trên một thiết bị đồ hoạ và hiệu suất tốt hơn, dễ dự đoán hơn.
Nhóm bên thứ nhất
Nhóm bên thứ nhất (FPS) là một phần của Hộp cát về quyền riêng tư. Đây là một cách để các tổ chức khai báo mối quan hệ giữa các trang web để các trình duyệt có thể quyết định thời điểm cho phép các trang web của bên thứ ba truy cập có giới hạn vào cookie của mình trong một nhóm. FPS bắt đầu phát hành theo giai đoạn trong Chrome 113.
Các tính năng đa phương tiện của CSS và nhiều tính năng khác
Đối với CSS, Chrome 113 bao gồm các tính năng đa phương tiện overflow-inline và overflow-block.
Và tính năng đa phương tiện update.
Ngoài ra còn có hàm gia tốc linear(). Bạn có thể tìm hiểu thêm trong bài viết Tạo đường cong ảnh động phức tạp trong CSS bằng hàm gia tốc linear().
Hỗ trợ trình duyệt
- 113
- 113
- 112
- 17,2
Các tính năng cấp màu CSS 4
Firefox 113 bao gồm các ký hiệu chức năng color(), lab(), lch(), oklab(), oklch() và color-mix(), cùng với thuộc tính bắt buộc điều chỉnh màu. Tức là các hàm và không gian màu mới hiện đã được hỗ trợ trên cả 3 công cụ chính. Bạn có thể tìm hiểu thêm về các hệ màu và hệ màu này trong Hướng dẫn về màu CSS có độ phân giải cao.
Có nhiều quyền kiểm soát hơn đối với :nth-child() lựa chọn
Firefox 113 cũng bổ sung khả năng chuyển danh sách bộ chọn vào :nth-child() và nth-last-child(). Tìm hiểu thêm về điều này và xem các ví dụ trong bài đăng Kiểm soát thêm các lựa chọn :nth-child() bằng cú pháp S.
Hỗ trợ trình duyệt
- 111
- 111
- 113
- 9
API luồng nén
Hiện được hỗ trợ trong cả ba công cụ chính do được đưa vào Firefox 113, API Luồng nén cho phép nén và giải nén luồng. Điều này có nghĩa là các ứng dụng JavaScript không cần phải gói thư viện nén nữa.
Lồng ghép của CSS
Safari 16.5 chủ yếu đã giải quyết các vấn đề, nhưng cũng hỗ trợ thêm cho CSS Nesting, với bộ chọn lồng mới >, được sử dụng để lồng các quy tắc kiểu có liên quan, theo cách quen thuộc với các nhà phát triển đã sử dụng bộ tiền xử lý:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
Cân bằng dòng tiêu đề với text-wrap: balance
Trên Chrome 114, bạn có thể sử dụng text-wrap: balance. Điều này cho phép bạn cân bằng các dòng tiêu đề, tránh vấn đề có một từ duy nhất trên dòng cuối cùng, mang lại kết quả dễ đọc và dễ đọc hơn. Bạn có thể tìm hiểu thêm trong bài viết CSS text-wrap: Balance.
CHIPS: Cookie có trạng thái được phân vùng độc lập
Trong nỗ lực loại bỏ cookie của bên thứ ba, CHIPS cho phép chọn sử dụng cookie của bên thứ ba đang được phân vùng theo trang web cấp cao nhất bằng cách sử dụng thuộc tính cookie mới Partitioned. CHIPS hiện có trong Chrome 114.
API Popover
Ngoài ra, trong Chrome 114 còn có API Popover (API Cửa sổ bật lên) giúp dễ dàng hơn trong việc tạo các thành phần giao diện người dùng tạm thời (UI) hiển thị trên tất cả giao diện người dùng của ứng dụng web khác.
Trong đó có các thành phần tương tác với người dùng như trình đơn thao tác, đề xuất thành phần biểu mẫu, bộ chọn nội dung và giao diện người dùng giảng dạy.
Thuộc tính cửa sổ bật lên mới cho phép tự động hiển thị mọi phần tử trong lớp trên cùng. Tức là nhà phát triển không còn phải lo lắng về việc định vị, xếp chồng các phần tử, tiêu điểm hoặc hoạt động tương tác với bàn phím nữa.
Tìm hiểu thêm trong phần Giới thiệu về API cửa sổ bật lên.
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 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 thích hợp để thử nghiệm các tính năng mới hoặc xoá bỏ những tính năng có thể ảnh hưởng đến trang web của bạn trước khi toàn thế giới ra mắt bản phát hành đó. Các phiên bản thử nghiệm mới là Firefox 114, Chrome 115 và Safari 16.6. 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, đây chỉ là một vài điểm nổi bật.
Chrome 115 bao gồm nhiều giá trị cho thuộc tính CSS display. Tức là display: flex trở thành display: block flex và display: block trở thành display: block flow. Các giá trị duy nhất được duy trì dưới dạng từ khoá cũ. Khi ở trong phiên bản ổn định của Chrome, các giá trị này sẽ có sẵn nhiều giá trị trên tất cả các công cụ.
Ngoài ra trong Chrome 115 còn có các tiện ích ScrollTimeline và ViewTimeline cho thông số kỹ thuật của Ảnh động trên web. Chúng bật ảnh động điều khiển cuộn thông qua CSS và JavaScript.
Firefox 114 bao gồm WebTransport API, bản cập nhật hiện đại cho WebSockets hỗ trợ nhiều luồng, luồng một chiều và phân phối không theo thứ tự.
Một phần trong loạt video New to the web Series