CSS Academy · บทเรียน

Visibility เทียบกับ Display None

เรียนรู้ว่าเมื่อใดควรใช้ visibility: hidden แทน display: none และแต่ละแบบส่งผลต่อการจัดวางอย่างไร

บทเรียน 2 จาก 413 ขั้นตอน

Visibility เทียบกับ Display None เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

สามวิธีในการซ่อนองค์ประกอบ

CSS มีวิธีทั่วไปสามวิธีสำหรับซ่อนองค์ประกอบ แต่ละวิธีส่งผลต่อการจัดวาง การเข้าถึง และการโต้ตอบแตกต่างกัน:

display: none
visibility: hidden
opacity: 0

display: none

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

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

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

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

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

<button class="transparent">Invisible but clickable</button>

การเขียนทับ visibility: visible

องค์ประกอบลูกสามารถเขียนทับ visibility: hidden ขององค์ประกอบแม่ได้โดยตั้งค่า visibility: visible ซึ่งไม่สามารถทำได้กับ display: none เพราะองค์ประกอบลูกจะสืบทอดค่าดังกล่าวโดยสมบูรณ์

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

ตารางเปรียบเทียบ

ข้อมูลอ้างอิงอย่างรวดเร็ว:

display: none: ไม่ใช้พื้นที่ ไม่สามารถคลิกได้ และไม่ถูกอ่าน
visibility: hidden: ใช้พื้นที่ ไม่สามารถคลิกได้ และไม่ถูกอ่าน
opacity: 0: ใช้พื้นที่ ยังคงคลิกได้ และอาจถูกอ่าน

การเปลี่ยน visibility

ไม่สามารถทำทรานซิชันให้ display ได้ หากต้องการทำให้องค์ประกอบค่อย ๆ ปรากฏหรือหายไป ให้ใช้ visibility ร่วมกับ opacity:

<div class="dropdown open">Dropdown menu content</div>

การซ่อนที่เข้าถึงได้ด้วย SR-only

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

<button>Save <span class="sr-only">your document now</span></button>

แอตทริบิวต์ hidden กับ CSS

แอตทริบิวต์ hidden ของ HTML จะใช้ display: none ผ่านสไตล์ชีตของตัวแทนผู้ใช้ในเบราว์เซอร์ แอตทริบิวต์นี้เข้าถึงได้และมีความหมายเชิงโครงสร้าง แต่ CSS ที่มีความจำเพาะสูงกว่าสามารถเขียนทับได้

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden จะข้ามการแสดงผลของส่วนที่อยู่นอกหน้าจอ แต่ยังคงโครงสร้างการเข้าถึงและการจัดวางไว้ เป็นเทคนิคเพิ่มประสิทธิภาพสมัยใหม่สำหรับหน้าที่ยาว

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

หากต้องการให้องค์ประกอบยังมองเห็นได้แต่ไม่สามารถโต้ตอบได้ ให้ใช้ pointer-events: none การคลิกและการวางเมาส์จะทะลุผ่านองค์ประกอบนี้ไปยังองค์ประกอบที่อยู่ด้านล่าง

<div class="overlay">Clicks pass through this overlay</div>

ตรวจสอบอย่างรวดเร็ว

เทคนิคใดซ่อนองค์ประกอบโดยยังคงพื้นที่การจัดวางที่องค์ประกอบนั้นใช้ไว้

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

display: none จะนำองค์ประกอบออกจากการจัดวางโดยสิ้นเชิง visibility: hidden จะซ่อนองค์ประกอบแต่ยังคงพื้นที่ไว้ opacity: 0 จะซ่อนองค์ประกอบแต่ยังคงให้โต้ตอบได้ สำหรับการซ่อนที่เข้าถึงได้ ให้ใช้รูปแบบ .sr-only และใช้ visibility ร่วมกับ opacity เพื่อสร้างทรานซิชันแบบค่อย ๆ ปรากฏหรือหายไป

เริ่มต้นได้ฟรี

เรียนรู้ CSS ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Visibility เทียบกับ Display None” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Visibility เทียบกับ Display None” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Visibility เทียบกับ Display None”

เรียนรู้ว่าเมื่อใดควรใช้ visibility: hidden แทน display: none และแต่ละแบบส่งผลต่อการจัดวางอย่างไร คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “Visibility เทียบกับ Display None” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก
Visibility เทียบกับ Display None
Overflow: เลื่อน ตัด และอัตโนมัติ
การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน

← กลับไปที่ CSS Academy