Thu hẹp khoảng cách

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

Khi trò chuyện với các nhà phát triển, dù là riêng lẻ hay thông qua các bản khảo sát như Trạng thái của CSS, chúng tôi đều 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 trang web và ứng dụng hoạt động tốt trên các trình duyệt, cũng như khó biết thời điểm có thể sử dụng an toàn các tính năng mới thú vị.

Khoảng cách 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 flex hoặc các cột trong vùng chứa multicol. Mặc dù chúng ta đã có column-gap trong nhiều cột 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-gapgrid-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-gapcolumn-gap. Sau đó, thuộc tính này cũng được chỉ định để hoạt động trong bố cục flex. Việc đổi tên có nghĩa là chúng ta không có nhiều thuộc tính thực hiện 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 flex vào tháng 10 năm 2018. Tính năng này chỉ xuất hiện trong Chrome từ 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 ta phải chờ 2 năm 6 tháng thì mới có thể sử dụng gap một cách an toàn. Trên thực tế, đối với hầu hết các nhà phát triển, thời gian chờ đợ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 flex trở nên khó khăn hơn do chúng ta không thể sử dụng truy vấn tính năng để phát hiện tính năng hỗ trợ khoảng trống trong bố cục flex. 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ạ. Quá trình này thường bắt đầu từ rất lâu trước khi tính năng này có trong bất kỳ trình duyệt ổn định nào. Điều này có thể gây nhầm lẫn cho nhà phát triển hoặc ít nhất là gây khó chịu. Lặp đi lặp lại, các tính năng mới mẻ được nhắc đến ở khắp mọi nơi, nhưng rồi bạn phát hiện ra rằng bạn không thể sử dụng các tính năng đó do thiếu sự hỗ trợ.

Tại sao có sự gián đoạn 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ì chạy chậm. Nếu xem xét các tính năng của nhiều nền tảng, bạn sẽ thấy rằng mỗi trình duyệt lại dẫn đầu về một số tính năng.

Hầu hết các tính năng sẽ được tạo nguyên mẫu trong một trình duyệt. Ví dụ: quy cách bố cục lưới do Microsoft tạo ra lần đầu tiên và được triển khai ở dạng ban đầu trong Internet Explorer 10. Một kỹ sư tại Mozilla đã làm rất nhiều việc để tìm hiểu cách hoạt động của lưới con, vì vậy, tính năng này đã ra mắt trước 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 trong việc tạo nguyên mẫu, nhưng các đại diện của tất cả trình duyệt (và các tổ chức khác) trong Nhóm làm việc về CSS sẽ thảo luận về các tính năng CSS. Điều 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 không thể triển khai trong một trình duyệt. Điều đó sẽ dẫn đến sự thiếu hụt vĩnh viễn về dịch vụ hỗ trợ và việc không áp dụng 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 khác có thể áp dụng cho trình duyệt đó. Đôi khi, các công việc khác cần được thực hiện để cải thiện trình duyệt nên bị trì hoãn. Một ví dụ điển hình về điều này là công việc RenderingNG trong Chromium. Điều này đã mở đường cho việc triển khai lưới con; tuy nhiên, khoảng thời gian dài giữa Firefox và lưới con vận chuyển Chromium là do trước tiên, bố cục lưới cần được triển khai lại trong công cụ kết xuất mới.

Vấn đề

Chúng ta có hai 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 đến thời điểm tính năng đó có mặt ở mọi nơi.

Vấn đề thứ hai là vấn đề về tin nhắn. Làm cách nào để chúng tôi có thể làm rõ những điểm còn thiếu sót trong dịch vụ hỗ trợ? Làm cách nào để 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ỹ lưỡng từng tính năng để biết mức độ hỗ trợ của tính năng đó?

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

Các trình duyệt đang hợp tác 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 hỗ trợ trên một số tính năng, bao gồm cả thuộc tính khoảng trống trong bố cục flex. Năm nay, nỗ lực Interop 2022 sẽ tập trung vào 15 tính năng và một số tính năng trong số này đã có sự chuyển động.

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

Nhắn tin

Vấn đề thứ hai là điều mà tôi rất muốn giúp đỡ khi chúng ta thảo luận 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 và chúng tôi phải cung cấp các cách thực tế để giải quyết các vấn đề về 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á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 nội dung 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 thành việc này; tuy nhiên, bạn sẽ bắt đầu thấy một chút thay đổi hướng tới thực tế trong những tháng tới.

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

Hỗ trợ trình duyệt

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Nếu muốn tìm hiểu 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 Origin và bản dùng thử dành cho nhà phát triển, thì bạn sẽ thấy ngày càng nhiều nội dung đó trên trang web chị em của chúng tôi – developer.chrome.com. Nội dung trên đó có thể là nội dung thử nghiệm hoặc hiện chỉ được hỗ trợ trong Chrome, 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à thời điểm thú vị đối với web. Chúng tôi hy vọng có thể giúp bạn nhanh chóng tiếp cận các tính năng chính và hiểu rõ những thiếu sót hiện có, giúp việc phát triển web trở nên thú vị và bớt phiền toái hơn.

Ảnh của Cristofer Maximilian.