Bạn không cần JavaScript cho việc đó

Nguyên tắc cốt lõi của phát triển web: nguyên tắc đặc quyền tối thiểu

• Một trong những nguyên tắc cốt lõi của phát triển web, 'nguyên tắc đặc quyền tối thiểu', có nghĩa là chọn ngôn ngữ ở mức thấp nhất phù hợp với mục đích được giao.
• Trong HTML, CSS và JS, HTML được ưu tiên nhất, tiếp theo là CSS, và cuối cùng là JS.
• JS là linh hoạt nhất, nhưng đi kèm các rủi ro như tải thất bại, tiêu tốn thêm tài nguyên và các vấn đề về khả năng truy cập.

Công tắc tùy biến

• Khi cần triển khai công tắc tùy biến thay cho checkbox thông thường theo yêu cầu thiết kế, có thể thực hiện bằng HTML và CSS sử dụng pseudo-class :checked thay vì JS.
• Trình duyệt tự động liên kết phần tử input nằm bên trong label để có thể nhấp được, nhờ đó cung cấp chức năng bật/tắt mà không cần thêm handler JS.

Tự động hoàn thành gốc: Datalist

• Thay vì JavaScript, có thể dùng datalist, một tính năng tích hợp sẵn của trình duyệt, để hiển thị các tùy chọn được tự động lọc khi người dùng nhập.
• Người dùng có thể nhập giá trị mình muốn hoặc nhấp vào biểu tượng dropdown do trình duyệt thêm vào để xem tất cả tùy chọn.

Bộ chọn màu gốc

• Thay vì bộ chọn màu phức tạp dùng JS, có thể sử dụng bộ chọn màu gốc được triển khai chỉ với một dòng HTML.
• Trên các trình duyệt nền tảng Chromium, còn có thêm tính năng cho phép chọn màu ở bất kỳ đâu trên màn hình.

Accordion

• Có thể dùng các phần tử details và summary để ẩn nội dung cho đến khi người dùng cần, qua đó cải thiện cấu trúc của trang.
• Có thể dùng thuộc tính open để mặc định mở một trong các mục accordion.

Modal tương tác

• Có thể dùng phần tử dialog để triển khai modal nhằm cung cấp thông tin cho người dùng hoặc yêu cầu họ nhập dữ liệu.
• Có thể dùng JS để mở modal, còn lại mọi thứ đều được xử lý bằng HTML và CSS gốc.

Kết luận

• Bài viết này cho thấy có thể tạo ra website tốt hơn bằng cách dùng ít JS hơn và tận dụng các khả năng của CSS và HTML.
• Điều quan trọng là phải kiểm thử các cách triển khai mới với sự cân nhắc về khả năng truy cập.

Ý kiến của GN⁺

• Điểm quan trọng nhất của bài viết này là khi phát triển web, có thể cải thiện hiệu năng và khả năng truy cập bằng cách không phụ thuộc vào JS mà tận dụng tối đa các chức năng của HTML và CSS.
• Điều khiến bài viết này hấp dẫn với các lập trình viên web là nó đưa ra những cách mới để triển khai các tính năng vốn được cho là chỉ có thể làm bằng JS theo cách đơn giản và hiệu quả hơn.

[GN⁺]

Ý kiến Hacker News

• Có ý kiến chỉ ra rằng bài viết đã bỏ sót việc JavaScript có khả năng tương thích tốt hơn nên vẫn được dùng trong một số trường hợp nhất định

  • Có thể dùng JavaScript mới thông qua quá trình transpile, nhưng việc polyfill các tính năng còn thiếu của CSS và HTML khó hơn nhiều, thậm chí đôi khi là bất khả thi
  • Khi dùng thuộc tính appearance, MDN đưa ra rất nhiều lưu ý, đặc biệt khuyến nghị phải kiểm thử kỹ lưỡng khi dùng appearance: none
  • datalist không hoạt động trên Firefox Android và chỉ hiện như một ô nhập liệu đơn giản
  • Bộ chọn màu rất thiếu tính tiêu chuẩn nên khó dùng trong phần lớn doanh nghiệp
  • Ngay chính bài viết cũng thừa nhận sự thiếu nhất quán của details và dialog
  • Mong rằng sẽ có ngày các trình duyệt hỗ trợ những tính năng này một cách nhất quán, nhưng cho đến lúc đó thì chủ yếu chỉ dùng chúng trong các dự án cá nhân

• Bày tỏ sự ngạc nhiên khi đến năm 2023 mà vẫn còn gặp các vấn đề trải nghiệm người dùng (UX) phổ biến liên quan đến biểu mẫu và nhập dữ liệu người dùng

  • Không thể hiểu vì sao vấn đề này vẫn chưa được giải quyết
  • Đã từng có nỗ lực giải quyết một lần thông qua XForms, nhưng trình duyệt không triển khai; thay vào đó, các framework component CSS/JS lại cung cấp một bộ phần tử form giới hạn

• Trước đây không biết đến datalist, nhưng có vẻ nó không hoạt động đúng trên Chrome Android

  • Có thể nhìn thấy các tùy chọn từ bàn phím, nhưng đây là lần đầu thấy tính năng này trong UI web trên di động, và không chắc người dùng phổ thông có thể tự hiểu cách sử dụng
  • Trên Firefox Android thì hoàn toàn không được hỗ trợ

• Đề cập đến cuộn mượt gốc với scroll-behavior: smooth, carousel gốc với scroll-snap, và các hoạt ảnh dựa trên cuộn trang

  • Khuyến nghị hạn chế sử dụng các tính năng này và dùng thật thận trọng vì chúng thường có tác dụng phụ tiêu cực

• Dùng <details> có ưu điểm là có thể tìm nội dung bằng Ctrl+F và mở được, trong khi accordion JavaScript thì không thể làm được điều đó

• Có ý kiến cho rằng datalist không phải lựa chọn phù hợp trừ khi là công cụ nội bộ

  • Mặc định của nó không tốt, không thể thay đổi kiểu dáng, và khi bị giới hạn về styling hoặc thay đổi hành vi thì dùng JavaScript thường là lựa chọn duy nhất

• Có ý kiến cho rằng nếu tuân theo tiêu chuẩn HTML thì mọi thứ sẽ nhất quán và có thể dễ dàng áp dụng cho những thứ như khả năng truy cập hay bản địa hóa

  • Chỉ ra vấn đề là các trang web hiện đại tải trang theo cách động đến mức ngay cả nút quay lại cũng không hoạt động

• Có ý kiến cho rằng CSS có thể bị dùng như một công cụ khiến trang web khó đọc hơn

  • Cho rằng nên trả lại quyền kiểm soát mọi khía cạnh của bố cục và typography cho trình duyệt, để người dùng tự quyết định

• Nhắc đến "Rule of Least Power" như một trong những nguyên tắc cốt lõi của phát triển web

  • Một lập trình viên nói rằng chưa từng nghe về nguyên tắc này, đồng thời bày tỏ sự tò mò liệu có các lập trình viên frontend muốn làm mọi thứ đơn giản nhất có thể hay không