ความแตกต่างระหว่างการมองเห็นคือ: ซ่อนอยู่และแสดง: ไม่มี?

กฎ CSS visibility:hiddenและdisplay:noneทั้งคู่ทำให้องค์ประกอบไม่สามารถมองเห็นได้ คำพ้องความหมายเหล่านี้คืออะไร?

display:noneหมายความว่าแท็กที่เป็นปัญหาจะไม่ปรากฏบนหน้าเว็บเลย (แม้ว่าคุณจะยังสามารถโต้ตอบกับมันผ่านทาง Dom) จะไม่มีการจัดสรรพื้นที่ระหว่างแท็กอื่น

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

ตัวอย่างเช่น:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

แทนที่[style-tag-value]ด้วยdisplay:noneผลลัพธ์ใน:

test |   | test

แทนที่[style-tag-value]ด้วยvisibility:hiddenผลลัพธ์ใน:

test |                        | test

พวกเขาไม่ใช่คำพ้องความหมาย

display:none ลบองค์ประกอบออกจากโฟลว์ปกติของหน้าซึ่งอนุญาตให้องค์ประกอบอื่นเติม

visibility:hidden ปล่อยให้องค์ประกอบในการไหลปกติของหน้าดังกล่าวที่ยังคงใช้พื้นที่

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

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

สิ่งหนึ่งที่ควรค่าแก่การเพิ่มถึงแม้จะไม่ได้ถามก็คือมีตัวเลือกที่สามในการทำให้วัตถุโปร่งใส พิจารณา:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(อย่าลืมคลิกปุ่ม "เรียกใช้ข้อมูลโค้ด" ด้านบนเพื่อดูผลลัพธ์)

ความแตกต่างระหว่าง 1 และ 2 ได้รับการชี้ให้เห็นแล้ว (กล่าวคือ 2 ยังคงใช้พื้นที่) อย่างไรก็ตามมีความแตกต่างระหว่าง 2 และ 3: ในกรณีที่ 3 เมาส์จะยังคงสลับเป็นมือเมื่อวางเมาส์เหนือลิงก์และผู้ใช้ยังคงสามารถคลิกที่ลิงก์และเหตุการณ์ Javascript จะยังคงอยู่บนลิงก์ โดยปกติแล้วนี่ไม่ใช่พฤติกรรมที่คุณต้องการ

ข้อแตกต่างคือถ้าคุณเลือกข้อความจากนั้นคัดลอก / วางเป็นข้อความธรรมดาคุณจะได้รับสิ่งต่อไปนี้:

1st link.
2nd  link.
3rd unseen link.

ในกรณีที่ 3 ข้อความจะถูกคัดลอก บางทีนี่อาจจะมีประโยชน์สำหรับการพิมพ์ลายน้ำบางประเภทหรือถ้าคุณต้องการซ่อนประกาศลิขสิทธิ์ที่จะปรากฏขึ้นหากผู้ใช้คัดลอก / วางเนื้อหาของคุณอย่างไม่ระมัดระวัง

display:none เอาองค์ประกอบจากผังเค้าโครง

visibility:hidden ซ่อนมัน แต่ออกจากพื้นที่

มีความแตกต่างใหญ่เมื่อมันมาถึงโหนดลูก ตัวอย่างเช่น: ถ้าคุณมี div parent และ div child ซ้อนกัน ดังนั้นถ้าคุณเขียนดังนี้:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

ในกรณีนี้จะไม่มีการหารใด ๆ ปรากฏขึ้น แต่ถ้าคุณเขียนแบบนี้:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

จากนั้นลูกย่อยจะมองเห็นได้ในขณะที่พ่อแม่จะไม่ปรากฏ

มันไม่ได้เป็นคำพ้องความหมาย - display: noneลบองค์ประกอบออกจากโฟลว์ของหน้าและส่วนที่เหลือของโฟลว์หน้าราวกับว่ามันไม่ได้อยู่ที่นั่น

visibility: hidden ซ่อนอิลิเมนต์จากมุมมอง แต่ไม่ใช่โฟลว์หน้าโดยเว้นที่ไว้ให้มันบนหน้า

display: none ลบองค์ประกอบออกจากหน้าทั้งหมดและหน้าจะถูกสร้างขึ้นราวกับว่าองค์ประกอบไม่ได้อยู่ที่นั่นเลย

Visibility: hidden เว้นช่องว่างในผังเอกสารแม้ว่าคุณจะไม่เห็นอีกต่อไป

สิ่งนี้อาจหรือไม่อาจสร้างความแตกต่างใหญ่ขึ้นอยู่กับสิ่งที่คุณกำลังทำ

ด้วยvisibility:hiddenวัตถุที่ยังคงใช้ความสูงในแนวตั้งบนหน้า ด้วยdisplay:noneมันจะถูกลบออกอย่างสมบูรณ์ หากคุณมีข้อความอยู่ใต้ภาพและคุณทำเช่นdisplay:noneนั้นข้อความนั้นจะเลื่อนขึ้นเพื่อเติมเต็มพื้นที่ที่เป็นภาพ หากคุณเปิดเผย: ซ่อนข้อความจะยังคงอยู่ในตำแหน่งเดิม

display:noneจะซ่อนองค์ประกอบและยุบพื้นที่ที่ถูกยึดขณะที่visibility:hiddenจะซ่อนองค์ประกอบและรักษาพื้นที่องค์ประกอบ แสดงผล: ไม่มีผลกระทบต่อคุณสมบัติบางอย่างที่มีให้จาก javascript ใน IE และ Safari รุ่นเก่า

นอกเหนือจากคำตอบอื่น ๆ ทั้งหมดแล้วสิ่งที่สำคัญสำหรับ IE8 คือ: หากคุณใช้display:noneและพยายามรับความกว้างหรือความสูงขององค์ประกอบ IE8 จะคืนค่า 0 (ขณะที่เบราว์เซอร์อื่นจะส่งคืนขนาดจริง) IE8 visibility:hiddenส่งกลับความกว้างที่ถูกต้องหรือความสูงเฉพาะสำหรับ

visibility:hiddenรักษาพื้นที่; display:noneไม่

display: none; 

มันจะไม่สามารถใช้ได้ในหน้านี้และไม่ได้ครอบครองพื้นที่ใด ๆ

visibility: hidden; 

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

visibility: hiddenรักษาพื้นที่ในขณะที่display: noneไม่รักษาพื้นที่

แสดงตัวอย่าง: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

ตัวอย่างการซ่อนการมองเห็น: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

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

ตัวอย่าง:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

ดูรายละเอียด

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

display:none จะไม่สามารถใช้ได้ในหน้านี้และจะไม่ใช้พื้นที่ว่างใด ๆ

ความแตกต่างอีกอย่างหนึ่งก็คือมันvisibility:hiddenใช้ได้กับเบราว์เซอร์ที่เก่ามาก ๆ และdisplay:noneไม่ได้:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

ความแตกต่างเหนือกว่ารูปแบบและสะท้อนให้เห็นว่าองค์ประกอบทำงานอย่างไรเมื่อจัดการกับ JavaScript

ผลกระทบและผลข้างเคียงของdisplay: none:

• องค์ประกอบเป้าหมายถูกนำออกจากโฟลว์เอกสาร (ไม่มีผลกับเลย์เอาต์ขององค์ประกอบอื่น ๆ );
• ผู้สืบทอดทั้งหมดจะได้รับผลกระทบ (ไม่แสดงอย่างใดอย่างหนึ่งและไม่สามารถ“ เอาออก” ของการสืบทอดนี้);
• วัดไม่สามารถที่จะทำสำหรับองค์ประกอบเป้าหมายหรือสำหรับลูกหลาน - พวกเขาจะไม่ได้แสดงที่ทุกคนจึงของพวกเขาclientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle()ทั้งหมดกลับมา0s

ผลกระทบและผลข้างเคียงของvisibility: hidden:

• องค์ประกอบเป้าหมายถูกซ่อนจากมุมมอง แต่ไม่ถูกนำออกจากโฟลว์และส่งผลกระทบต่อโครงร่างโดยใช้พื้นที่ปกติ
• innerText(แต่ไม่ใช่innerHTML) ขององค์ประกอบเป้าหมายและการสืบทอดจะส่งคืนสตริงว่าง

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

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

display: none;และvisibility: hidden;อาจไม่สามารถอ่านได้โดยซอฟต์แวร์ตัวอ่านหน้าจอทั้งหมด โปรดทราบว่าผู้ใช้ที่มีความบกพร่องทางสายตาจะได้สัมผัสกับอะไร

คำถามนี้ยังถามเกี่ยวกับคำพ้องความหมาย text-indent: -9999px;เป็นอีกหนึ่งที่เทียบเท่าคร่าว ๆ ความแตกต่างที่สำคัญกับtext-indentคือมันมักจะอ่านโดยโปรแกรมอ่านหน้าจอ มันอาจเป็นประสบการณ์ที่เลวร้ายเนื่องจากผู้ใช้ยังคงสามารถแท็บไปยังลิงก์

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

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

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

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

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/