คุณสมบัติ CSS: การแสดงผลเทียบกับการมองเห็น

อะไรคือความแตกต่างระหว่างคุณสมบัติการแสดงผลกับคุณสมบัติการมองเห็น?

visibilityคุณสมบัติเพียงบอกเบราว์เซอร์ว่าจะแสดงองค์ประกอบหรือไม่ สามารถมองเห็นได้ ( visible- คุณสามารถมองเห็นได้) หรือมองไม่เห็น ( hidden- คุณมองไม่เห็น)

displayคุณสมบัติบอกเบราว์เซอร์วิธีการวาดและแสดงองค์ประกอบถ้าที่ทั้งหมด - ไม่ว่าจะควรจะแสดงเป็นinlineองค์ประกอบ (คือมันไหลกับข้อความและองค์ประกอบอื่น ๆ แบบอินไลน์) หรือblockองค์ประกอบระดับพื้นดิน (คือมันมีความสูงและความกว้างคุณสมบัติที่ คุณสามารถตั้งค่าก็ลอย ฯลฯ ) หรือinline-block(คือมันทำหน้าที่เหมือนกล่องบล็อก แต่จะวางแบบอินไลน์แทน) และบางคนอื่น ๆ ( list-item, table, table-row, table-cell, flexฯลฯ )

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

กล่าวอีกนัยหนึ่งหมายถึงองค์ประกอบdisplayที่ไม่มีnoneผลต่อการไหลเวียนขององค์ประกอบในหน้าเว็บไม่ว่าจะมองเห็นได้หรือไม่ก็ตาม กล่องที่อยู่รอบ ๆ องค์ประกอบที่มีdisplay: noneจะทำงานราวกับว่าองค์ประกอบนั้นไม่เคยอยู่ที่นั่น (แม้ว่าจะยังคงอยู่ใน DOM ก็ตาม)

ทัศนวิสัย: ซ่อนอยู่;

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

แสดง: ไม่มี;

• จะทำให้องค์ประกอบไม่เข้าร่วมในโฟลว์ / เลย์เอาต์
• สามารถ (ขึ้นอยู่กับเบราว์เซอร์ที่ใช้) ฆ่าภาพยนตร์ Flash และ iframe (ซึ่งจะรีสตาร์ท / โหลดซ้ำเมื่อแสดงอีกครั้ง) แม้ว่าคุณจะสามารถป้องกันไม่ให้สิ่งนี้เกิดขึ้นกับ iframe ได้
• องค์ประกอบจะไม่ใช้พื้นที่ใด ๆ เพื่อวัตถุประสงค์ในการจัดวางดูเหมือนว่าจะไม่มีอยู่จริง
• จะทำให้เบราว์เซอร์ / อุปกรณ์บางอย่าง (เช่น iPad) ใช้หน่วยความจำที่ใช้โดยองค์ประกอบนั้น ๆ โดยตรงทำให้เกิดอาการสะอึกเล็ก ๆ หากคุณสลับระหว่างไม่มีและค่าอื่นในระหว่างการเคลื่อนไหว

หมายเหตุพิเศษ:

• รูปภาพในเนื้อหาที่ซ่อนอยู่:ในเบราว์เซอร์ยอดนิยมทั้งหมดยังคงโหลดรูปภาพแม้ว่าจะอยู่ในองค์ประกอบใดก็ตามที่มีการมองเห็น: ซ่อนอยู่ หรือแสดง: ไม่มี;
• แบบอักษรในเนื้อหาที่ซ่อนอยู่:เบราว์เซอร์ webkit (Chrome / Safari) อาจทำให้การโหลดแบบอักษรที่กำหนดเองล่าช้าซึ่งใช้เฉพาะในองค์ประกอบที่ซ่อนอยู่รวมถึงผ่านการมองเห็นหรือการแสดงผล ซึ่งอาจทำให้คุณต้องวัดองค์ประกอบที่ยังคงใช้แบบอักษรสำรองจนกว่าจะโหลดแบบอักษรที่กำหนดเอง

display: ไม่มีการนำองค์ประกอบออกจากโฟลว์ของ html ในขณะที่ visibility: hidden ไม่ได้

แสดง: ไม่มี; จะลบสไตล์ภาพ / พื้นที่ทางกายภาพขององค์ประกอบ DOM ออกจาก DOM ในขณะที่การมองเห็น: ซ่อน; จะไม่ลบองค์ประกอบ แต่เพียงแค่ซ่อนไว้ ดังนั้น div ที่ใช้พื้นที่แนวตั้ง 300px ใน DOM ของคุณจะยังคงใช้ความกว้างแนวตั้ง 300px เมื่อตั้งค่าเป็น visibility: hidden; แต่เมื่อตั้งค่าให้แสดง: ไม่มี; รูปแบบภาพและพื้นที่ว่างถูกซ่อนไว้และจากนั้นพื้นที่ดังกล่าวก็ "ว่าง" ขึ้นโดยขาดคำที่ดีกว่า

[แก้ไข] - ฉันเขียนข้อความข้างต้นไปสักพักแล้วและไม่ว่าฉันจะมีความรู้ไม่เพียงพอหรือมีวันที่เลวร้ายฉันก็ไม่รู้ แต่ความจริงก็คือองค์ประกอบนั้นจะไม่ถูกลบออกจากลำดับชั้นของ DOM 'สไตล์' การแสดงระดับบล็อกทั้งหมดจะถูก 'ซ่อน' อย่างสมบูรณ์เมื่อใช้การแสดงผล: ไม่มีในขณะที่การมองเห็น: ซ่อน; องค์ประกอบนั้นถูกซ่อนไว้ แต่ยังคงใช้พื้นที่ภาพใน DOM ฉันหวังว่านี่จะช่วยให้ทุกอย่างกระจ่างขึ้น