อะไรคือความแตกต่างระหว่างแอตทริบิวต์ที่ซ่อนอยู่ (HTML5) และ display: none rule (CSS)?

112

HTML5 มีแอตทริบิวต์ส่วนกลางใหม่hiddenซึ่งสามารถใช้เพื่อซ่อนเนื้อหาได้

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS มีdisplay:noneกฎซึ่งสามารถใช้เพื่อซ่อนเนื้อหาได้

article { display:none; }

ภาพเหมือนกัน ความแตกต่างทางความหมายคืออะไร? คำนวณ?

ฉันควรพิจารณาแนวทางใดในการใช้อย่างใดอย่างหนึ่งเมื่อใด

TIA.

แก้ไข : จากการตอบสนองของ @ newtron (ด้านล่าง) ฉันทำการค้นหามากขึ้น ) อาจจะพยายามที่จะอ่านมัน ดังนั้นตอนนี้ฉันยอมรับว่าคำตอบของ @ newtron นั้นถูกต้องแม้ว่าอาจจะ (เนื้อหา) ไม่ชัดเจนเท่าที่ฉันต้องการ ขอบคุณ @newtron สำหรับความช่วยเหลือของคุณhiddenแอตทริบิวต์กล่าวได้รับการโต้แย้งอย่างมากเมื่อปีที่แล้วและ (ดูเหมือน) แทบจะไม่ทำให้เป็นข้อมูลจำเพาะของ HTML5 บางคนแย้งว่ามันซ้ำซ้อนและไม่มีจุดมุ่งหมาย จากสิ่งที่ฉันสามารถบอกได้การประเมินขั้นสุดท้ายคือ: หากฉันกำหนดเป้าหมายเฉพาะเว็บเบราว์เซอร์ก็ไม่มีความแตกต่าง (หน้าหนึ่งยืนยันว่าเว็บเบราว์เซอร์ใช้display:noneเพื่อใช้แอตทริบิวต์ที่ซ่อนอยู่) แต่ถ้าฉันกำลังพิจารณาความสามารถในการเข้าถึง (เช่นบางทีฉันคาดว่าเนื้อหาของฉันจะถูกอ่านโดยโปรแกรมอ่านหน้าจอ) ก็มีความแตกต่าง กฎ CSS display:noneอาจซ่อนเนื้อหาของฉันจากเว็บเบราว์เซอร์ แต่กฎ aria ที่เกี่ยวข้อง (เช่นaria-hidden="false"

css html visibility

— james.garriss
แหล่งที่มา

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

— Waldheinz

สำหรับผู้ที่ยังไม่ได้อ่านข้อมูลจำเพาะของ HTML5 ในแอตทริบิวต์นี้: w3.org/TR/html5/editing.html#the-hidden-attribute

— james.garriss

w3.org/html/wg/wiki/ChangeProposals/removehidden

— Yiğit Yener

อ่านแล้ว @Yigit อายุมากกว่าหนึ่งปีด้วย และซ่อนอยู่ยังอยู่ในสเป็ค นั่นเป็นการบ่งบอกให้ฉันทราบว่าข้อเสนอนี้ไม่ได้รับผู้เปลี่ยนใจเลื่อมใส

— james.garriss

ขอบคุณสำหรับการแก้ไข ขออภัยมันไม่ชัดเจน! ข้อมูลที่คุณเพิ่มไว้ข้างต้นนั้นยอดเยี่ยมมาก +1

— newtron

ความแตกต่างที่สำคัญดูเหมือนว่าhiddenองค์ประกอบจะถูกซ่อนอยู่เสมอไม่ว่าจะนำเสนอแบบใด:

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

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

เนื่องจาก CSS สามารถกำหนดเป้าหมายสื่อ / ประเภทการนำเสนอที่แตกต่างกันdisplay: noneได้จึงขึ้นอยู่กับงานนำเสนอที่กำหนด เช่นองค์ประกอบบางอย่างอาจมีdisplay: noneเมื่อดูในเบราว์เซอร์บนเดสก์ท็อป แต่ไม่ใช่เบราว์เซอร์มือถือ หรือซ่อนไว้ด้วยสายตา แต่ยังสามารถใช้ได้กับโปรแกรมอ่านหน้าจอ

— นิวตรอน
แหล่งที่มา

คุณกำลังบอกว่าสิ่งที่สำคัญกว่าการแสดงที่ซ่อนอยู่? ถ้าเป็นเช่นนั้นแสดงว่าคุณมีจุดประสงค์เพียงเพื่อลบล้างงานนำเสนอ อืม

— james.garriss

ฉันเดาว่าใช่การแสดงที่สำคัญกว่าที่ซ่อนอยู่ แต่ฉันยังไม่ได้ทดลองจริงๆ มันดูเหมือนจะไม่มีจุดหมายถ้า css สามารถแทนที่มันได้

— newtron

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

ที่เกี่ยวข้องกับความคิดเห็นบางส่วนที่นี่ (@ james-garris, @newtron) อ้างอิงจากผู้พัฒนา. mozilla.org/en-US/docs/Web/HTML/Global_attributes/… แสดงผลจริงที่ซ่อนอยู่ - ไปคิด :-)

— Jurko Gospodnetić

ความแตกต่างที่สำคัญอย่างหนึ่งที่ฉันพบในหน้า MDN สำหรับแอตทริบิวต์ที่ซ่อนอยู่: "การเปลี่ยนค่าของคุณสมบัติการแสดงผล CSS ในองค์ประกอบที่มีแอตทริบิวต์ที่ซ่อนอยู่จะแทนที่ลักษณะการทำงานตัวอย่างเช่นองค์ประกอบสไตล์ display: flex จะแสดงแม้จะมีแอตทริบิวต์ที่ซ่อนอยู่"

— mohsinulhaq