ความทึบ: 0 มีผลเหมือนกับการมองเห็น: ซ่อนอยู่หรือไม่

ถ้าเป็นเช่นนั้นมันจะทำให้visibilityคุณสมบัตินั้นเสื่อมประสิทธิภาพหรือไม่?

(ฉันตระหนักดีว่า Internet Explorer ยังไม่รองรับคุณสมบัติ CSS2 นี้)
การเปรียบเทียบเครื่องมือโครงร่าง

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

นี่คือการรวบรวมข้อมูลที่ตรวจสอบแล้วจากคำตอบต่างๆ

คุณสมบัติ CSS แต่ละอย่างไม่ซ้ำกัน นอกจากการแสดงผลองค์ประกอบที่มองไม่เห็นแล้วยังมีผลเพิ่มเติมดังต่อไปนี้:

1. ยุบช่องว่างที่องค์ประกอบปกติจะครอบครอง
2. ตอบสนองต่อเหตุการณ์ (เช่นคลิกกดแป้น)
3. เข้าร่วมในแท็บลำดับ

                     ยุบแท็บลำดับเหตุการณ์
ความทึบ: 0 ไม่ใช่ใช่ใช่
การมองเห็น: ซ่อนอยู่ไม่ไม่ใช่ไม่ใช่
ทัศนวิสัย: ยุบใช่ * ไม่ใช่ไม่ใช่
แสดง: ไม่มีใช่ไม่ใช่ไม่ใช่

* ใช่ภายในองค์ประกอบตารางมิฉะนั้นไม่ใช่

เลขที่

องค์ประกอบที่มีความทึบจะสร้างบริบทการซ้อนใหม่

นอกจากนี้ข้อกำหนดของ CSS ไม่ได้กำหนดสิ่งนี้ แต่องค์ประกอบopacity:0ที่สามารถคลิกได้และองค์ประกอบที่visibility:hiddenมีไม่ได้กำหนด

ไม่มันไม่ มีความแตกต่างใหญ่ มีความคล้ายคลึงกันเนื่องจากคุณสามารถมองผ่านองค์ประกอบได้หากการมองเห็นถูกซ่อนไว้หรือความทึบเป็น 0

ความทึบ: 0 : คุณไม่สามารถคลิกที่องค์ประกอบด้านหลังได้

การมองเห็น: ซ่อนอยู่ : คุณสามารถคลิกที่องค์ประกอบด้านหลังได้

มีความแตกต่างมากระหว่างมีและvisibility opacityคำตอบส่วนใหญ่กล่าวถึงความแตกต่างบางประการ แต่นี่คือรายการทั้งหมด

1. ความทึบไม่ได้รับการสืบทอดในขณะที่การมองเห็นทำได้

2. ความทึบสามารถเคลื่อนไหวได้ในขณะที่ไม่มีการมองเห็น
   (ในทางเทคนิคก็เป็นเช่นนั้น แต่ไม่มีพฤติกรรมที่กำหนดไว้สำหรับพูดว่า "ยุบ 37% และซ่อน 63%" ดังนั้นคุณจึงถือว่าสิ่งนี้ไม่เคลื่อนไหวได้)

3. การใช้ความทึบคุณไม่สามารถทำให้องค์ประกอบลูกทึบกว่าองค์ประกอบระดับบนสุดได้ เช่นถ้าคุณมี ap ที่มีสี: ดำและทึบ: 0.5 คุณจะไม่สามารถทำให้ลูก ๆ ดำสนิทได้ ค่าความทึบที่ถูกต้องอยู่ระหว่าง 0 ถึง 1 และตัวอย่างนี้ต้องการ 2!
   ดังนั้นตามความคิดเห็นของ Martinคุณสามารถมีลูกที่มองเห็นได้ (พร้อมการมองเห็น: มองเห็นได้) ในพ่อแม่ที่มองไม่เห็น (ด้วยการมองเห็น: ซ่อน) สิ่งนี้เป็นไปไม่ได้ด้วยความทึบ ถ้าผู้ปกครองมีความทึบ: 0; ลูก ๆ ของมันมักจะมองไม่เห็น

4. คำตอบของ Kornelกล่าวว่าค่าความทึบน้อยกว่า 1 สร้างบริบทการซ้อนของตัวเอง ไม่มีค่าสำหรับการมองเห็น
   (ฉันหวังว่าฉันจะคิดวิธีที่จะแสดงให้เห็นได้ แต่ฉันคิดไม่ออกว่าจะแสดงบริบทซ้อนของการมองเห็น: องค์ประกอบที่ซ่อนอยู่)

5. ตามคำตอบของ philnashองค์ประกอบที่มีความทึบ: 0 ยังคงอ่านโดยโปรแกรมอ่านหน้าจอในขณะที่มองเห็นได้: องค์ประกอบที่ซ่อนอยู่จะไม่

6. ตามคำตอบของ Chris Noe การมองเห็นมีตัวเลือกมากขึ้น (เช่นการยุบ) และองค์ประกอบที่มองไม่เห็นจะไม่ตอบสนองต่อการคลิกอีกต่อไปและไม่สามารถแท็บได้

(ทำให้เป็นวิกิชุมชนเนื่องจากการยืมคำตอบที่มีอยู่จะไม่ยุติธรรมเป็นอย่างอื่น)

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

นั่นเป็นข้อแตกต่างเดียวที่ฉันคิดได้

ฉันไม่แน่ใจทั้งหมด แต่นี่คือวิธีที่ฉันทำแบบโปร่งใสข้ามเบราว์เซอร์:

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

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

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

<div contenteditable><span style='visibility: hidden;'></span></div>

... ดูเหมือนว่าถ้าคุณเน้น div / span นั้นคุณจะไม่สามารถพิมพ์ได้จริง ในขณะที่opacity: 0ดูเหมือนว่าคุณทำได้ ฉันไม่ได้ทดสอบสิ่งนี้อย่างกว้างขวาง แต่คิดว่ามันคุ้มค่าที่จะพูดถึงสิ่งนี้ที่นี่เนื่องจากไม่มีใครพูดถึงผลกระทบของการป้อนข้อความ ดูเหมือนว่าอาจเกี่ยวข้องกับเหตุการณ์ที่กล่าวถึงข้างต้น

สิ่งที่ฟิลพูดเป็นเรื่องจริง

IE รองรับความทึบแม้ว่า:

filter:alpha(opacity=0);

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