Baseline sắp ra mắt trên caniuse.com! Trong bài đăng này, hãy tìm hiểu về tính năng 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ề Đường cơ sở, có hai giai đoạn trong vòng đời của một tính năng: khi tính năng đó mới được cung cấp và sau đó là khi tính năng đó đượ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 khi tính năng đó có thể 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)
Trang chủ của Baseline là Can I Use
Bước tiếp theo để làm rõ phạm vi cung cấp tính năng, Baseline sẽ bắt đầu xuất hiện trên trang Can I Use kể từ hôm nay. Khi truy cập vào một số trang trên Can I Use, bạn sẽ thấy một huy hiệu cho biết liệu tính năng đó có được cung cấp rộng rãi trong 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 ra mắt. Mọi tính năng có thể tương tác trên bộ trình duyệt cốt lõi trong năm nay đều thuộc Đường cơ sở 2023.
Trong phần còn lại của bài đăng này, hãy tìm hiểu về các tính năng đạt được cột mốc này trong năm 2023. Tất cả các tính năng này đều thuộc Giá trị cơ sở 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
Cụm từ tìm kiếm 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ử, tương tự như cách cụm từ tìm kiếm nội dung nghe nhìn cho phép bạn truy vấn kích thước của khung nhìn. Các thành phần này giúp bạn tạo 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 phản ứng với kích thước của khu vực mà chúng được đặt.
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ùng chứa xuất hiện trong các trình duyệt ổn định.
Các không gian màu và hàm mới
CSS hiện hỗ trợ các không gian màu cho phép bạn truy cập vào 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 màu sắc từ các gam màu HD.
Mô hình màu mới
Giờ đây, trong Baseline, các hàm màu lch()
, lab()
, oklch()
và oklab()
sẽ 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 của trình chỉnh sửa gradient.style có hiệu ứng chuyển màu sống động từ hồng sang xanh dương.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=8&hl=vi)
Hàm color-mix()
Ngoài ra, các hàm màu mới đã trở thành một phần của Baseline. Hàm color-mix()
cho phép trộn một màu vào một màu khác, trong bất kỳ không gian màu nào.
Trong CSS sau đây, 25% màu xanh dương được trộn vào màu trắng, trong không gian màu srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Hàm color()
Bạn có thể sử 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 tham số không gian màu trước, sau đó là một loạt 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ỳ 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 không gian màu và hàm mới, cùng với thông tin về thời điểm sử dụng.
Luồng nén
Compression Streams 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 sử dụng tính năng nén tích hợp này không cần phải thêm thư viện nén nữa.
Tìm hiểu thêm trong bài viết Trình duyệt hiện hỗ trợ luồng nén.
Canvas ngoài màn hình
Trước OffscreenCanvas, các tính năng vẽ canvas được liên kết với phần tử <canvas>
, nghĩa là nó trực tiếp phụ thuộc vào DOM. OffscreenCanvas tách DOM khỏi API Canvas bằng cách di chuyển canvas ra khỏi màn hình.
Nhờ việc tách biệt này, quá trình kết xuất của OffscreenCanvas được tách hoàn toàn khỏi DOM, do đó, quá trình này mang lại một số điểm cải tiến về tốc độ so với canvas thông thường vì không có sự đồng bộ hoá giữa hai loại canvas này. Bạn cũng có thể dùng tính năng này để di chuyển công việc kết xuất sang một Worker trên web, ngay cả khi 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 phần OffscreenCanvas – tăng tốc hoạt động trên canvas bằng worker web
Tải trước mô-đun
Việc tải trước các mô-đun có thể giảm thời gian tải xuống và xử lý. Thêm rel="modulepreload"
vào phần tử đường liên kết tham chiếu đến một mô-đun JavaScript, sau đó 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 đư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
Vào năm 2023, các hàm lượng giác trong quy cách Giá trị và đơn vị CSS cấp 4 sẽ có khả năng tương tác. Điều này có nghĩa là các hàm sin()
, cos()
, tan()
, asin()
, acos()
, atan()
và atan2()
thuộc Đường cơ sở 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 inert
Khi đánh dấu một phần tử DOM là inert
, bạn sẽ xoá chuyển động hoặc hoạt động 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
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ó tâm đ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 phần tử 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 inert
.
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 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 nhau riêng biệt với nhau.
Trong bài viết 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 con.
NumberFormat V3
Intl.NumberFormat V3 là một bộ 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 là:
- Ba hàm mới để định dạng các 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
- Giải thích chuỗi dưới dạng số thập phân
- Chế độ làm tròn
- Hiển thị dấu âm
Đề xuất cho NumberFormat V3 nêu chi tiết từng tính năng mới này.
Fullscreen API
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()
. Lớp này cũng cung cấp các phương thức để phát hiện liệu 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 Chế độ toàn màn hình trên MDN.
Bộ chọn :has()
CSS
Chỉ cần đặt Đường cơ sở 2023 là bộ chọn :has()
. Bộ chọn này sẽ xuất hiện trong Firefox 121 vào ngày 19 tháng 12. Ngoài các mục đích sử dụng khác, bộ chọn này đóng vai trò là bộ chọn mẹ, cho phép bạn chọn một phần tử dựa trên các phần tử bên trong phần tử đó. 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 phần tử hay không.
Tìm hiểu thêm trong phần :has(): bộ chọn gia đình.
Các tính năng khác đã tham gia Baseline trong năm nay
Các tính năng khác đã trở thành một phần của Baseline trong năm nay bao gồm:
- Trang 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 nội dung đa phương tiện
- Nhập Maps
- Nhiều giá trị cho chế độ hiển thị CSS
- @counter-style
- Thuộc tính CSS
counter-set
- Hàm làm dịu
linear()
- Hệ thống tệp riêng của nguồn gốc (OPFS)
- Lồng CSS, bao gồm cả thay đổi thêm tính năng phân tích cú pháp linh hoạt.
- Bộ chọn lớp giả
:dir()
CSS - Đơn vị chiều dài
cap
CSS - Mặt nạ CSS
- Hỗ trợ truy vấn nội dung đa phương tiện cho phần tử
<source>
video HTML - Phần tử
<search>
HTML - Tải từng phần các phần tử
<iframe>
(ra mắt trong Firefox 121 vào ngày 19 tháng 12) - Đơn vị chiều cao dòng CSS
lh
và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 vào quy trình đó và xuất hiện trong Đường cơ sở dưới dạng tính năng mới, từ đó bắt đầu hẹn giờ để các tính năng đó được cung cấp rộng rãi. Điều này giúp bạn đưa ra quyết định rõ ràng hơn về thời điểm sử dụng các tính năng trong dự án của riêng mình.