Thu hẹp khoảng cách

Giúp việc tạo ứng dụng trên web trở nên dễ dàng hơn.

Rachel Andrew

Khi trao đổi với các nhà phát triển, dù theo cách riêng hay qua các bài khảo sát như Trạng thái CSS, chúng tôi cũng nhiều lần nhận được những câu trả lời tương tự. Các 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 nhiều trình duyệt và cũng rất khó để biết khi nào các tính năng mới thú vị là an toàn để sử dụng.

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ột trong vùng chứa nhiều cột. Mặc dù chúng ta đã có column-gap trong nhiều cột từ lâu, thuộc tính này lần đầu 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 đó, phương thức này cũng được chỉ định để hoạt động trong bố cục linh hoạt. Việc đổi tên có nghĩa là chúng ta không có nhiều thuộc tính có cùng chức năng.

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

Firefox đã chuyển tài sản này cho bố cục linh hoạt vào tháng 10 năm 2018. Tệp 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. Như vậy tức là chúng ta có thể sử dụng gap một cách an toàn đến 2 năm và 6 tháng. Trên thực tế, đối với hầu hết các nhà phát triển, thời gian chờ sẽ 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 đã gây nhiều vấn đề hơn vì chúng ta không thể sử dụng truy vấn tính năng để phát hiện 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 truy cập vào một trình duyệt, mọi người sẽ bắt đầu nói về tính năng đó và chia sẻ các bản minh hoạ. Quá trình này thường bắt đầu rất lâu trước khi tính năng có trong bất kỳ trình duyệt ổn định nào. Điều này có thể khiến nhà phát triển bối rối hoặc ít nhất là gây khó chịu. Liên tục, những tính năng mới nổi bật được nhắc đến ở khắp mọi nơi, và rồi bạn phát hiện ra mình không thể dùng được chúng vì không được hỗ trợ.

Tại sao lại có thiếu sót trong hoạt động hỗ trợ?

Đây không phải là bài đăng chỉ vì một trình duyệt bị chậm. Nếu xem qua các tính năng khác nhau của nền tảng, bạn sẽ thấy rằng mỗi trình duyệt lại có những tính năng riêng.

Hầu hết các tính năng sẽ được thử nghiệm trong một trình duyệt. Ví dụ: thông số kỹ thuật của bố cục lưới lần đầu tiên do Microsoft tạo ra 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 ra cách hoạt động của lưới con, do đó tính năng này đã xuất hiện đầu tiên trong Firefox. Chúng tôi thấy Safari đang dẫn đầu một số chức năng màu mới thú vị.

Mặc dù một trình duyệt có thể dẫn đầu việc tạo nguyên mẫu, nhưng người đạ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 lại thảo luận về các tính năng của CSS. Điều rất quan trọng là một tính năng có thể được triển khai trên tất cả các trình duyệt và tính năng đó không được thiết kế theo cách khiến không thể triển khai trong một trình duyệt. Điều đó sẽ dẫn đến khoảng cách vĩnh viễn trong việc hỗ trợ và thiếu áp dụng tính năng này.

Tuy nhiên, khi nói đến việc 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ể dùng cho trình duyệt đó. Và, đôi khi có một số vấn đề bị trì hoãn phía sau các 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ụ điển hình cho yếu tố này là công việc RenderingNG trong Chromium. Việc này đã mở đường cho việc triển khai lưới con; tuy nhiên, khoảng cách lớn giữa lưới con truyền tải của Firefox và Chromium là do nhu cầu triển khai lại bố cục lưới trong công cụ kết xuất mới trước tiên.

Các vấn đề

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

Thứ hai là vấn đề về nhắn tin. Làm cách nào để chúng tôi có thể xác định rõ những thiếu sót trong hoạt động 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 sản phẩm để xác định xem nội dung đó có được hỗ trợ không?

Khả năng tương thích

Các trình duyệt đã và đ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ề hỗ trợ đối với 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, hoạt động Interop 2022 tập trung vào 15 tính năng. Một số tính năng đã có chuyển động.

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

Nhắn tin

Vấn đề thứ hai là vấn đề mà tôi muốn hỗ trợ 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 thực sự rõ ràng khi bạn đọc nội dung cũng như để chúng tôi có thể đưa ra các cách thiết thực để giải quyết vấn đề cần hỗ trợ.

Chúng tôi đã ra mắt một số khoá học cơ bản và sẽ sớm ra mắt nhiều khoá học khác. Những khoá học này giúp bạn tìm hiểu cách tạo ứng dụng cho web hiện đại bằng các công nghệ nền tảng web cốt lõi. Xem:

• Tìm hiểu về CSS
• Tìm hiểu về Biểu mẫu
• Tìm hiểu về thiết kế
• Tìm hiểu về PWA

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 chỉnh; tuy nhiên, bạn sẽ bắt đầu thấy một chút thay đổi theo hướng thiết thực trong những tháng tới.

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

Nếu bạn muốn biết thêm về tầm nhìn của Chrome dành cho web, những điều chúng tôi đang thử nghiệm trong Bản dùng thử theo nguyên gốc và bản dùng thử dành cho nhà phát triển thì bạn sẽ ngày càng tìm thấy nội dung đó trên trang web tương tự của chúng tôi—developer.chrome.com. Nội dung ở đó có thể đang trong giai đoạn thử nghiệm hoặc chỉ được hỗ trợ trong Chrome ngay bây giờ. Tuy nhiên, chúng tôi muốn 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ị cho web ngay bây giờ. Chúng tôi hy vọng có thể giúp bạn nhanh chóng cung cấp các tính năng chính, đồng thời hiểu rõ những thiếu sót hiện có, giúp cho quá trình phát triển web trở nên thú vị và ít phiền toái hơn.

Ảnh của Cristofer Maximilian.