Đã kết thúc phiên bản Interop 2023 vào cuối năm ngoái. Nỗ lực này của các nhà cung cấp trình duyệt và các bên khác nhằm mục đích tạo ra một web có khả năng tương tác cao hơn, đồng thời giảm bớt những khác biệt giữa các trình duyệt làm bạn vướng mắc. Bài đăng này chia sẻ kết quả cuối cùng và một số tính năng ưa thích của nhóm Chrome.
Tỷ số cuối cùng
Thật tuyệt vời khi thấy nhiều màu xanh lục. Hãy so sánh điểm số này với điểm số vào đầu năm 2023 và chúng tôi đã đi được một chặng đường dài, trong đó mọi trình duyệt đều có sự gia tăng đáng kể về điểm số.
Điều gì khiến chúng tôi hào hứng?
Bạn có thể xem danh sách toàn bộ các lĩnh vực trọng tâm cho năm 2023 trên Trang tổng quan của Interop 2023. Một số khía cạnh trọng tâm (chẳng hạn như :has(), truy vấn vùng chứa và thuộc tính inert) đã bao gồm toàn bộ tính năng. Một số khác (ví dụ: công việc trên Flexbox) xử lý một số thất bại trong kiểm thử nhỏ trong một tính năng hiện có trên nhiều trình duyệt.
:has()
"Cuối cùng là bộ chọn gốc cho CSS! Chúng tôi đã yêu cầu tính năng này gần như ngay từ ngày đầu tiên và cuối cùng đã có thể đưa nó vào tất cả các trình duyệt. Điều này có nghĩa là các nhà phát triển cần phải chạy ít JavaScript hơn để mô phỏng bộ chọn này". – Thomas Steiner, Kỹ sư phụ trách quan hệ nhà phát triển trên Chrome.
Người dùng đang rất quan tâm đến lớp giả chức năng :has(), vì phiên bản này đã gửi đến nền tảng một yêu cầu quan trọng của các nhà phát triển. Khi đó, bạn sẽ có một bộ chọn mẹ – bạn có thể chọn một phần tử dựa trên những nội dung bên trong đó. Tuy nhiên, bạn có thể sử dụng dữ liệu này cho nhiều mục đích hơn nữa. Như đã giải thích trong phần CSS được bao bọc, bạn có thể chọn nhiều hơn so với phần tử mẹ và thậm chí thực hiện các lựa chọn lệch sang một bên.
:has(): ĐếUna Kravets, Kỹ sư phụ trách quan hệ nhà phát triển thuộc nhóm Chrome giải thích:
"Bộ chọn :has() là một trong những tính năng CSS mới, linh hoạt và mạnh mẽ nhất. Nhờ tính năng này, bạn có thể tạo kiểu cho bất kỳ phần tử mẹ nào dựa trên sự hiện diện, trạng thái hoặc thậm chí là số lượng phần tử con. Nhưng hơn nữa là bạn có thể kết hợp nó với các trình kết hợp khác để tạo kiểu cho các anh em đồng cấp và thực sự có được cấp độ kiểm soát kiểu mới đối với giao diện người dùng của mình. Quả là một tính năng linh hoạt! Tôi đã thấy rất nhiều bản minh hoạ thú vị giúp giảm nhu cầu dựa vào tập lệnh bổ sung khi tận dụng sức mạnh của :has()."
Như Philip Jägenstedt, một kỹ sư phần mềm trên Chrome đã nhắc lại, :has() là tính năng hàng đầu mà các nhà phát triển gặp khó khăn do thiếu sự hỗ trợ khi được hỏi trong Khảo sát về tình trạng CSS năm 2023.
Vì vậy, chúng tôi không phải là người duy nhất hào hứng khi có sẵn tính năng này.
Bạn có thể nghe Una và Adam Argyle nói về has() trên CSS Podcast, sau đó tìm hiểu thêm về :has() qua các bài đăng này trên cộng đồng web.
- Tìm hiểu về bộ chọn
:has()CSS qua ví dụ - Khoá thao tác cuộn bằng
:has() - Trường hợp sử dụng cho CSS
:has()
Truy vấn vùng chứa
2023 là một năm tuyệt vời đối với những điều tưởng như không thể làm được. Ngoài :has(), nền tảng web cuối cùng cũng đã được hỗ trợ trên nhiều trình duyệt cho các truy vấn vùng chứa. Bạn đã yêu cầu truy vấn vùng chứa (hoặc phần tử) kể từ năm 2011, chỉ một năm sau khi khái niệm thiết kế thích ứng ra mắt. Trình duyệt này hiện đã có mặt và hoạt động trên mọi công cụ trình duyệt chính.
Una và Adam đã thảo luận về các truy vấn liên quan đến vùng chứa trong Podcast của CSS và Una đã giới thiệu các truy vấn này trong một tập của video Thiết kế trong trình duyệt. Cộng đồng cũng đã chia sẻ rất nhiều mẹo và ý tưởng.
Lưới con
Subgrid là tính năng yêu thích của tôi trong Interop 2023. Tệp này cho phép bạn xác định lưới trên phần tử mẹ, sau đó sử dụng kích thước kênh được xác định trên phần tử mẹ đó, trên các lưới lồng bên trong lưới chính đó. Nhờ vào công sức của các kỹ sư nền tảng web Microsoft Edge, mạng phụ đã có mặt trên mọi công cụ trình duyệt chính trong năm 2023, nhằm nâng cao điểm số cho Chrome và mang tính năng thú vị này đến cho mọi người.
Kỹ sư Quan hệ nhà phát triển Chrome Adriana Jara cho tôi biết cách lưới và lưới con giúp việc tạo giao diện người dùng tuyệt vời trở nên dễ dàng hơn,
"Tôi rất giỏi về hình ảnh, bố cục, duy trì giao diện nhất quán và thích ứng với màn hình. Tuy nhiên, bằng cách nào đó, lưới và lưới con vẫn có thể tạo ra một thiết kế phù hợp với nhiều kích cỡ màn hình và tự động điều chỉnh cho phù hợp với nội dung! Đây là tính năng mà tôi yêu thích vì nó giải quyết một nhu cầu cơ bản để tạo ra một trang web đem lại cho người dùng trải nghiệm tốt mà không cần nhiều kiến thức chuyên môn".
Tôi đã viết một số trường hợp sử dụng lưới con trong một bài viết về 12 ngày trên web và tương tự như với các tính năng khác trong bài đăng này, bạn có thể nghe một tập podcast CSS. Ngoài ra, còn có rất nhiều tài nguyên trên web.
- Tìm hiểu về lưới con CSS
- Video: Bố cục dễ sử dụng và nhất quán hơn nhờ lưới con
- Trình bày nội dung bằng lưới CSS và lưới con
Không gian và hàm màu
Không có gì ngạc nhiên khi nhà phát triển CSS của Chrome Adam Argyle nói với tôi rằng không gian màu và chức năng là tính năng ưa thích của ông,
"Tạm biệt loại toán biến giá trị kênh HSL vụng về; Xin chào những lớp lót một biến thể màu sắc đúng thời điểm. Các chức năng và không gian màu mới không chỉ giải quyết các vấn đề về quy trình màu sắc mà còn cho phép sử dụng các màu và độ dốc nâng cao, đáng tin cậy và rực rỡ hơn. Còn chần chừ gì nữa mà không khám phá một số khả năng trong khi vẫn tận hưởng cuộc sống thuận tiện hơn. Rắc gia vị nêm y tế của Interop vào đó, món ăn này trông rất thú vị."
Adam đã và đang tạo một số nội dung thú vị để giúp bạn hiểu rõ các tính năng mới này, chẳng hạn như Hướng dẫn về màu sắc của CSS độ phân giải cao và gradient.style cũng như nói về các hàm màu trong Podcast CSS.
Thật thú vị khi những tính năng này có sẵn trong tất cả các công cụ trình duyệt chính. Tìm hiểu thêm trong các bài viết tuyệt vời này.
Rất mong được dùng Interop 2024
Sau khi các tính năng có khả năng tương tác, các tính năng đó sẽ trở thành một phần của Cơ sở (mới có sẵn). Chúng tôi rất vui khi thấy số lượng tính năng mới đã gia nhập nhóm này trong năm 2023, một phần không nhỏ là do công việc của tất cả mọi người liên quan đến Interop 2023. Sẽ sớm đến lúc công bố các lĩnh vực trọng tâm được chọn cho năm 2024, và tất cả chúng tôi đều rất mong được chứng kiến mức độ cải thiện của nền tảng web trong năm nay.