Membandingkan pelbagai cara untuk menyembunyikan perkara di CSS

Anda akan berfikir bahawa menyembunyikan kandungan dengan CSS adalah masalah yang mudah dan diselesaikan, tetapi terdapat banyak penyelesaian, masing -masing menjadi unik.

Pemaju yang paling biasa menggunakan paparan: Tiada untuk menyembunyikan kandungan pada halaman. Malangnya, cara menyembunyikan kandungan ini bukanlah peluru kerana sekarang kandungannya sekarang "tidak boleh diakses" untuk menyaring pembaca. Ia menggoda untuk menggunakannya, tetapi terutama dalam kes -kes di mana sesuatu hanya dimaksudkan untuk tersembunyi secara visual, tidak mencapainya.

Hakikatnya, terdapat banyak cara untuk "menyembunyikan" perkara di CSS, masing -masing dengan kebaikan dan keburukan mereka yang sangat bergantung pada bagaimana ia digunakan. Kami akan mengkaji semula setiap teknik di sini dan menutup perkara dengan ringkasan yang membantu kami membuat keputusan untuk digunakan dan kapan.

Cara melihat perbezaan antara teknik

Untuk melihat perbezaan antara pelbagai cara menyembunyikan kandungan, kita mesti memperkenalkan beberapa metrik. Metrik yang akan kami gunakan untuk membandingkan kaedah. Saya memutuskan untuk memecahkannya dengan bertanya soalan yang difokuskan pada empat bidang tertentu yang mempengaruhi susun atur, prestasi dan kebolehaksesan:

1. Kebolehcapaian : Adakah kandungan tersembunyi dibaca oleh pembaca skrin?
2. Aliran dokumen : Adakah elemen tersembunyi akan mempengaruhi susun atur dokumen?
3. Rendering : Adakah model kotak elemen tersembunyi akan diberikan?
4. Pencetus Acara: Adakah elemen mengesan klik atau fokus?

Sekarang kita mempunyai kriteria kita, mari kita bandingkan kaedah. Sekali lagi, kita akan meletakkan semuanya bersama -sama pada akhir dengan cara yang kita boleh menggunakannya sebagai rujukan untuk membuat keputusan ketika menyembunyikan sesuatu di CSS.

Kaedah 1: Harta paparan

Kami memulakan siaran ini dengan berhati -hati tentang menggunakan paparan untuk menyembunyikan kandungan. Dan seperti yang kita buat, menggunakannya untuk menyembunyikan elemen bermakna elemen itu tidak dihasilkan sama sekali. Ia berada di Dom, tetapi tidak pernah benar -benar diberikan.

Unsur ini masih akan dipaparkan dalam markup, jika anda memeriksa halaman anda akan dapat melihat elemen tersebut. Model kotak tidak akan menjana atau muncul di halaman, yang juga terpakai kepada semua anaknya .

Dan apa lagi, jika elemen mempunyai pendengar acara - katakan klik atau hover - mereka tidak akan mendaftar sama sekali. Dan seperti yang telah kita bincangkan, semua kandungan akan diabaikan oleh pembaca skrin. Di sini, kami mempunyai dua butang yang kelihatan dan satu yang tersembunyi dengan paparan: Tiada. Ketiga -tiga butang ini mempunyai peristiwa klik tetapi hanya dua butang yang kelihatan akan membuat dan mendaftarkan klik.

Paparan adalah satu -satunya harta yang akan menjejaskan permintaan imej. Jika tag imej (atau elemen induk) mempunyai harta paparan yang ditetapkan kepada tiada sama ada melalui CSS sebaris atau oleh pemilih, imej akan dimuat turun . Sebaliknya, jika imej itu digunakan dengan harta latar belakang, ia tidak akan dimuat turun .

Ini adalah kes kerana parser tidak menggunakan CSS apabila dokumen HTML dihuraikan dan ia menemui tag . Sebaliknya, apabila kita memohon imej ke elemen dengan harta latar belakang, imej itu tidak akan dimuat turun kerana parser tidak menggunakan CSS di mana imej itu dipanggil. Tingkah laku ini dipadankan di semua pelayar terkini. Satu -satunya pengecualian ialah IE 11, yang akan memuat turun imej dalam kedua -dua kes.

Kaedah 2: Harta Keterlihatan

Sekiranya harta penglihatan elemen ditetapkan kepada tersembunyi, maka elemen itu "tersembunyi secara visual." Menjadi "tersembunyi secara visual" berbunyi seperti apa yang dipamerkan: tidak ada, tetapi ia sangat berbeza kerana elemen itu dihasilkan dan diberikan, tetapi tidak kelihatan. Ini bermakna model kotak elemen hadir, memberikan dimensi yang terus menduduki ruang di skrin walaupun ia tidak kelihatan ada di sana.

Bayangkan anda memakai jubah yang tidak kelihatan yang membuat anda tidak kelihatan kepada orang lain, tetapi anda masih dapat bertemu dengan sesuatu. Anda secara fizikal di sana, walaupun anda tidak dapat dilihat dengan mata manusia.

Tetapi di sinilah perbezaan antara "tersembunyi secara visual" dan "tidak dipaparkan". Malah, unsur -unsur yang tersembunyi dengan penglihatan dan paparan berkelakuan sama dari segi kebolehcapaian dan pencetus peristiwa. Unsur -unsur yang tidak dapat dilihat tidak dapat diakses oleh pembaca skrin dan tidak akan mendaftarkan acara, seperti yang kita lihat dalam demo berikut yang sama seperti contoh terakhir, tetapi hanya menukar paparan: tidak ada penglihatan: tersembunyi.

Kaedah 3: harta kelegapan

Harta kelegapan hanya mempengaruhi aspek visual elemen. Jika kita menetapkan kelegapan elemen kepada sifar, elemen akan telus sepenuhnya. Sekali lagi, ia banyak seperti penglihatan: Tersembunyi di mana kita mengetuk jubah yang tidak kelihatan pada elemen di mana ia tidak kelihatan, tetapi masih hadir secara fizikal.

Dalam erti kata lain, apa yang kita ada adalah elemen yang berongga, telus yang bertindak seperti unsur lain, hanya ia tidak kelihatan. Bunyi seperti kaedah penglihatan, bukan? Perbezaannya adalah bahawa elemen telus sepenuhnya masih boleh diakses oleh pembaca skrin dan boleh mendaftarkan acara, seperti klik, seperti yang kita lihat dalam contoh berikut.

Kaedah 4: Harta Posisi

Menolak elemen di luar skrin dengan kedudukan mutlak adalah cara lain pemaju sering menyembunyikan sesuatu. Menggunakan atas dan kiri, kita boleh menolak elemen setakat ini dari skrin yang tidak akan pernah dilihat. Ia seperti menyembunyikan balang cookie di luar rumah supaya anak -anak (atau mungkin anda!) Tidak dapat mencari mereka.

"Mutlak" adalah kata kunci di sini. Jika kita menetapkan kedudukan kepada mutlak, elemen diambil dari aliran dokumen yang merupakan cara mengatakan ia tidak lagi mematuhi kedudukan semula jadi di DOM. Dalam erti kata lain, halaman tidak menyimpan ruang untuknya, yang mengetuk elemen dari perintah secara visual, meletakkannya pada elemen kedudukan terdekat jika ada, atau akar dokumen jika tidak ada yang lain.

Kami mengambil kesempatan daripada kedudukan mutlak dengan mengambil elemen "tersembunyi" daripada aliran dokumen dan mengimbanginya ke arah kiri atas dengan nilai -9999px.

 .den {
  Kedudukan: Mutlak;
  Atas: -9999px;
  Kiri: -9999px;
}

Jika elemen tersembunyi mengandungi kandungan yang fokus, halaman akan menatal ke elemen apabila ia menjadi tumpuan, mewujudkan lompatan tiba -tiba.

Kaedah 5: Kelas "Tersembunyi Visual"

Setakat ini, kaedah kedudukan adalah yang paling dekat yang kami lihat dengan cara yang mesra aksesibiliti untuk menyembunyikan perkara-perkara di CSS. Tetapi masalah dengan kandungan yang fokus menyebabkan lompatan halaman secara tiba -tiba tidak bagus. Satu lagi pendekatan untuk bersembunyi diakses menggabungkan kedudukan mutlak, harta klip dan limpahan tersembunyi. Scott O'Hara blog kembali pada tahun 2017.

 .visually tersembunyi: tidak (: fokus): tidak (: aktif) {
  Klip: Rect (0 0 0 0); 
  Clip-Path: Inset (50%);
  Ketinggian: 1px;
  Limpahan: Tersembunyi;
  Kedudukan: Mutlak;
  ruang putih: nowrap; 
  lebar: 1px;
}

Mari pecahkannya.

Kita perlu mengeluarkan elemen dari aliran dokumen. Cara terbaik untuk melakukan ini adalah dengan menggunakan kedudukan: mutlak. Ini akan mengeluarkan elemen, tetapi kami tidak akan menolaknya dari skrin.

 .visually tersembunyi {
  Kedudukan: Mutlak;
}

Kita boleh menyembunyikan elemen dengan menetapkan harta lebar dan ketinggian kepada sifar. Malangnya, itu tidak akan berfungsi kerana beberapa pembaca skrin akan mengabaikan unsur -unsur dengan lebar dan ketinggian sifar. Apa yang boleh kita lakukan ialah menetapkannya kepada nilai kedua paling rendah, 1px. Ini bermakna kandungan dengan mudah akan melimpah ruang, jadi kami juga memerlukan limpahan: tersembunyi untuk memastikan ia tidak tumpahan secara visual.

 .visually tersembunyi {
  Ketinggian: 1px;
  Limpahan: Tersembunyi;
  Kedudukan: Mutlak;
  lebar: 1px;
}

Untuk menyembunyikan persegi satu piksel itu, kita boleh menggunakan harta kliping CSS. Ia sesuai untuk keadaan ini, kerana ia tidak menjejaskan pembaca skrin. Kandungannya ada tetapi, sekali lagi, tersembunyi secara visual. Perkara yang perlu diperhatikan ialah klip itu telah ditolak memihak kepada laluan klip tetapi masih diperlukan jika kita perlu menyokong versi lama Internet Explorer.

 .visually tersembunyi {
  Klip: Rect (0 0 0 0);
  Clip-Path: Inset (50%);
  Ketinggian: 1px;
  Limpahan: Tersembunyi;
  Kedudukan: Mutlak;
  lebar: 1px;
}

Satu lagi teka-teki kelas "tersembunyi" adalah untuk menangani teks yang boleh diakses di luar skrin, keanehan yang menghilangkan jarak putih antara kata-kata, menyebabkan mereka dibaca dengan kuat seperti satu perkataan besar. Sebagai contoh, "Selamat Datang di Rumah" akan dibaca sebagai "WelcomeBackHome."

Penyelesaian mudah untuk masalah ini adalah untuk menetapkan ruang putih: nowrap:

 .visually tersembunyi {
  Klip: Rect (0 0 0 0);
  Clip-Path: Inset (50%);
  Ketinggian: 1px;
  Limpahan: Tersembunyi;
  Kedudukan: Mutlak;
  ruang putih: nowrap;
  lebar: 1px;
}

Dan, akhirnya! Perkara terakhir yang perlu dipertimbangkan adalah untuk membolehkan elemen tertentu dengan tumpuan asli dan tapak aktif untuk dipaparkan apabila mereka fokus, sambil terus mencegah unsur -unsur lain, seperti perenggan, dari paparan. Kita boleh menggunakan: bukan pseudo-selector untuk itu.

 .visually tersembunyi: tidak (: fokus): tidak (: aktif) {
  Klip: Rect (0 0 0 0);
  Clip-Path: Inset (50%);
  Ketinggian: 1px;
  Limpahan: Tersembunyi;
  Kedudukan: Mutlak;
  ruang putih: nowrap;
  lebar: 1px;
}

Sebutan yang mulia

Terdapat lebih banyak kaedah daripada lima yang telah kami tutupi. Sebagai contoh, harta inden teks boleh menolak teks dari skrin seperti kaedah kedudukan:

 .den {
  teks -inden: -9999em;
}

Malangnya, pendekatan ini tidak jive dengan mod penulisan RTL. Itu menjadikannya kurang disesuaikan daripada penyelesaian lain yang telah kami tutupi.

Kaedah lain adalah menggunakan Transform untuk skala atau menggerakkan elemen keluar dari jalan. Ia berfungsi sama - hanya secara visual - seperti kelegapan.

 .den {
  Transform: Skala (0);
}

Mari meletakkan semuanya bersama -sama!

Kami mendapat penyelesaian yang akan menyembunyikan kandungan secara visual tetapi masih boleh diakses. Kemudian, adakah anda berhenti menggunakan paparan: Tiada? Tidak, ini masih merupakan cara terbaik untuk menyembunyikan elemen sepenuhnya (secara visual dan diakses).

Yang mengatakan, patut disebutkan bahawa jika anda ingin mencapai hasil yang bertentangan-menyembunyikan sesuatu dari pembaca skrin, atribut ARIA yang tersembunyi = "benar" akan menyembunyikan kandungan dari pembaca skrin, tetapi tidak secara visual.

Dengan itu, di sini adalah jadual lengkap yang membandingkan semua pendekatan. Gunakannya untuk membimbing keputusan anda tentang cara menyembunyikan kandungan pada masa akan datang dalam keadaan itu.

Atas ialah kandungan terperinci Membandingkan pelbagai cara untuk menyembunyikan perkara di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!