Mungkin ada saat-saat ketika Anda bekerja pada pengembangan halaman web, bahwa Anda perlu "menyembunyikan" area tertentu dari barang-barang untuk satu alasan atau yang lain. Anda dapat, tentu saja, hanya menghapus item (s) dalam pertanyaan dari markup HTML , tetapi bagaimana jika Anda ingin mereka tetap di kode, tetapi tidak ditampilkan pada layar browser untuk alasan apa pun (dan kami akan meninjau alasan untuk lakukan ini segera). Untuk menyimpan elemen di HTML Anda, tetapi menyembunyikannya untuk ditampilkan, Anda akan beralih ke CSS.
Dua cara paling umum untuk menyembunyikan elemen yang ada di HTML adalah menggunakan properti CSS untuk "display" atau "visibilitas". Pada pandangan pertama, dua sifat ini mungkin tampak melakukan hal yang sama, tetapi masing-masing memiliki perbedaan yang jelas yang harus Anda ketahui. Mari kita lihat perbedaan antara tampilan: tidak ada dan visibilitas: tersembunyi.
Visibilitas
Menggunakan pasangan properti / nilai CSS visibilitas: tersembunyi menyembunyikan elemen dari browser. Namun, elemen tersembunyi itu masih membutuhkan ruang di tata letak. Ini seperti Anda pada dasarnya membuat elemen tidak terlihat, tetapi masih tetap di tempatnya dan mengambil ruang yang akan diambil jika itu ditinggalkan sendirian.
Jika Anda menempatkan DIV di halaman Anda dan menggunakan CSS untuk memberikan dimensi untuk mengambil 100x100 piksel, visibilitas: properti tersembunyi akan membuat DIV tidak muncul di layar, tetapi teks yang mengikutinya akan bertindak seperti itu masih ada, menghormati itu Spasi 100x100.
Jujur, properti visibilitas bukanlah sesuatu yang kami gunakan sangat sering, dan tentu saja tidak sendiri. Jika kita juga menggunakan properti CSS lainnya seperti memposisikan untuk mencapai tata letak yang kita inginkan untuk elemen tertentu, kita kemudian dapat menggunakan visibilitas untuk menyembunyikan item tersebut pada awalnya, hanya untuk "menghidupkan" kembali pada hover. Itu adalah satu kemungkinan penggunaan properti ini, tetapi sekali lagi, ini bukan sesuatu yang kita gunakan dengan frekuensi apa pun.
Display
Tidak seperti properti visibilitas, yang meninggalkan elemen dalam aliran dokumen normal, tampilan: tidak ada yang menghilangkan elemen sepenuhnya dari dokumen. Ini tidak memakan ruang apa pun, meskipun HTML untuknya masih dalam kode sumber. Ini karena memang dihapus dari aliran dokumen. Untuk semua maksud dan tujuan, barang itu hilang. Ini bisa menjadi hal yang baik atau buruk, tergantung pada apa niat Anda. Ini juga dapat merusak halaman Anda jika Anda menyalahgunakan properti ini!
Kami sering menggunakan "display: none" ketika menguji halaman. Jika kita membutuhkan area untuk "pergi" sebentar sementara agar kita dapat menguji area lain dari halaman, kita dapat menggunakan tampilan: tidak ada untuk itu. Hal yang perlu diingat, bagaimanapun, adalah bahwa elemen tersebut harus dikembalikan kembali ke halaman sebelum peluncuran sebenarnya dari situs itu. Ini karena item yang dihapus dari aliran dokumen dalam metode ini tidak dilihat oleh mesin telusur atau pembaca layar, meskipun mungkin tetap berada di markup HTML. Di masa lalu, metode ini digunakan sebagai metode black-hat untuk mencoba mempengaruhi peringkat mesin pencari, sehingga item yang tidak ditampilkan bisa menjadi bendera merah untuk Google untuk melihat mengapa pendekatan tersebut digunakan.
Salah satu cara kami menemukan tampilan: tidak ada yang berguna, dan di mana kami menggunakannya di situs web produksi, adalah ketika kami membangun situs responsif yang mungkin memiliki elemen yang tersedia untuk satu ukuran tampilan tetapi tidak untuk yang lain. Anda dapat menggunakan tampilan: tidak ada yang menyembunyikan elemen itu dan kemudian hidupkan kembali dengan kueri media nanti. Ini adalah penggunaan tampilan yang dapat diterima: tidak ada, karena Anda tidak mencoba menyembunyikan apa pun karena alasan yang tidak menyenangkan, tetapi memiliki kebutuhan yang sah untuk melakukannya.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 3/3/17