Baseline 2023

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.

Ảnh chụp màn hình của Can I Use với huy hiệu được sử dụng 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 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.

Ảnh chụp màn hình về tính năng Can I Use (Tôi có thể sử dụng) với huy hiệu mới có trên Truy vấn vùng chứa.

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.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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()oklab() sẽ cấp quyền truy cập vào các mô hình màu LCH, Lab, OKLCH và OKLab.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Ả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.
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 đã 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);
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

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

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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()atan2() thuộc Đường cơ sở 2023.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

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 một đườ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 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.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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, formatRangeToPartsselectRange
  • 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

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

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

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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:

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.