Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Thu hẹp khoảng cách

Giúp việc xây dựng cho web trở nên dễ dàng hơn.

Rachel Andrew Technical Writer

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ư State of CSS (Trạng thái của CSS), chúng tôi luôn 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 hiệu quả 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 flexbox

Ví dụ: thuộc tính gap là một thuộc tính có vấn đề, cho phép bạn tạo khoảng trống giữa các mục grid 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 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 đó, thuộc tính này được chỉ định để hoạt động trong bố cục linh hoạt. Việc đổi tên này giúp chúng ta không có nhiều thuộc tính thực hiện cùng một chức năng.

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

Firefox đã cung cấp 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 xuất hiện trên 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à có một khoảng thời gian 2 năm 6 tháng trước khi chúng ta 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 chúng tôi 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 trên một trình duyệt, mọi người sẽ 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. Nhiều lần, các tính năng mới hấp dẫn được nhắc đến ở khắp mọi nơi, nhưng sau đó bạn phát hiện ra rằng mình không thể thực sự sử dụng các tính năng đó do thiếu sự hỗ trợ.

Tại sao lại có những lỗ hổng trong việc hỗ trợ?

Bài đăng này không nhằm mục đích chỉ trích một trình duyệt nào đó là chậm. Nếu xem xét các tính năng khác nhau 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 nguyên mẫu trong một trình duyệt. Ví dụ: quy cách bố cục lưới được Microsoft tạo ra lần đầu 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 trong Firefox trước tiên. 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ể đi đầu trong việc tạo nguyên mẫu, nhưng đại diện của tất 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 tính năng đó không thể triển khai trong một trình duyệt. Điều này sẽ dẫn đến việc thiếu hỗ trợ vĩnh viễn và tính năng này không được áp dụng.

Tuy nhiên, khi triển khai một tính năng, tính năng đó cần được ưu tiên cùng với tất cả các tính năng khác có thể có cho trình duyệt đó. Đôi khi, một số tính năng bị trì hoãn do có những công việc khác cần được ưu tiên để cải thiện trình duyệt. Một ví dụ điển hình cho việc 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 cách dài giữa lưới con vận chuyển Firefox và Chromium là do bố cục lưới cần được triển khai lại trong công cụ kết xuất mới trước tiên.

Vấn đề

Chúng ta có hai vấn đề ở đây. Đầu tiên là vấn đề về khả năng tương tác, thực tế 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 khi tính năng đó có sẵn ở mọi nơi.

Thứ hai là vấn đề về thông điệp. Làm cách nào để chúng ta có thể xác định rõ những điểm còn thiếu sót trong việc 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 để tìm hiểu xem tính năng đó được hỗ trợ tốt như thế nào?

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

Các trình duyệt đã và đang hợp tác để 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ợ trên một số tính năng, bao gồm cả thuộc tính khoảng cách 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à một số tính năng trong số này đã có sự thay đổi.

Bạn có thể theo dõi tiến trình trên bảng điều khiển Interop 2022.

Nhắn tin

Vấn đề thứ hai là điều mà tôi muốn giúp khi chúng ta nói về các tính năng tại đây 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 thực sự rõ ràng khi bạn đọc nội dung của chúng tôi và để chúng tôi cung cấp các cách thiết thực để giải quyết các vấn đề về dịch vụ hỗ trợ.

Chúng tôi đã ra mắt một số khoá học cơ bản và sẽ còn 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, 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 tính năng mà bạn có thể sử dụng một cách an toàn. Chúng tôi chưa hoàn toàn đạt được mục tiêu đó; tuy nhiên, bạn sẽ bắt đầu thấy một chút thay đổi theo hướng 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. Việc này giúp đảm bảo chúng tôi có tài liệu chất lượng cao trên MDN, cùng với dữ liệu mới nhất về khả năng tương thích của trình duyệt. Sau đó, chúng tôi sử dụng dữ liệu này tại đây trên web.dev để cho thấy 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 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 các bản dùng thử Origin và Developer, thì bạn sẽ ngày càng tìm thấy nội dung đó trên trang web đồng hành của chúng tôi — developer.chrome.com. Nội dung ở đó có thể mang tính 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à 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 thiếu sót hiện có, giúp việc phát triển web trở nên thú vị hơn và ít gây thất vọng hơn.