Baseline 2023

Rachel Andrew

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.

Ảnh chụp màn hình Tôi có thể sử dụng cùng với huy hiệu được cung cấp rộng rãi trên bố cục lưới CSS.

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.

Ảnh chụp màn hình Tôi có thể sử dụng với huy hiệu mới có trên Truy vấn vùng chứa không.

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.

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Cạnh: 105.
  • Firefox: 110.
  • Safari: 16.

Nguồn

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.

Hỗ trợ trình duyệt

  • Chrome: 111.
  • Cạnh: 111.
  • Firefox: 113.
  • Safari: 15.

Nguồn

Ả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.
Hãy thử các không gian màu mới bằng cách sử dụng gradient.style.

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ỗ trợ trình duyệt

  • Chrome: 111.
  • Cạnh: 111.
  • Firefox: 113.
  • Safari: 15.

Nguồn

Tìm hiểu thêm về color-mix().

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.

Hỗ trợ trình duyệt

  • Chrome: 80.
  • Cạnh: 80.
  • Firefox: 113.
  • Safari: 16.4.

Nguồn

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.

Hỗ trợ trình duyệt

  • Chrome: 69.
  • Cạnh: 79.
  • Firefox: 105.
  • Safari: 16.4.

Nguồ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.

Hỗ trợ trình duyệt

  • Chrome: 66.
  • Cạnh: ≤79.
  • Firefox: 115.
  • Safari: 17.

Nguồn

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.

Hỗ trợ trình duyệt

  • Chrome: 111.
  • Cạnh: 111.
  • Firefox: 108.
  • Safari: 15.4.

Nguồn

Bản minh hoạ này sử dụng các hàm lượng giác để di chuyển các mục trên đường tròn xung quanh một điểm trung tâm.

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.

Hỗ trợ trình duyệt

  • Chrome: 102.
  • Cạnh: 102.
  • Firefox: 112.
  • Safari: 15.5.

Nguồ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.

Hỗ trợ trình duyệt

  • Chrome: 117.
  • Cạnh: 117.
  • Firefox: 71.
  • Safari: 16.

Nguồn

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

Hỗ trợ trình duyệt

  • Chrome: 106.
  • Cạnh: 106.
  • Firefox: 116.
  • Safari: 15.4.

Nguồn

Đề 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.

Hỗ trợ trình duyệt

  • Chrome: 71.
  • Cạnh: 79.
  • Firefox: 64.
  • Safari: 16.4.

Nguồn

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ử.

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Cạnh: 105.
  • Firefox: 121.
  • Safari: 15.4.

Nguồn

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:

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.