Baseline sắp có mặt tại 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 Giá trị cơ sở vào năm 2023.
Với định nghĩa mới về Đường cơ sở, là hai 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à rồi đến khi sản phẩm được cung cấp rộng rãi sau 30 tháng. Một đối tượng trở thành một phần của Cơ sở mới có sẵn khi nó có khả năng tương tác trong các trình duyệt:
- Safari (macOS và iOS)
- Firefox (máy tính và Android)
- Chrome (máy tính và Android)
- Edge (máy tính)
Đường cơ sở sẽ chuyển đến Tôi có thể sử dụng không
Trong bước tiếp theo để làm rõ phạm vi cung cấp tính năng, Baseline đang bắt đầu truy cập vào Can I Use from hôm nay. Khi truy cập một số trang trên thẻ Tôi có thể sử dụng, bạn sẽ thấy một huy hiệu cho bạn biết tính năng này có được cung cấp rộng rãi trên Baseline hay không.
Các tính năng mới có trong Baseline cũng sẽ hiển thị huy hiệu, cùng với năm có sẵn. Bất cứ thứ gì có khả năng tương tác trên bộ trình duyệt chính năm nay 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 Mã cơ sở năm 2023 – mới ra mắt.
Kích thước truy vấn vùng chứa và đơn vị truy vấn vùng chứa
Kích thước truy vấn vùng chứa cho phép bạn truy vấn kích thước của một phần tử, giống như cách truy vấn phương tiện truyền thông cho phép bạn truy vấn kích thước của khung nhìn. Chúng giúp tạo ra các thành phần có thể sử dụng lại dễ dàng hơn nhiều bằng cách cho phép bạn tạo các thành phần tương ứng với kích thước của khu vực vị trí của chúng.
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 về bài viết Các cụm từ tìm kiếm về vùng chứa nằm trong trình duyệt ổn định.
Hàm và hệ màu mới
CSS hiện hỗ trợ hệ màu cho phép bạn truy cập vào các màu bên ngoài gam màu sRGB. Điều này nghĩa là bạn có thể hỗ trợ màn hình HD (độ phân giải cao) bằng các màu sắc trong chế độ HD gam màu.
Mô hình màu mới
Hiện trong Đường cơ sở, các hàm màu lch()
, lab()
, oklch()
và oklab()
cấp quyền truy cập vào các mô hình màu LCH, Lab, OKLCH và OKLab.
![Ảnh chụp màn hình trình chỉnh sửa gradient.style với hiệu ứng chuyển màu rực rỡ từ hồng đến xanh dương.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=0000&hl=vi)
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 Đường cơ sở. color-mix()
cho phép kết hợp một màu với một màu khác, trong bất kỳ hệ màu nào.
Trong CSS sau đây, 25% màu xanh lam được trộn thành màu trắng, trong không gian màu srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Hàm color()
color()
có thể được sử dụng cho bất kỳ hệ màu nào chỉ định màu bằng R, G và B
các kênh. color()
lấy tham số không gian màu trước, sau đó là một chuỗi
cho RGB và một số giá trị alpha (không bắt buộc). Bạn có thể sử dụng bất kỳ giá trị nào sau đây: 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 sắc có độ phân giải cao của CSS cung cấp cho bạn nhiều ví dụ hơn về các hàm và hệ màu mới, cùng với thông tin về việc sử dụng khi nào.
Luồng nén
API Luồng nén là API JavaScript để nén và giải nén các luồng dữ liệu. Chiến dịch Quảng cáo ứng dụng việc sử dụng tính năng nén tích hợp sẵn này sẽ không cần bao gồm thư viện nén nữa.
Tìm hiểu thêm trong bài viết Luồng nén hiện đã được hỗ trợ trong tất cả trình duyệt.
Canvas ngoài màn hình
Trước khi OffscreenCanvas, các chức năng vẽ canvas gắn liền với <canvas>
tức là nó phụ thuộc trực tiếp vào DOM. Tách rời ngoài màn hình canvas
DOM từ 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, chế độ kết xuất OffscreenCanvas được tách hoàn toàn khỏi DOM, vì vậy nó cung cấp một số cải thiện tốc độ so với canvas thông thường vì không có sự đồng bộ hoá giữa hai định dạng này. Bạn cũng có thể dùng thiết bị này để di chuyển kết xuất công việc cho Web Worker, mặc dù không có DOM, 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 OFFscreenCanvas" giúp bạn tăng tốc hoạt động canvas bằng một trình chạy web
Tải trước mô-đun
Việc tải trước mô-đun có thể làm giảm thời gian tải xuống và xử lý. Thêm
rel="modulepreload"
đến phần tử liên kết tham chiếu đến mô-đun JavaScript và trình duyệt sẽ nhận được
mô-đun, phân tích cú pháp và biên dịch, sau đó đưa 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 mô-đun.
Hàm lượng giác trong CSS
Trong năm 2023, các hàm lượng giác theo Các giá trị CSS và Đơn vị cấp 4
trở nên có khả năng tương tác. Tức là các hàm sin()
, cos()
,
tan()
, asin()
, acos()
, atan()
và atan2()
đều tham gia chương trình 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 Hàm lượng giác trong CSS.
Thuộc tính trơ
Khi đánh dấu một phần tử DOM là inert
, bạn sẽ loại bỏ chuyển động hoặc tương tác khỏi
nó. Thuộc tính trơ khiến trình duyệt bỏ qua phần tử này:
- Sự kiện
click
sẽ không kích hoạt nếu người dùng nhấp vào phần tử đó. - Phần tử sẽ không được lấy tiêu điểm.
- Phần tử và nội dung của phần tử đó 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 hãy xem Thuộc tính trơ.
Lưới phụ 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 kênh đượ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ẽ 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 phụ.
Định dạng số V3
Intl.NumberFormat V3 là một tập hợp các tính năng mới cho Intl.NumberFormat trong năm 2023. Các tính năng bổ sung là:
- 3 hàm mới để định dạng dải số:
formatRange
,formatRangeToParts
vàselectRange
- Nhóm enum
- Các tuỳ chọn làm tròn và độ chính xác mới
- Mức độ ưu tiên làm tròn
- Diễn giải chuỗi dưới dạng số thập phân
- Chế độ làm tròn
- Dấu hiệu hiển thị âm
Đề xuất cho NumberFormat V3 nêu chi tiết từng tính năng mới này.
API toàn màn hình
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ó đang ở chế độ toàn màn hình hay không và 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.
Tìm hiểu thêm trong Hướng dẫn về API toàn màn hình trên MDN.
Bộ chọn :has()
của CSS
Chỉ cần tạo Baseline 2023 là bộ chọn :has()
sẽ chuyển đến Firefox
121 vào ngày 19 tháng 12. Trong số các cách sử dụng khác, bộ chọn này đóng vai trò như một
bộ chọn mẹ, cho phép bạn chọn một phần tử dựa trên các nội dung bên trong
nó. Ví dụ: bạn có thể áp dụng CSS khác nhau tuỳ thuộc vào việc có hay không
hình ảnh bên trong một phần tử.
Tìm hiểu thêm trong :has(): bộ chọn gia đình.
Nhiều tính năng khác đã tham gia Baseline trong năm nay
Sau đây là một số tính năng khác đã có mặt trên Baseline 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 dải ô cho truy vấn đa phương tiện
- Nhập Maps
- Nhiều giá trị để 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)
- Lồng ghép CSS, bao gồm cả thay đổi thêm thao tác phân tích cú pháp thoải mái.
- Bộ chọn lớp giả của CSS
:dir()
- Đơn vị độ dài
cap
của CSS - Che mặt nạ CSS
- Hỗ trợ truy vấn nội dung nghe nhìn cho các phần tử
<source>
của video HTML - Phần tử HTML
<search>
- Tải từng phần của các phần tử
<iframe>
(đích trong Firefox 121 vào ngày 19 tháng 12) - Đơn vị chiều cao dòng
lh
vàrlh
CSS
Nhiều tính năng trong số này đạt đến khả năng tương tác thông qua công việc cộng tác về Interop 2023. Thật thú vị khi xem cách các tính năng có thể được thực hiện thông qua quy trình đó và chuyển đến Đường cơ sở dưới dạng mới, để quyết định thời gian được cung cấp rộng rãi. Điều này sẽ tạo ra lộ trình rõ ràng hơn để đưa ra quyết định về thời điểm áp dụng tính năng trong dự án của bạn.