css display nonoe
CSS display: none is a command in CSS that hides an HTML element completely. The element is deleted from the page, not visible, and no longer consumes space on the layout. Other elements around it move in place. Unlike visibility: hidden that simply makes the element invisible, but still consumes the same space on the page.
Description of display: none
Completely hidden:
An element will disappear from the page as if it did not exist.
Not eating space:
The space previously used by that element will collapse, and other elements will reposition in its place.
Cannot interact:
Elements hidden with display: none will not be clickable or interactive.
Not accessible:
Screen readers and search engines will not be able to access or read text in elements hidden with display: none.
Remove from DOM:
That element will be temporarily removed from the Document Structure (DOM).
Difference with visibility: hidden
Display: none: Hide and remove elements from the layout (eat free space)
Vision: hidden: Hide the element but retain the empty space that the element once occupied.
Example of use
Use when you want to hide elements that are not required at the time, such as an inactive menu or a button displayed according to certain conditions.
Suitable for permanently hiding some content away, or when requiring the layout of a web page to change according to hiding / displaying elements.
เวลาเจอคำว่า css display none หรือ display:none หลายคนมักใช้เพื่อ “ซ่อน” ของบนหน้าเว็บ แต่สิ่งที่ควรรู้เพิ่มคือมันมีผลกับทั้งเลย์เอาต์ การคลิก และการเข้าถึง (accessibility) ด้วย จากที่ลองทำหน้าเว็บแบบปุ่มคลิกเพื่อให้เอกสาร/รูป “หายไป” (แนว ๆ คลิ๊กเพื่อให้หน้าเอกสารหายไป โดยใช้ display:none) จะเห็นพฤติกรรมชัดมากว่าเมื่อซ่อนแล้ว ส่วนอื่นจะขยับมาแทนทันที เพราะมันไม่กินพื้นที่เลย 1) display: none เหมาะใช้ตอนไหน - ซ่อน/แสดงเมนูมือถือ (hamburger menu) ที่ต้องการให้หน้าเว็บยุบพื้นที่กลับมาเมื่อปิดเมนู - ซ่อนปุ่มหรือข้อความตามเงื่อนไข เช่น ผู้ใช้ยังไม่กรอกข้อมูลครบก็ไม่ให้แสดงปุ่มส่ง - ซ่อนส่วนที่ไม่จำเป็นในบางโหมด เช่น โหมดพิมพ์ (print) หรือโหมดอ่านสบายตา 2) จุดต่างที่มักพลาด: display:none vs visibility:hidden - display:none = หายจากหน้า + ไม่เหลือช่องว่าง + คลิกไม่ได้ - visibility:hidden = มองไม่เห็นแต่ “ยังจองพื้นที่” ทำให้มีช่องว่างแปลก ๆ อยู่ ถ้าคุณซ่อนรูป/การ์ดแล้วอยากให้การ์ดอื่นเรียงชิดขึ้นมา ให้เลือก display:none แต่ถ้าต้องการคงโครงร่างเดิมไว้ (กันหน้าเว็บกระพริบ/ยุบ) ค่อยใช้ visibility:hidden 3) ตัวอย่างแนวทางทำปุ่มคลิกซ่อน/โชว์ (ไอเดีย) - เริ่มต้นใส่ class ที่ซ่อนไว้: .is-hidden { display: none; } - แล้วใช้ JavaScript สลับ class เวลากดปุ่ม (toggle) ทริคเล็ก ๆ จากประสบการณ์: ตอนสลับให้แสดงกลับมา อย่าลืมว่าบาง element ไม่ได้ควรเป็น block เสมอ เช่น span ควรเป็น inline ดังนั้นการ “เอา display:none ออก” ด้วยการลบ class จะปลอดภัยกว่าการไป set display:block ทับแบบตายตัว 4) เรื่องการเข้าถึง (สำคัญกับผู้ใช้จริง) เนื้อหาที่ถูก display:none จะไม่ถูกอ่านโดยโปรแกรมอ่านหน้าจอในหลายกรณี ดังนั้นถ้าคุณซ่อนข้อมูลสำคัญ เช่น ข้อความแจ้งเตือน ให้คิดเพิ่มว่าควรใช้วิธีอื่นหรือเพิ่ม aria-* ช่วย เพื่อให้ผู้ใช้ทุกกลุ่มใช้งานได้ 5) ทริคสำหรับ debug เวลามัน “หายไป” แบบงง ๆ ถ้า element ไม่แสดง ให้เปิด DevTools แล้วเช็กว่าโดน rule ไหนสั่ง display:none อยู่หรือไม่ (บางทีโดนสืบทอดจาก class/เงื่อนไข responsive) และลองปิด/เปิด rule ในแท็บ Styles จะเจอสาเหตุไวขึ้น สรุปคือ display:none เป็นเครื่องมือที่แรงและชัด—ซ่อนแล้วหายจริง ไม่กินพื้นที่ เหมาะกับ UI ที่ต้องยุบพื้นที่ แต่ถ้าต้องคงช่องว่างหรือมีเหตุผลด้านการเข้าถึง อาจต้องพิจารณา visibility:hidden หรือเทคนิคอื่นร่วมด้วย
