ดั้งเดิมกับกำหนดเอง: เมื่อใดควรใช้องค์ประกอบจริง

สำหรับตัวควบคุมใด ๆ คุณมีทางเลือกหนึ่ง ใช้องค์ประกอบ HTML ดั้งเดิม หรือสร้างองค์ประกอบแบบกำหนดเองขึ้นเอง โดยแทบทุกครั้งองค์ประกอบดั้งเดิมจะดีกว่า

buttonดั้งเดิมรับโฟกัส คลิกได้ด้วยเมาส์ แป้นพิมพ์ และการสัมผัส และประกาศได้อย่างถูกต้อง คุณเขียนเพียงแท็กเดียว แล้วแพลตฟอร์มจัดการส่วนที่เหลือ

ตกแต่ง spanให้ดูเหมือนปุ่ม แต่มันก็ยังไม่มีบทบาท ไม่มีโฟกัส และไม่รองรับแป้นพิมพ์ มันหลอกได้เพียงสายตาเท่านั้น

หากต้องการให้ตัวควบคุมแบบกำหนดเองทำงานได้ คุณต้องเพิ่ม บทบาท, tabindex และตัวจัดการปุ่มสำหรับ Enter กับ Space ซึ่งเป็นโค้ดจำนวนมากเพื่อเลียนแบบแท็กเพียงแท็กเดียว

แม้แต่ตัวควบคุมแบบกำหนดเองที่สร้างอย่างรอบคอบก็ยังพลาดกรณีปลายขอบ เช่น วงแหวนโฟกัส สถานะปิดใช้งาน และการสัมผัส ส่วน องค์ประกอบแบบเนทีฟจัดการสิ่งเหล่านี้ไว้แล้วทั้งหมด

หลักการนี้ใช้ได้กับทั้งแพลตฟอร์ม ไม่ว่าจะเป็น select ช่องทำเครื่องหมาย หรือ details จริง ๆ ก็มีพฤติกรรมและการเข้าถึงได้ที่การเลียนแบบด้วย div ไม่อาจทำได้เทียบเท่าอย่างสมบูรณ์

ตัวควบคุมฟอร์มแบบเนทีฟจะส่งข้อมูลไปพร้อมกับ form ตรวจสอบความถูกต้องด้วยตัวเอง และจับคู่กับป้ายกำกับโดยอัตโนมัติ การสร้างสิ่งเหล่านี้ขึ้นใหม่เองแทบไม่คุ้มค่า

เลือกใช้แบบ กำหนดเอง เฉพาะเมื่อไม่มีองค์ประกอบเนทีฟสำหรับรูปแบบนั้น เช่น ส่วนติดต่อแบบแท็บหรือโครงสร้างต้นไม้ จากนั้นทำตามรูปแบบการสร้างที่ผ่านการพิสูจน์แล้วอย่างรอบคอบ

กังวลว่าปุ่มจริงจะดูธรรมดาหรือไม่ คุณสามารถ จัดรูปแบบองค์ประกอบเนทีฟอย่างเต็มที่ด้วย CSS ได้ คงความหมายเชิงโครงสร้างไว้ แล้วเปลี่ยนรูปลักษณ์เป็นแบบใดก็ได้ตามต้องการ

การเลือกใช้ องค์ประกอบจริงทำให้มี JavaScript น้อยลง ข้อผิดพลาดน้อยลง และได้ตัวควบคุมที่ยังทำงานได้เมื่อเบราว์เซอร์และเทคโนโลยีสิ่งอำนวยความสะดวกได้รับการอัปเดต โดยไม่ต้องทำอะไรเพิ่ม

กำหนดให้เป็นแนวทางเริ่มต้นของคุณ: ใช้เนทีฟเป็น อันดับแรก และใช้แบบกำหนดเองเมื่อเป็นทางเลือกสุดท้ายเท่านั้น แพลตฟอร์มเว็บมอบความช่วยเหลือด้านการเข้าถึงได้อย่างมหาศาล ดังนั้นปล่อยให้มันทำงานแทนคุณ

เลือกใช้ เนทีฟ ก่อนเสมอ: ปุ่มหรือช่องป้อนข้อมูลจริงมีโฟกัส ปุ่มกด และความหมายเชิงโครงสร้างให้โดยไม่ต้องเขียนเพิ่ม ใช้แบบกำหนดเองเฉพาะเมื่อไม่มีองค์ประกอบที่เหมาะสม และจัดรูปแบบองค์ประกอบเนทีฟได้อย่างอิสระ 🎉