Trang này được dịch bởi Cloud Translation API.

Thu hẹp khoảng cách

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

Rachel Andrew

Khi trò chuyện với các nhà phát triển, dù là riêng lẻ hay thông qua các cuộc 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 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 flex hoặc các cột trong vùng chứa multicol. Mặc dù chúng ta đã sử dụng column-gap ở chế độ nhiều cột từ lâu, nhưng lần đầu tiên thuộc tính này xuất hiện trong bố cục lưới là 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 đó, 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 vào 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 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 linh hoạt trở nên khó khăn hơn do trên thực tế, chúng ta không thể sử dụng truy vấn tính năng để phát hiện khả năng hỗ trợ khoảng trống 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ạ. Quá trình này thường bắt đầu từ rất lâu trước khi tính năng này hoàn toà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 cho nhà phát triển hoặc ít nhất là gây khó chịu. Các tính năng mới nổi bật liên tục được bàn tán ở khắp mọi nơi, và sau đó bạn phát hiện ra mình không thể thực sự sử dụng chúng do thiếu sự hỗ trợ.

Vì sao lại có những khoảng trống trong việc hỗ trợ?

Đây không phải là một bài đăng chỉ chỉ vào một trình duyệt do tốc độ chậm. Nếu xem xét các tính năng trên các nền tảng khác nhau, 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ụ: lần đầu tiên Microsoft tạo thông số kỹ thuật bố cục lưới và 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 này sẽ dẫn đến việc không có hỗ trợ vĩnh viễn và thiếu khả năng áp dụng tính năng này.

Tuy nhiên, khi triển khai tính năng, tính năng này cần được ưu tiên cùng với tất cả tính năng có thể có khác dành 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 cần triển khai lại bố cục lưới trong công cụ kết xuất mới.

Vấn đề

Chúng ta có hai vấn đề ở đây. Đầu tiên là vấn đề về khả năng tương tác, tức là có thể mất nhiều thời gian từ khi một tính năng truy cập vào một trình duyệt cho đến khi có sẵn ở mọi nơi.

Lý do thứ hai là vấn đề nhắn tin. 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ỹ 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 khắc phục sự thiếu hụt về khả năng hỗ trợ 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 tập trung vào 15 tính năng và đã có sự thay đổi về một vài 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 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 tại 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á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 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 cho tài liệu mở trên web thông qua sự hỗ trợ của chúng tôi cho dự án Open Web Docs (Tài liệu trên web mở). Việc này giúp đảm bảo rằng chúng tôi có tài liệu hạng nhất về 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 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

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.