Thu hẹp khoảng cách

Giúp bạn dễ dàng xây dựng cho web.

Rachel Andrew

Khi trò chuyện với các nhà phát triển, dù là trò chuyện riêng hay thông qua các cuộc khảo sát như State of CSS (Tình trạng của CSS), chúng tôi liên tục nghe thấy những điều tương tự. Nhà phát triển gặp khó khăn trong việc tạo các trang web và ứng dụng hoạt động tốt trên nhiều trình duyệt, cũng như khó biết được thời điểm an toàn để sử dụng các tính năng mới thú vị.

Khoảng trống hộp linh hoạt

Ví dụ về một thuộc tính có vấn đề, thuộc tính gap cho phép bạn tạo khoảng trống giữa các mục lưới hoặc linh hoạt, hoặc các cột trong vùng chứa multicol. Mặc dù chúng ta đã có column-gap trong multicol từ lâu, nhưng thuộc tính này lần đầu tiên xuất hiện trong bố cục lưới dưới dạng grid-gap, cùng với grid-column-gap và grid-row-gap.

Ngay sau khi bố cục lưới xuất hiện trong trình duyệt, thuộc tính này được đổi tên thành gap, cùng với row-gap và column-gap. Sau đó, nó được chỉ định hoạt động trong bố cục linh hoạt. Việc đổi tên này có nghĩa là chúng tôi không có nhiều thuộc tính làm cùng một việc.

.box {
  display: flex;
  gap: 1em;
}

Firefox đã phát hành thuộc tính này cho bố cục linh hoạt vào tháng 10 năm 2018. Tính năng này không xuất hiện trong Chrome cho đến tháng 7 năm 2020, sau đó là Safari vào tháng 4 năm 2021. Điều này có nghĩa là chúng tôi phải chờ 2 năm 6 tháng mới có thể sử dụng gap một cách an toàn. Trên thực tế, hầu hết các nhà phát triển đều phải đợi lâu hơn nhiều, do cần hỗ trợ các phiên bản trình duyệt cũ hơn phiên bản mới nhất. Việc hỗ trợ gap trong bố cục linh hoạt trở nên khó khăn hơn do chúng tôi không thể dùng truy vấn tính năng để phát hiện khoảng trống được hỗ trợ trong bố cục linh hoạt. Vì thuộc tính gap được hỗ trợ trong lưới, nên @supports (gap:1em) sẽ trả về giá trị true.

Một vấn đề khác là khi một tính năng mới xuất hiện trong một trình duyệt, mọi người bắt đầu nói về tính năng đó và chia sẻ bản minh hoạ. Việc này thường bắt đầu từ rất lâu trước khi tính năng này xuất hiện trong bất kỳ trình duyệt ổn định nào. Điều này có thể gây nhầm lẫn hoặc ít nhất là gây khó chịu cho nhà phát triển. Nhiều lần, các tính năng mới sáng bóng được đề cập ở khắp mọi nơi, nhưng sau đó bạn phát hiện ra rằng mình không thể sử dụng chúng do thiếu sự hỗ trợ.

Tại sao lại có những khoảng trống trong dịch vụ hỗ trợ?

Đây không phải là bài đăng chỉ trích một trình duyệt vì tốc độ chậm. Nếu xem xét các tính năng của nền tảng, bạn sẽ thấy rằng các trình duyệt khác nhau sẽ dẫn đầu về các tính năng khác nhau.

Hầu hết các tính năng sẽ được tạo mẫu trong một trình duyệt. Ví dụ: quy cách bố cục dạng lưới lần đầu tiên được Microsoft tạo ra và triển khai ở dạng ban đầu trong Internet Explorer 10. Một kỹ sư tại Mozilla đã nỗ lực rất nhiều để tìm ra cách hoạt động của lưới con, vì vậy, tính năng này xuất hiện đầu tiên trong Firefox. Chúng tôi nhận thấy Safari đang dẫn đầu về một số hàm màu mới thú vị.

Mặc dù một trình duyệt có thể dẫn đầu về việc tạo mẫu, nhưng đại diện của tất cả các trình duyệt (và các tổ chức khác) trong Nhóm công tác CSS sẽ thảo luận về các tính năng CSS. Điều rất quan trọng là một tính năng có thể được triển khai trong tất cả các trình duyệt và không được thiết kế theo cách khiến bạn không thể triển khai tính năng đó trong một trình duyệt. Điều đó sẽ dẫn đến việc thiếu hụt vĩnh viễn về khả năng hỗ trợ và thiếu sự chấp nhận đối với tính năng này.

Tuy nhiên, khi triển khai một tính năng, bạn cần ưu tiên tính năng đó cùng với tất cả các tính năng có thể có khác cho trình duyệt đó. Đôi khi, các vấn đề bị trì hoãn do những công việc khác cần được thực hiện để cải thiện trình duyệt. Một ví dụ tiêu biểu cho việc này là hoạt động RenderingNG trong Chromium. Điều này đã mở đường cho việc triển khai lưới con; tuy nhiên, khoảng cách lớn giữa việc Firefox và Chromium phát hành lưới con là do cần phải triển khai lại bố cục lưới trong công cụ kết xuất mới trước.

Các vấn đề

Chúng ta có 2 vấn đề ở đây. Vấn đề đầu tiên là khả năng tương tác, tức là có thể mất nhiều thời gian từ thời điểm một tính năng xuất hiện trong một trình duyệt cho đến khi tính năng đó có mặt ở mọi nơi.

Thứ hai là vấn đề về việc truyền tải thông điệp. Làm cách nào để biết rõ những điểm thiếu sót trong dịch vụ hỗ trợ? Làm cách nào để chúng ta chia sẻ các tính năng mới mà không khiến mọi người phải nghiên cứu kỹ từng tính năng để tìm hiểu mức độ hỗ trợ của tính năng đó?

Khả năng tương tác

Các trình duyệt đang phối hợp với nhau để giải quyết vấn đề về khả năng tương tác. Năm ngoái, Compat 2021 đã giúp thu hẹp khoảng cách về khả năng hỗ trợ đối với một số tính năng, bao gồm cả thuộc tính gap trong bố cục linh hoạt. Năm nay, nỗ lực Interop 2022 tập trung vào 15 tính năng và đã có những tiến triển đối với một số tính năng trong số này.

Bạn có thể theo dõi tiến trình trên trang tổng quan Interop 2022.

Nhắn tin

Vấn đề thứ hai là điều mà tôi rất muốn trợ giúp khi chúng ta nói về các tính năng trên web.dev và trên developer.chrome.com. Tôi muốn trạng thái của các tính năng phải thật rõ ràng khi bạn đọc nội dung của chúng tôi, đồng thời chúng tôi sẽ cung cấp những cách thiết thực để giải quyết các vấn đề về việc hỗ trợ.

Chúng tôi đã ra mắt một số khoá học cơ bản và sẽ tiếp tục ra mắt thêm nhiều khoá học khác. Các khoá học này giúp bạn tìm hiểu cách xây dựng cho web hiện đại bằng cách sử dụng các công nghệ nền tảng web cốt lõi. Trả phòng:

Chúng tôi đang nỗ lực tập trung nội dung trên trang web này vào những thứ mà bạn có thể sử dụng một cách an toàn. Chúng tôi vẫn chưa hoàn toàn đạt được mục tiêu này; tuy nhiên, bạn sẽ bắt đầu thấy một chút thay đổi theo hướng thực tế hơn trong những tháng tới.

Chúng tôi cũng đóng góp cho tài liệu về web mở thông qua việc hỗ trợ dự án Open Web Docs. Điều này đảm bảo chúng tôi có tài liệu hạng nhất trên MDN, cùng với dữ liệu mới nhất về khả năng tương thích với trình duyệt. Sau đó, chúng tôi sử dụng dữ liệu này trên web.dev để cho biết khả năng hỗ trợ các tính năng. Sau đây là khả năng hỗ trợ hiện tại của gap trong bố cục linh hoạt.

Browser Support

Nếu muốn biết thêm về tầm nhìn của Chrome đối với web, những điều chúng tôi đang thử nghiệm trong các thử nghiệm Origin và Developer, thì bạn sẽ ngày càng thấy nhiều nội dung đó trên trang web liên kết của chúng tôi: developer.chrome.com. Nội dung ở đó có thể là nội dung thử nghiệm hoặc chỉ được Chrome hỗ trợ ngay bây giờ, nhưng chúng tôi rất mong bạn khám phá và đưa ra ý kiến phản hồi.

Đây thực sự là một thời điểm thú vị cho web. Chúng tôi hy vọng có thể giúp bạn nhanh chóng sử dụng các tính năng chính và hiểu rõ những điểm còn thiếu, nhờ đó giúp việc phát triển web trở nên thú vị hơn và bớt khó khăn hơn.

Ảnh của Cristofer Maximilian.