Menggunakan sifat-sifat CSS "display: none"

Cascading Style Sheets (CSS) memungkinkan Anda untuk mengatur tampilan dan desain halaman web. Salah satu sifat yang paling umum digunakan dan nilai-nilainya adalah "display: none".

Penentuan sifat

Properti itu sendiri multi-tujuan dan menentukan jenis elemen layar dalam dokumen. Tergantung pada nilai-nilai tertentu halaman yang dipilih dapat ditampilkan bagian blok, linear, sebagai daftar item sebagai bagian dari meja, dan sebagainya. D. Dengan demikian, karena milik "display", dapat mengubah jenis blok dalam dokumen.

Adapun "nilai properti display: none" bundel, memungkinkan Anda untuk menghapus item atau blok dokumen. Di tempat yang sama di bawah sepotong halaman tidak dilindungi, yang berarti jatuh dari sungai. Semua elemen yang berada di luar "remote", hanya tidak melihatnya dan mengabaikan ukuran dan posisi unit. Untuk mengembalikan objek tersembunyi, Anda harus merujuk ke dokumen melalui script yang hanya mengubah nilai properti untuk format yang diinginkan. Ketika ini terjadi secara otomatis memformat halaman dengan objek baru di atasnya.

Perbedaan antara sifat "display" dan "visibilitas"

Terlepas dari kenyataan bahwa sebagai akibat dari kedua sifat untuk menyembunyikan barang-barang dari pengguna, prinsip operasi mereka sangat berbeda. Seperti yang sudah disebutkan di atas, parameter "display: none" menghilangkan elemen dari dokumen. blok jatuh keluar dari halaman, sehingga tidak terjadi di dalamnya. Dalam hal ini, objek masih tetap dalam HTML-kode.

Pada gilirannya, properti "visibility: hidden" menyembunyikan elemen dari pengguna, tetapi tidak menghapusnya dari model dokumen. Dengan demikian, halaman dicadangkan tempat di blok ini. Artinya, aliran dokumen akan menerima dan mempertimbangkan lokasi dan ukuran elemen dengan properti "visibility: hidden" dengan cara yang persis sama tanpa itu.

Perbedaan ini adalah struktur organisasi dokumen dua sifat ini memungkinkan untuk mencapai hasil yang diinginkan untuk tampilan halaman yang benar.

Menggunakan CSS - display: none

Dokumen internet ada beberapa cara untuk menentukan sifat-sifat elemen. Yang pertama display: none dapat ditentukan dalam file terpisah untuk Cascading Style Sheets. Metode ini adalah yang paling maju dan yang terbaik, karena memungkinkan Anda untuk membuat semua pemilih, kelas dan sifat mereka dalam dokumen terpisah. model seperti itu memungkinkan Anda untuk cepat menemukan dan mengubah pengaturan halaman.

Header dokumen

Perwujudan kedua adalah untuk menentukan gaya antara judul tag gaya dokumen. Efektivitas metode ini jauh lebih sedikit. Dianjurkan untuk hanya berlaku dalam kasus yang ekstrim, seperti di hadapan sejumlah besar gaya pembacaan halaman web desainer memburuk secara signifikan. Dan ini menyebabkan kesalahan dan memperlambat proses pengembangan sebuah dokumen web. Pendekatan ini hanya direkomendasikan dalam kasus menambahkan tag untuk sejumlah kecil gaya atau instrumen debugging.

Perlu diingat bahwa jika cara ini mengorganisir gaya dalam dokumen kurang dari impor style sheet terpisah, sifat yang tumpang tindih akan ditimpa oleh orang-orang yang berada di tubuh html dokumen.

Blok div. Display: none

Cara lain adalah dengan menambahkan langsung ke tag "style = display: none;" kode elemen. Pendekatan ini sering digunakan ketika bekerja dengan berbagai kerangka, tujuan yang - mengurangi jumlah fitur langsung ke stylesheet dan menampilkan mereka dalam dokumen web. Selain itu, rekor tersebut sering ketika menonton "inspektur kode" halaman. Penting untuk diingat bahwa menggunakan pendekatan ini, Anda dapat mengubah properti dan nilai yang ditentukan dalam stylesheet. Jadi, Anda harus berhati-hati, sebagai hasilnya, Anda dapat menciptakan masalah tambahan bagi diri mereka sendiri dan menghabiskan beberapa waktu untuk menemukan dan memperbaiki kesalahan dalam kode halaman.

JavaScript

Hal ini juga layak disebut kemungkinan perubahan lebih lanjut dalam properti ini. Hal ini mengacu tidak lagi stylesheet dan html-kode dan bahasa scripting. Oleh karena itu, untuk menerapkan perlu untuk memiliki setidaknya beberapa pengetahuan di bidang ini. Untuk menghapus elemen dari aliran dokumen, Anda dapat menggunakan properti JavaScript "display = none". Hal ini memungkinkan Anda untuk mengubah struktur dari dokumen ketika peristiwa tertentu. Juga, melalui penggunaan script untuk secara dinamis ( "on the fly") untuk mengubah sifat parameter dan dengan demikian menyegarkan tampilan halaman tanpa harus reload. Pendekatan ini berguna ketika mengatur menu drop-down, jendela modal dan bentuk.

SEO

Di bidang mengoptimalkan konten web untuk mesin pencari, ada banyak takhayul dan ketidakpastian. Jadi, banyak SEO pemula mempertimbangkan penggunaan sifat "display" perilaku buruk. Mereka menjelaskan hal ini dengan fakta bahwa mesin pencari melihat konten tersembunyi, mulai mempertimbangkan halaman sebagai spam. Dalam kata-kata mereka, ada beberapa logika, tapi tidak banyak lagi. Pada titik ini dalam waktu milik benda tersembunyi yang digunakan cukup sering untuk memformat menu drop-down dan menyembunyikan bagian-bagian dari dokumen, yang saat ini tidak menarik bagi pengguna (misalnya, ketika Anda memilih kategori informasi lainnya dihapus). Pendekatan ini menggunakan portal internet yang cukup kuat (salah satu dari mereka - "Amazon"). Dengan demikian, laba-laba mesin pencari tidak dapat mempertimbangkan penggunaan properti "display: none" spam.

Hal lain, ketika pendekatan ini digunakan untuk menyembunyikan kata-kata individu dan karakter. Terlepas dari kenyataan bahwa sekarang spider mesin pencari belum memiliki pengakuan yang sempurna seperti "spam" algoritma dalam dokumen, kemungkinan bahwa halaman akan tertangkap dalam hal ini, cukup tinggi. Oleh karena itu dianjurkan untuk menggunakan properti "display" secara ketat untuk tujuan - untuk mengubah jenis blok atau sementara bersembunyi dari mata pengguna.