Các nhà phát triển web đang gặp phải những thách thức đáng kể về tương thích trình duyệt với tính năng select element tùy chỉnh mới được giới thiệu của Chrome. Công nghệ thử nghiệm này cho phép các nhà phát triển tạo ra các menu dropdown được cách điệu hóa cao, vượt xa các phần tử HTML select truyền thống, nhưng sự hỗ trợ trình duyệt hạn chế đang gây ra sự thất vọng trong cộng đồng phát triển.
Tính năng select tùy chỉnh đại diện cho một bước tiến lớn trong các điều khiển biểu mẫu web. Nó cho phép các nhà phát triển tạo ra các giao diện dropdown phức tạp, tương tác với kiểu dáng tùy chỉnh, scroll snapping, và thậm chí các yếu tố gamification lấy cảm hứng từ giao diện trò chơi điện tử. Tuy nhiên, việc triển khai hiện tại của công nghệ này cho thấy sự chia rẽ rõ rệt trong hỗ trợ trình duyệt đang ảnh hưởng đến việc triển khai thực tế.
Hỗ trợ trình duyệt tạo ra những khó khăn trong phát triển
Vấn đề cấp bách nhất mà các nhà phát triển đang đối mặt là tính khả dụng độc quyền của tính năng này trong các trình duyệt dựa trên Chrome. Người dùng cố gắng xem các select element nâng cao này trong Firefox và Safari chỉ thấy các menu dropdown tiêu chuẩn, hoàn toàn bỏ lỡ kiểu dáng tùy chỉnh và các tính năng tương tác dự định. Sự không nhất quán của trình duyệt này buộc các nhà phát triển phải lựa chọn giữa chức năng tiên tiến và khả năng truy cập phổ quát.
Tình huống này đã thúc đẩy các cuộc thảo luận về các chiến lược progressive enhancement. Mặc dù tính năng này về mặt kỹ thuật hoạt động trên các trình duyệt bằng cách fallback về hành vi select tiêu chuẩn, sự khác biệt đáng kể trong trải nghiệm người dùng đặt ra câu hỏi về thời điểm và cách thức triển khai các tính năng thử nghiệm như vậy trong môi trường sản xuất.
Tình trạng tương thích trình duyệt:
- Chrome : Hỗ trợ đầy đủ với các phần tử select có thể tùy chỉnh
- Firefox : Quay về select tiêu chuẩn ( Mozilla tích cực với đặc tả kỹ thuật)
- Safari : Quay về select tiêu chuẩn (không có lập trường chính thức)
Thách thức triển khai kỹ thuật
Ngoài tương thích trình duyệt, các nhà phát triển đang xác định các vấn đề kỹ thuật cụ thể cần được giải quyết. Phản hồi từ cộng đồng nêu bật các vấn đề với phương pháp triển khai hiện tại, đặc biệt là xung quanh các phương thức xử lý input. Hệ thống sự kiện dựa trên chuột hiện tại đang bị chỉ trích là lỗi thời so với các pointer events hiện đại, cung cấp hỗ trợ tốt hơn cho các input touch, pen và chuột trong khi xử lý các trường hợp đặc biệt hiệu quả hơn.
Các vấn đề về hiệu suất cũng đang nổi lên, đặc biệt là xung quanh chức năng scroll snapping. Các nhà phát triển báo cáo về sự chậm trễ trong cập nhật trạng thái UI, chẳng hạn như các nút điều hướng không phản ánh ngay lập tức khi người dùng đến cuối danh sách có thể cuộn. Những vấn đề về thời gian này tạo ra trải nghiệm người dùng khó xử, làm giảm bớt các giao diện được đánh bóng mà tính năng này nhằm mục đích kích hoạt.
Các Vấn Đề Kỹ Thuật Chính Đã Xác Định:
- Các sự kiện chuột nên được thay thế bằng các sự kiện con trỏ để xử lý đầu vào tốt hơn
- Cập nhật trạng thái giao diện người dùng bị trễ khi đạt đến ranh giới cuộn
- API hạn chế cho việc điều khiển snap cuộn theo chương trình
- Cần các phép tính CSS phức tạp để hoạt động đúng cách
 |
|---|
| Hình ảnh minh họa một menu lựa chọn tương tự như các giao diện dropdown có thể tùy chỉnh được thảo luận, làm nổi bật yếu tố thiết kế giao diện đang được xem xét kỹ thuật |
Triển vọng tương lai và phát triển tiêu chuẩn
Mặc dù có những hạn chế hiện tại, vẫn có những dấu hiệu tích cực cho việc áp dụng rộng rãi hơn. Mozilla đã bày tỏ sự hỗ trợ cho đặc tả này, cho thấy việc triển khai Firefox có thể sắp tới. Sự ủng hộ tiêu chuẩn này cho thấy tính năng cuối cùng có thể đạt được khả năng tương thích đa trình duyệt cần thiết cho việc sử dụng rộng rãi.
Cộng đồng phát triển đang tích cực làm việc để giải quyết những thiếu sót hiện tại trong khi đặc tả tiếp tục phát triển. Các cuộc thảo luận xung quanh các tính năng API còn thiếu, chẳng hạn như điều khiển scroll snapping theo chương trình, cho thấy việc tinh chỉnh liên tục các khả năng của công nghệ.
Hiện tại, các nhà phát triển quan tâm đến việc sử dụng các select element tùy chỉnh phải cân nhắc cẩn thận lợi ích của chức năng nâng cao so với thực tế của sự hỗ trợ trình duyệt hạn chế và các ràng buộc kỹ thuật.
Tham khảo: The customizable select - Part four: Scroll snapping, state queries, monster hunt