Mungkin ada masa, ketika anda bekerja pada pengembangan halaman web, yang perlu Anda "menyembunyikan" item bidang tertentu untuk satu sebab atau yang lain. Anda tentu saja boleh memadamkan item dalam soalan dari markup HTML , tetapi bagaimana jika anda mahu mereka tetap berada di dalam kod, tetapi tidak dipaparkan pada skrin penyemak imbas atas sebab apa pun (dan kami akan menyemak sebab-sebab lakukan ini tidak lama lagi). Untuk menyimpan elemen dalam HTML anda, tetapi menyembunyikannya untuk paparan, anda akan beralih ke CSS.
Dua cara yang paling umum untuk menyembunyikan elemen yang ada dalam HTML akan menggunakan sifat CSS untuk "paparan" atau "keterlihatan". Sekilas pandang, kedua-dua sifat ini seolah-olah melakukan perkara yang sama, tetapi mereka masing-masing mempunyai perbezaan yang berbeza yang harus anda ketahui. Mari kita perhatikan perbezaan antara paparan: tiada dan keterlihatan: tersembunyi.
Keterlihatan
Menggunakan pasangan CSS / nilai keterlihatan: sembunyi menyembunyikan elemen dari penyemak imbas. Walau bagaimanapun, elemen tersembunyi masih mengambil ruang dalam susun atur. Ia seperti anda pada dasarnya membuat elemen tidak kelihatan, tetapi ia masih tetap di tempat dan mengambil ruang yang akan diambil jika ia ditinggalkan bersendirian.
Jika anda meletakkan DIV pada halaman anda dan menggunakan CSS untuk memberikannya dimensi untuk mengambil 100x100 piksel, kebolehlihatan: harta tersembunyi akan menjadikan DIV tidak dipaparkan di skrin, tetapi teks yang mengikuti akan bertindak seperti itu masih ada, menghormati Jarak jarak 100x100.
Secara jujur, sifat penglihatan bukan sesuatu yang kita gunakan dengan kerap, dan pastinya bukan dengan sendirinya. Sekiranya kita juga menggunakan sifat-sifat CSS lain seperti kedudukan untuk mencapai susun atur yang kita inginkan untuk elemen tertentu, maka kita dapat menggunakan keterlihatan untuk menyembunyikan item itu pada mulanya, hanya untuk "menghidupkannya" pada hover. Itulah salah satu kemungkinan penggunaan harta ini, tetapi sekali lagi, ia bukan sesuatu yang kita beralih kepada kekerapan.
Paparan
Tidak seperti harta penglihatan, yang meninggalkan unsur dalam aliran dokumen biasa, dipaparkan: tidak ada yang menghilangkan unsur sepenuhnya dari dokumen itu. Ia tidak mengambil apa-apa ruang, walaupun HTML untuk itu masih dalam kod sumber. Ini kerana ia benar-benar dikeluarkan dari aliran dokumen. Untuk semua niat dan tujuan, item itu hilang. Ini boleh menjadi perkara yang baik atau perkara yang buruk, bergantung kepada apa yang anda maksudkan. Ia juga boleh merosakkan halaman anda jika anda menyalahgunakan harta ini!
Kami sering menggunakan "paparan: tiada" semasa menguji halaman. Jika kita memerlukan kawasan untuk "pergi" sedikit demi sedikit supaya kita boleh menguji bidang lain di halaman, kita boleh menggunakan paparan: tiada untuk itu. Walau bagaimanapun, perkara yang harus diingati adalah bahawa unsur itu harus dipulangkan kembali ke halaman sebelum pelancaran tapak tersebut. Ini kerana item yang dikeluarkan dari aliran dokumen dalam kaedah ini tidak dilihat oleh enjin carian atau pembaca skrin, walaupun ia mungkin kekal dalam markup HTML. Pada masa lalu, kaedah ini digunakan sebagai kaedah topi hitam untuk cuba mempengaruhi kedudukan enjin carian, jadi item yang tidak dipaparkan boleh menjadi bendera merah bagi Google untuk melihat mengapa pendekatan itu sedang digunakan.
Satu cara yang kita dapati paparan: tidak berguna, dan di mana kita menggunakannya di tapak web, secara langsung, adalah ketika kita sedang membangun sebuah laman responsif yang mungkin memiliki unsur-unsur yang tersedia untuk satu saiz paparan tetapi bukan untuk orang lain. Anda boleh menggunakan paparan: tiada untuk menyembunyikan unsur tersebut dan kemudian hidupkan semula dengan pertanyaan media kemudian. Ini adalah penggunaan paparan yang boleh diterima: tiada, kerana anda tidak cuba untuk menyembunyikan apa-apa kerana alasan jahat, tetapi mempunyai keperluan yang sah untuk melakukannya.
Artikel asal oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 3/3/17