อาจมีบางครั้งที่คุณทำงานเกี่ยวกับการพัฒนาหน้าเว็บซึ่งคุณต้อง "ซ่อน" เฉพาะบางส่วนของรายการด้วยเหตุผลหนึ่งหรืออีกอย่างหนึ่ง แน่นอนคุณสามารถลบรายการในคำถามจากมาร์กอัป HTML ได้ แต่ถ้าคุณต้องการให้อยู่ในโค้ด แต่จะไม่แสดงบนหน้าจอเบราเซอร์ด้วยเหตุผลใดก็ตาม (และเราจะตรวจสอบเหตุผลที่ ทำอย่างนี้สักครู่) หากต้องการเก็บองค์ประกอบไว้ใน HTML แต่ซ่อนไว้สำหรับการแสดงผลคุณจะหันไปหา CSS
สองวิธีที่พบมากที่สุดในการซ่อนองค์ประกอบที่อยู่ใน HTML จะใช้คุณสมบัติ CSS สำหรับ "display" หรือ "visibility" ได้อย่างรวดเร็วก่อนทั้งสองคุณสมบัติอาจดูเหมือนจะทำส่วนใหญ่สิ่งเดียวกัน แต่พวกเขาแต่ละคนมีความแตกต่างที่แตกต่างกันที่คุณควรจะตระหนักถึง ลองมาดูความแตกต่างระหว่างจอแสดงผล: none และ visibility: hidden
ความชัดเจน
ใช้คู่การมองเห็น / คุณสมบัติ CSS: ซ่อนซ่อนองค์ประกอบจากเบราเซอร์ อย่างไรก็ตามองค์ประกอบที่ซ่อนไว้ยังใช้พื้นที่ในการจัดวาง เหมือนกับว่าคุณได้ทำให้องค์ประกอบนี้มองไม่เห็น แต่ก็ยังคงอยู่ในสถานที่และใช้เนื้อที่ว่างที่จะได้รับทิ้งไว้เพียงลำพัง
ถ้าคุณใส่ DIV ในหน้าของคุณและใช้ CSS เพื่อให้มิติข้อมูลใช้เวลา 100x100 พิกเซลการเปิดเผยข้อมูล: คุณสมบัติที่ซ่อนไว้จะทำให้ DIV ไม่แสดงบนหน้าจอ แต่ข้อความต่อไปนี้จะทำเหมือนว่ามันยังคงอยู่ที่นั่นโดยเคารพ ระยะห่าง 100x100
สุจริตคุณสมบัติการมองเห็นไม่ใช่สิ่งที่เราใช้บ่อยๆและไม่ได้เป็นของตัวเอง ถ้าเราใช้คุณสมบัติ CSS อื่น ๆ เช่นการวางตำแหน่งเพื่อให้ได้รูปแบบที่เราต้องการสำหรับองค์ประกอบบางอย่างเราสามารถใช้การเปิดเผยเพื่อซ่อนรายการนั้นในตอนเริ่มต้นเท่านั้นเพื่อ "เปิด" อีกครั้งเมื่อเลื่อนเมาส์ไปวางไว้ นี่เป็นหนึ่งในการใช้ประโยชน์จากสถานที่นี้ได้ แต่ก็ไม่ใช่สิ่งที่เรานำมาใช้กับความถี่ใด ๆ
แสดง
ซึ่งแตกต่างจากคุณสมบัติการเปิดเผยซึ่งจะทำให้องค์ประกอบในการไหลของเอกสารปกติแสดง: ไม่มีลบองค์ประกอบออกจากเอกสาร ไม่ใช้พื้นที่ใด ๆ ถึงแม้ HTML จะยังคงอยู่ในซอร์สโค้ด เนื่องจากเป็นจริงออกจากการไหลของเอกสาร สำหรับเจตนาและวัตถุประสงค์ทั้งหมดรายการหายไป นี้อาจเป็นสิ่งที่ดีหรือไม่ดีขึ้นอยู่กับความตั้งใจของคุณ นอกจากนี้ยังอาจทำให้หน้าเว็บของคุณเสียหายได้หากคุณใช้สถานที่นี้อย่างผิดพลาด!
เรามักใช้ "display: none" เมื่อทดสอบหน้า ถ้าเราต้องการพื้นที่ที่ "หายไป" สักครู่เพื่อให้เราสามารถทดสอบพื้นที่อื่น ๆ ของหน้าเว็บเราสามารถใช้ display: none for that. สิ่งที่ควรจดจำคือองค์ประกอบควรถูกส่งคืนกลับไปที่หน้าก่อนการเปิดตัวไซต์จริง เนื่องจากรายการที่ถูกนำออกจากการไหลของเอกสารในวิธีนี้จะไม่ปรากฏโดยเครื่องมือค้นหาหรือโปรแกรมอ่านหน้าจอแม้ว่าจะอยู่ในมาร์กอัป HTML ก็ตาม ในอดีตวิธีนี้ถูกใช้เป็นวิธีดำหมวกเพื่อพยายามมีอิทธิพลต่อการจัดอันดับของเครื่องมือค้นหาดังนั้นรายการที่ไม่ได้แสดงอาจเป็นธงสีแดงเพื่อให้ Google พิจารณาว่าเหตุใดจึงใช้วิธีการดังกล่าว
วิธีหนึ่งที่เราจะพบว่ามีการแสดงผล: ไม่มีเลยที่จะเป็นประโยชน์และที่เราใช้ในเว็บไซต์การผลิตสดคือเมื่อเราสร้าง ไซต์ที่ตอบสนอง ซึ่งอาจมีองค์ประกอบที่พร้อมสำหรับการแสดงผลหนึ่งขนาด แต่ไม่เหมาะสำหรับคนอื่น คุณสามารถใช้การแสดงผล: none เพื่อซ่อนองค์ประกอบนั้นและเปิดใช้งานอีกครั้ง ด้วยคำพูดสื่อใน ภายหลัง นี่เป็นคำที่ใช้ในการแสดงผลได้: ไม่มีเพราะคุณไม่ได้พยายามซ่อนอะไรด้วยเหตุผลที่ไม่เป็นธรรม แต่ต้องทำอย่างถูกต้องตามกฎหมาย
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อ 3/3/17