Tại Google I/O, tôi đã chia sẻ tin về quá trình phát triển của Baseline kể từ khi chúng tôi công bố tại I/O vào năm ngoái. Tôi cũng đã công bố Trang tổng quan nền tảng web, việc tích hợp với Kho lưu trữ rum và việc tích hợp sắp tới với rumvision. Bài đăng này tập hợp tất cả các tài nguyên của buổi trò chuyện vào cùng một nơi.
Trang tổng quan nền tảng web là một cách mới và thú vị để xem toàn bộ nền tảng web, hành trình của các tính năng riêng lẻ đến khả năng tương tác, đồng thời trở thành một phần của Baseline. Hãy tìm hiểu thêm về vấn đề này trong phần Công bố Trang tổng quan về Nền tảng web.
Việc tích hợp Baseline với các công cụ mà bạn sử dụng hằng ngày luôn là một phần trong tầm nhìn của dự án này. Chúng tôi muốn làm cho việc xử lý khả năng tương thích của trình duyệt trở thành điều mà bạn không phải mất nhiều thời gian suy nghĩ. Tìm hiểu thêm về tính năng tích hợp Kho lưu trữ rum và theo dõi không gian này để biết tin tức về các nhà cung cấp công cụ khác trong thời gian sắp tới.
Mới sử dụng Baseline
Tại I/O, tôi đã chia sẻ 12 tính năng nền tảng web gần đây đã trở thành một phần của Cơ sở mới ra mắt. Các tính năng này hiện có trên Chrome, Edge, Firefox và Safari, và từ các tính năng bổ sung nhỏ có thể đơn giản hoá quá trình phát triển, cho đến một số tính năng mà các nhà phát triển mong muốn nhất — bao gồm cả truy vấn vùng chứa và :has().
Truy vấn vùng chứa kích thước
Truy vấn vùng chứa kích thước cho phép bạn thay đổi thiết kế dựa trên chiều rộng hoặc kích thước nội tuyến của vùng chứa, thay vì chỉ có thể nhắm mục tiêu kích thước của khung nhìn bằng các truy vấn phương tiện. Điều này cho phép thêm nhiều thành phần có thể sử dụng lại và có thể tự sửa đổi dựa trên không gian có sẵn khi được đặt vào một bố cục. Chừng nào khái niệm thiết kế thích ứng còn tồn tại thì chúng luôn đứng đầu danh sách tính năng được mong đợi nhất.
- Mới có vào tháng 2 năm 2023.
- Được cung cấp rộng rãi vào tháng 8 năm 2025.
Tìm hiểu thêm về cụm từ tìm kiếm về vùng chứa trên MDN trong bài viết Cụm từ tìm kiếm về vùng chứa trên trình duyệt ổn định, và khám phá cách các nhóm phát triển khác hưởng lợi từ những cụm từ này trong các nghiên cứu điển hình về cụm từ tìm kiếm liên quan đến vùng chứa.
Bộ chọn :has()
Bộ chọn :has() cung cấp cho chúng tôi thứ gì đó luôn là yêu cầu hàng đầu
của các nhà phát triển trong nhiều năm qua – bộ chọn gốc, một cách để chọn một phần tử
dựa trên nội dung bên trong đó. Mặc dù :has() có thể không chỉ có vậy.
Tương tự như với các truy vấn vùng chứa, điều này cực kỳ hữu ích khi tạo các thành phần có thể tái sử dụng, vì bạn có thể tạo một thành phần duy nhất có thể thích ứng với nội dung trong thành phần đó.
- Mới ra mắt vào tháng 12 năm 2023.
- Được cung cấp rộng rãi vào tháng 6 năm 2026.
Hãy tìm hiểu thêm về :has() trên MDN,
trong :has() bộ chọn gia đình
và trong :has() nghiên cứu điển hình.
Lưới con bố cục lưới CSS
Lưới con cho phép bố cục lưới lồng nhau kế thừa các đường đi từ bố cục lưới mẹ. Giúp căn chỉnh tốt hơn các mục trong lưới lồng nhau.
- Mới ra mắt vào tháng 12 năm 2023.
- Được cung cấp rộng rãi vào tháng 6 năm 2026.
Tìm hiểu thêm về lưới con trên MDN và trong lưới con CSS, liên kết đến nhiều tài nguyên khác.
Dịch vụ so sánh giá (CSS) Nesting
Trong những năm gần đây, CSS đã lấy cảm hứng từ các tính năng mà các nhà phát triển sử dụng trong các bộ tiền xử lý như Sass. Ví dụ: Thuộc tính tuỳ chỉnh CSS (thường được gọi là biến CSS) là một tính năng có sẵn rộng rãi, cho phép đặt các biến như màu sắc ở một nơi và sử dụng trên toàn bộ CSS của bạn – tính năng mà trước đây chỉ có khi sử dụng bộ tiền xử lý.
Một tính năng khác của bộ tiền xử lý là Nesting. Việc lồng ghép giúp tránh tình trạng trùng lặp bộ chọn và hỗ trợ khả năng đọc CSS vì các nội dung liên quan có thể được nhóm dễ dàng hơn.
- Mới ra mắt vào tháng 8 năm 2023
- Cung cấp rộng rãi vào tháng 2 năm 2026
Tìm hiểu thêm về CSS Nesting trên MDN và trong CSS Nesting.
Phần tử HTML <search>
Tìm kiếm là tính năng xuất hiện trên nhiều trang web và ứng dụng, tuy nhiên cho đến gần đây vẫn chưa có phần tử nào đánh dấu chức năng dùng cho việc tìm kiếm hoặc lọc trên trang. Phần tử <search> được thiết kế cho mục đích này. Thuộc tính này tồn tại dưới dạng một phần tử mà bạn có thể đặt biểu mẫu tìm kiếm hoặc các phần tử khác dùng để lọc kết quả.
- Mới ra mắt vào tháng 10 năm 2023
- Được cung cấp rộng rãi vào tháng 4 năm 2026
Tìm hiểu thêm về phần tử <search> trên MDN.
Video thích ứng
Tính năng này đề cập đến khả năng sử dụng phần tử <source> bên trong phần tử <video> để phân phát video có kích thước phù hợp đến nhiều thiết bị theo cách tương tự như việc phân phát các hình ảnh có kích thước khác nhau.
- Mới ra mắt vào tháng 11 năm 2023
- Cung cấp rộng rãi vào tháng 5 năm 2026
Hãy tìm hiểu thêm về MDN trong phần tử Nội dung nghe nhìn hoặc nguồn hình ảnh và trong Cách sử dụng video thích ứng.
Thuộc tính inert
Khi một phần tử ở trạng thái tĩnh, bạn không thể tương tác với phần tử đó. Ví dụ: khi mở một cửa sổ hộp thoại, người dùng không thể nhấp hoặc gắn thẻ các phần tử trên trang phía sau hộp thoại. Thuộc tính tĩnh cung cấp cho bạn một cách để kiểm soát độ trơ trên bất kỳ phần nào của giao diện người dùng.
Khi thuộc tính inert được áp dụng cho một phần tử, các sự kiện nhấp chuột sẽ không được kích hoạt nếu được nhấp vào phần tử đó, phần tử đó không thể lấy tiêu điểm, phần tử và nội dung của nó bị ẩn khỏi các công nghệ hỗ trợ vì bị loại trừ khỏi cây hỗ trợ tiếp cận.
- Mới ra mắt vào tháng 4 năm 2023
- Sẽ được cung cấp rộng rãi vào tháng 10 năm 2025
Tìm hiểu thêm về chỉ số tĩnh trên MDN và tìm hiểu thêm trong bài viết Thuộc tính tĩnh.
Hàm color-mix()
Hàm color-mix() cho phép kết hợp màu này thành màu khác, trong mọi hệ màu hiện có, bao gồm tất cả các mô hình màu mới – LCH, Lab, OKLCH và OKLab — gần đây đã trở thành một phần của cơ sở mới có sẵn.
- Mới ra mắt vào tháng 4 năm 2023
- Sẽ được cung cấp rộng rãi vào tháng 10 năm 2025
Tìm hiểu thêm về color-mix() trên MDN và trong CSS color-mix().
Chúng tôi cũng có hướng dẫn vô cùng lớn về màu CSS độ phân giải cao
bao gồm tất cả các mô hình màu mới có trong CSS. Ngoài ra, hãy khám phá gradient.style để thử nghiệm những màu mới này và tạo các hiệu ứng chuyển màu đẹp mắt.
:user-valid và :user-invalid
Các lớp giả :valid và :invalid có sẵn rộng rãi trong các trình duyệt và cho biết liệu một thành phần biểu mẫu hiện có hợp lệ theo bất kỳ quy tắc ràng buộc nào đặt trên đó hay không. Do đó, nếu bạn có một trường có một loại email và trường đó chứa tên, thì lớp giả :invalid sẽ chọn trường đó và bạn có thể thêm màu hoặc biểu tượng để chứng minh rằng trường đó cần được sửa.
Vấn đề với các lớp giả :valid và :invalid là các lớp này sẽ áp dụng trước khi người dùng tương tác với một biểu mẫu. Do đó, nếu một phần tử biểu mẫu là bắt buộc và người dùng chưa hoàn tất phần tử đó, thì kiểu không hợp lệ sẽ hiển thị. Thông thường, bạn chỉ muốn hiện kiểu không hợp lệ khi người dùng đã nhập sai nội dung nào đó hoặc bỏ qua một trường và để trống trường đó.
Để cải thiện trải nghiệm người dùng trong trường hợp này, hãy sử dụng các lớp giả :user-valid và :user-invalid. Các đối tượng này có hành vi khá giống nhau, ngoại trừ việc chúng chỉ khớp sau khi người dùng tương tác với trường. Vì vậy, trong ví dụ về một trường bắt buộc, người dùng cần phải nhấn phím tab hoặc nhấp vào trường đó rồi di chuyển đi mà không hoàn thành trường đó để trường hiển thị trạng thái không hợp lệ.
- Mới ra mắt vào tháng 10 năm 2023
- Được cung cấp rộng rãi vào tháng 4 năm 2026
Tìm hiểu thêm về :user-valid
và :user-invalid
trên MDN.
Luồng nén
Nhiều ứng dụng web cần cung cấp tệp tải xuống cho người dùng ở định dạng nén, chẳng hạn như tệp zip. Trước đây, điều này yêu cầu ứng dụng phải bao gồm thư viện nén, mã giúp tăng kích thước ứng dụng cho tất cả người dùng. API Luồng nén cung cấp cho bạn cách tích hợp để nén luồng dữ liệu.
- Mới ra mắt vào tháng 5 năm 2023
- Cung cấp rộng rãi vào tháng 11 năm 2025
Hãy tìm hiểu thêm về API Luồng nén trên MDN và trong Luồng nén hiện được hỗ trợ trong tất cả trình duyệt.
DOM bóng khai báo
Khai báo DOM bóng là một cách mới để tạo cây bóng đổ từ HTML, trong đó trước đây bạn chỉ có thể tạo cây bóng đổ từ JavaScript bằng attachShadow(). Có thể thực hiện điều này từ HTML đặc biệt hữu ích trong các môi trường mà JavaScript có thể không chạy, chẳng hạn như ứng dụng email. Điều này cũng quan trọng đối với các thành phần web kết xuất phía máy chủ.
- Mới ra mắt vào tháng 2 năm 2024
- Cung cấp rộng rãi vào tháng 8 năm 2026
Tìm hiểu thêm về Declarative shadow DOM.
API Popover
Cửa sổ bật lên được sử dụng cho nhiều tác vụ khác nhau trong các ứng dụng web của chúng tôi. Ví dụ: trình đơn, thông báo ngắn tuỳ chỉnh và bộ chọn nội dung. Hiện đã có một cách tích hợp để tạo các cửa sổ bật lên này theo cách trang trí với API Popover.
- Mới ra mắt vào tháng 4 năm 2024
- Sẽ được cung cấp rộng rãi vào tháng 10 năm 2026
Hãy tìm hiểu thêm về API Popover trên MDN, API Popover sẽ chuyển đến Baseline và trong các nghiên cứu điển hình về Popover.
12 tính năng này chỉ là một số tính năng đã trở thành một phần của Chương trình cơ sở mới ra mắt. Bạn có thể khám phá thêm trên trang web này. Khám phá tất cả các tính năng trong Baseline 2023 và bộ sưu tập các tính năng ngày càng mở rộng trong Baseline 2024.