Baseline sắp có trên caniuse.com! Trong bài đăng này, hãy tìm hiểu về việc tích hợp và khám phá một số tính năng đã trở thành một phần của Baseline vào năm 2023.
Với định nghĩa mới về Baseline, có 2 giai đoạn trong vòng đời của một tính năng: khi tính năng mới ra mắt và giai đoạn đó được cung cấp rộng rãi sau 30 tháng. Một tính năng sẽ trở thành một phần của Baseline mới có sẵn khi có khả năng tương tác trong các trình duyệt sau:
- Safari (macOS và iOS)
- Firefox (máy tính và Android)
- Chrome (máy tính và Android)
- Edge (máy tính để bàn)
Đường cơ sở chuyển đến phần Can I Use
Là bước tiếp theo để làm rõ phạm vi cung cấp tính năng, Baseline sẽ bắt đầu chuyển sang dùng tính năng Có thể sử dụng kể từ hôm nay. Khi truy cập vào một số trang trên trang Tôi có thể sử dụng, bạn sẽ thấy huy hiệu cho biết tính năng này đã được cung cấp rộng rãi trên Baseline hay chưa.
Các tính năng có trong Baseline mới ra mắt cũng sẽ hiển thị một huy hiệu, cùng với năm ra mắt tính năng đó. Mọi thứ có khả năng tương tác trên các trình duyệt chính được thiết lập trong năm nay đều là một phần của Baseline 2023.
Trong phần còn lại của bài đăng này, hãy tìm hiểu về những tính năng đã giúp bạn đạt được cột mốc này trong năm 2023. Tất cả các tính năng này đều là Baseline 2023 – mới ra mắt.
Truy vấn vùng chứa kích thước và đơn vị truy vấn vùng chứa
Truy vấn vùng chứa kích thước cho phép bạn truy vấn kích thước của một phần tử, theo cách tương tự như cách truy vấn nội dung nghe nhìn cho phép bạn truy vấn kích thước của khung nhìn. Chúng giúp việc tạo các thành phần có thể tái sử dụng trở nên dễ dàng hơn nhiều bằng cách cho phép bạn tạo các thành phần phản ứng với kích thước của khu vực mà chúng được đặt vào.
Thiết kế của thẻ sau đây sẽ thay đổi tuỳ thuộc vào chiều rộng của thành phần. Tìm hiểu thêm trong bài viết Cụm từ tìm kiếm về vùng chứa trong trình duyệt ổn định.
Hàm và không gian màu mới
CSS hiện hỗ trợ hệ màu để bạn có thể xem các màu nằm ngoài gam màu sRGB. Điều này có nghĩa là bạn có thể hỗ trợ màn hình HD (độ phân giải cao) bằng cách sử dụng các màu từ gam màu HD.
Mô hình màu mới
Hiện có trong Baseline, các hàm màu lch(), lab(), oklch() và oklab() sẽ truy cập vào các mô hình màu LCH, Lab, OKLCH và OKLab.
Hàm color-mix()
Ngoài ra, các hàm màu mới cũng đã trở thành một phần của Baseline. Hàm color-mix() cho phép kết hợp màu này với màu khác, trong bất kỳ hệ màu nào.
Trong CSS sau đây, 25% màu xanh dương được trộn vào màu trắng, trong hệ màu srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Hàm color()
Bạn có thể dùng hàm color() cho bất kỳ không gian màu nào chỉ định màu bằng các kênh R, G và B. color() lấy một tham số không gian màu trước, sau đó là một chuỗi các giá trị kênh cho RGB và một số alpha (không bắt buộc). Bạn có thể sử dụng bất kỳ loại nào trong số: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 và xyz-d65. Ví dụ:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
Hướng dẫn về màu có độ phân giải cao của CSS cung cấp cho bạn thêm nhiều ví dụ về các không gian và hàm màu mới, cùng với thông tin về thời điểm sử dụng.
Luồng nén
Com hơn Stream API (API Luồng nén) là một API JavaScript để nén và giải nén các luồng dữ liệu. Các ứng dụng dùng tính năng nén tích hợp này không cần phải có thư viện nén nữa.
Tìm hiểu thêm trong Luồng nén hiện được hỗ trợ trong tất cả các trình duyệt.
Canvas ngoài màn hình
Trước OffscreenCanvas, khả năng vẽ canvas liên kết với phần tử <canvas>, nghĩa là tính năng này phụ thuộc trực tiếp vào DOM. OffscreenCanvas sẽ tách DOM khỏi Canvas API bằng cách di chuyển canvas ra ngoài màn hình.
Nhờ hoạt động phân tách này, kết xuất của OffscreenCanvas sẽ được tách biệt hoàn toàn khỏi DOM, vì vậy kết xuất này có một số điểm cải thiện về tốc độ so với canvas thông thường vì không có sự đồng bộ giữa hai chế độ này. Bạn cũng có thể dùng API này để chuyển công việc hiển thị đến Web Worker, ngay cả khi không có DOM, việc này giúp giải phóng luồng chính và giúp ứng dụng phản hồi nhanh hơn.
Tìm hiểu thêm trong phần OffscreenCanvas – tăng tốc các hoạt động canvas bằng một worker trên web
Tải trước mô-đun
Việc tải trước các mô-đun có thể làm giảm thời gian xử lý và tải xuống. Thêm rel="modulepreload" vào phần tử liên kết tham chiếu đến một mô-đun JavaScript và trình duyệt sẽ lấy mô-đun, phân tích cú pháp và biên dịch mô-đun đó, đồng thời đặt kết quả vào bản đồ mô-đun để sẵn sàng thực thi.
Tìm hiểu thêm trong phần Tải trước các mô-đun.
Hàm lượng giác trong CSS
Trong năm 2023, các hàm lượng giác trong bản đặc tả Giá trị CSS và Đơn vị cấp 4 có khả năng tương tác. Tức là các hàm sin(), cos(), tan(), asin(), acos(), atan() và atan2() là một phần của Baseline 2023.
Tìm hiểu cách sử dụng các hàm này và khám phá một số trường hợp sử dụng trong bài viết Hàm lượng giác trong CSS.
Thuộc tính tĩnh
Khi đánh dấu một phần tử DOM là inert, bạn sẽ xoá chuyển động hoặc tương tác khỏi phần tử đó. Thuộc tính inert khiến trình duyệt bỏ qua phần tử:
- Sự kiện
clickkhông kích hoạt nếu người dùng nhấp vào phần tử này. - Phần tử này sẽ không được lấy tiêu điểm.
- Phần tử và nội dung của phần tử đó sẽ bị loại trừ khỏi cây hỗ trợ tiếp cận.
Thêm thuộc tính này vào các thành phần nằm ngoài màn hình hoặc bị ẩn. Để biết thêm thông tin, hãy xem phần Thuộc tính tĩnh.
Lưới con trong bố cục lưới CSS
Giá trị subgrid cho grid-template-columns và grid-template-rows cho phép bạn sử dụng các bản nhạc được xác định trên lưới mẹ, trên các lưới lồng nhau. Điều này có nghĩa là bạn có thể căn chỉnh các phần tử trong các lưới lồng riêng biệt với nhau.
Trong lưới con CSS, bạn sẽ tìm thấy một số ví dụ và đường liên kết đến nhiều bài đăng và ví dụ khác nêu bật các trường hợp sử dụng lưới con.
NumberFormat V3
Intl.NumberFormat V3 là một tập hợp các tính năng mới cho Intl.NumberFormat đã trở thành một phần của Baseline trong năm 2023. Các tính năng bổ sung bao gồm:
- Ba hàm mới để định dạng các dải số:
formatRange,formatRangeToPartsvàselectRange - Nhóm enum
- Các tuỳ chọn làm tròn và độ chính xác mới
- Làm tròn mức độ ưu tiên
- Diễn giải chuỗi dưới dạng số thập phân
- Chế độ làm tròn
- Ký hiệu màn hình âm
Đề xuất cho NumberFormat V3 nêu chi tiết từng tính năng mới này.
API Fullscreen
API toàn màn hình cho phép bạn đặt một phần tử như <video> vào chế độ toàn màn hình bằng cách gọi phương thức requestFullscreen(). API này cũng cung cấp các phương thức để phát hiện xem một phần tử có ở chế độ toàn màn hình hay không và liệu tài liệu có ở trạng thái cho phép bạn yêu cầu chế độ toàn màn hình hay không.
Tìm hiểu thêm trong Hướng dẫn về API Fullscreen trên MDN này.
Bộ chọn CSS :has()
Chỉ cần tạo Baseline 2023 là bộ chọn :has() sẽ xuất hiện trong Firefox 121 vào ngày 19 tháng 12. Ngoài các cách sử dụng khác, bộ chọn này hoạt động như
bộ chọn mẹ, cho phép bạn chọn một phần tử dựa trên những nội dung bên trong
đó. Ví dụ: bạn có thể áp dụng nhiều CSS tuỳ thuộc vào việc có hình ảnh bên trong một phần tử hay không.
Tìm hiểu thêm trong :has(): bộ chọn gia đình.
Những tính năng khác đã ra mắt Baseline trong năm nay
Sau đây là một số tính năng khác đã trở thành một phần của Baseline trong năm nay:
- Biểu định kiểu có thể tạo
- Bộ chọn con thứ n phức tạp trong CSS
- Cú pháp phạm vi cho truy vấn phương tiện
- Nhập Maps
- Nhiều giá trị cho quảng cáo hiển thị CSS
- @counter-style
- Thuộc tính CSS
counter-set - Hàm gia tốc
linear() - Hệ thống tệp riêng tư gốc (OPFS)
- CSS Nesting, bao gồm cả thay đổi thêm quá trình phân tích cú pháp thoải mái.
- Bộ chọn lớp giả của CSS
:dir() - Đơn vị chiều dài CSS
cap - Che giấu CSS
- Hỗ trợ truy vấn phương tiện cho phần tử video HTML
<source> - Phần tử HTML
<search> - Tải từng phần của các phần tử
<iframe>(truy cập vào Firefox 121 vào ngày 19 tháng 12) - Đơn vị chiều cao dòng CSS
lhvàrlh
Nhiều tính năng trong số này đã đạt được khả năng tương tác thông qua công việc cộng tác trên Interop 2023. Thật thú vị khi thấy cách các tính năng có thể được đưa qua quy trình đó và chuyển đến Baseline khi mới ra mắt. Điều này sẽ đặt bộ tính giờ để các tính năng đó được cung cấp rộng rãi. Điều này mang đến một lộ trình rõ ràng hơn để bạn đưa ra quyết định về thời điểm nên áp dụng các tính năng trong dự án của mình.