Apa perbedaan antara atribut tersembunyi (HTML5) dan aturan display: none (CSS)?

111

HTML5 memiliki atribut global baru hidden, yang dapat digunakan untuk menyembunyikan konten.

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

CSS memiliki display:noneaturan, yang juga dapat digunakan untuk menyembunyikan konten.

article { display:none; }

Secara visual, keduanya identik. Apa perbedaannya secara semantik? Secara komputasi?

Pedoman apa yang harus saya pertimbangkan tentang kapan harus menggunakan salah satunya?

TIA.

EDIT : Berdasarkan tanggapan @ newtron (di bawah), saya melakukan lebih banyak pencarian. The hiddenatribut itu diperebutkan tahun lalu dan (ternyata) hampir tidak berhasil masuk ke HTML5 spec. Beberapa berpendapat itu mubazir dan tidak memiliki tujuan. Dari apa yang saya tahu, evaluasi terakhirnya adalah: Jika saya hanya menargetkan browser web, tidak ada perbedaan. (Satu halaman bahkan menegaskan bahwa browser web digunakan display:noneuntuk mengimplementasikan atribut tersembunyi.) Tetapi jika saya mempertimbangkan aksesibilitas (misalnya, mungkin saya mengharapkan konten saya dibaca oleh pembaca layar), maka ada perbedaan. Aturan CSS display:nonemungkin menyembunyikan konten saya dari browser web, tetapi aturan aria yang sesuai (mis.,aria-hidden="false") mungkin mencoba membacanya. Jadi, saya sekarang setuju bahwa jawaban @ newtron benar, meskipun mungkin (bisa dibilang) tidak sejelas yang saya suka. Terima kasih @newtron atas bantuan Anda.

css html visibility

— james.garriss
sumber

Bahkan tidak tahu hiddenatribut itu ada, tetapi tentu saja pertanyaan yang bagus karena tampaknya melanggar pemisahan struktur / presentasi.

— Waldheinz

Bagi mereka yang belum memiliki sukacita membaca HTML5 spec pada atribut ini: w3.org/TR/html5/editing.html#the-hidden-attribute

— james.garriss

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

— Yener

Sudah baca itu, @Yigit. Ini juga berumur lebih dari satu tahun. Dan tersembunyi masih dalam spesifikasi. Itu menunjukkan kepada saya bahwa proposal tersebut belum memenangkan satu pun orang yang bertobat.

— james.garriss

Terima kasih atas pengeditannya. Maaf, tidak jelas! Info yang Anda tambahkan di atas sangat bagus. +1

— newtron

Perbedaan utama tampaknya adalah bahwa hiddenelemen selalu tersembunyi terlepas dari penyajiannya:

Atribut tersembunyi tidak boleh digunakan untuk menyembunyikan konten yang dapat ditampilkan secara sah di presentasi lain. Misalnya, tidak benar menggunakan tersembunyi untuk menyembunyikan panel dalam dialog bertab, karena antarmuka tab hanyalah semacam presentasi luapan - seseorang juga bisa menampilkan semua kontrol formulir dalam satu halaman besar dengan bilah gulir. Juga tidak benar menggunakan atribut ini untuk menyembunyikan konten hanya dari satu presentasi - jika ada sesuatu yang ditandai tersembunyi, maka disembunyikan dari semua presentasi, termasuk, misalnya, pembaca layar.

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

Karena CSS dapat menargetkan jenis media / presentasi yang berbeda, display: noneakan bergantung pada presentasi yang diberikan. Misalnya, beberapa elemen mungkin ada display: nonesaat dilihat di browser desktop, tetapi tidak di browser seluler. Atau, disembunyikan secara visual tetapi masih tersedia untuk pembaca layar.

— newtron
sumber

Jadi maksudmu tampilan truf tersembunyi itu? Jika demikian, maka Anda mengatakan bahwa tujuannya hanyalah untuk mengesampingkan presentasi. Hmmm.

— james.garriss

tebakan saya adalah, ya, tampilan truf yang tersembunyi. Tapi, saya belum benar-benar bereksperimen dengannya. akan terlihat tidak ada gunanya jika css bisa menimpanya.

— newtron

Semantik menang. Jika seharusnya tidak ada, hapus dari aliran dokumen di tingkat dokumen. Jika itu harus menjadi bagian dari alur dokumen tetapi dalam kasus tertentu Anda tidak ingin menjadi bagian dari pengalaman visual, tangani di lapisan kosmetik. Ingatlah bahwa beberapa agen mencoba mengurai CSS dan jika mereka menentukan bahwa sesuatu tidak akan DILIHAT maka mereka tidak mengeluarkannya sama sekali. Saya pikir ini adalah perilaku yang menyimpang, tetapi mengetahuinya dapat membantu.

Terkait dengan beberapa komentar di sini (@ james-garris, @newtron), menurut developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , tampilan sebenarnya mengalahkan tersembunyi - go figure :-)

— Jurko Gospodnetić

Satu perbedaan penting yang saya lihat di halaman MDN untuk atribut tersembunyi: "Mengubah nilai properti tampilan CSS pada elemen dengan atribut tersembunyi menimpa perilaku. Misalnya, elemen bergaya display: flex akan ditampilkan meskipun atribut tersembunyi ada."

— mohsinulhaq