Atribut `tersembunyi` kelihatan lemah

Atribut hidden : Mirage Semantik? Artikel ini menerangkan keberkesanan atribut hidden HTML untuk menyembunyikan unsur -unsur, mendedahkan kelemahannya yang mengejutkan dan mencadangkan alternatif yang lebih baik.

Atribut hidden , sementara kelihatannya mudah, jatuh dari tujuannya yang dimaksudkan. Pertimbangkan contoh ini:

<div> Saya kelihatan</div>
<div hidden="">Saya tersembunyi</div>

Walaupun nama intuitif dan sokongan pelayar luas, keberkesanannya dipersoalkan.

Walaupun Adam Laki menghargai kejelasan semantiknya, Monica Dinculescu menunjukkan kecacatan kritikal: hidden adalah gaya ejen pengguna, mudah ditindih oleh peraturan CSS yang lain. div { display: block; } akan menjadikan elemen "tersembunyi" yang kononnya kelihatan:

 div {paparan: blok; }
<div hidden="">
  lol meneka siapa yang tidak tersembunyi lagi
  Petunjuk: Ini perkara ini
</div>

Ini menyoroti dua masalah utama:

1. Keterlaluan: Atribut hidden mudah ditindih oleh hampir mana -mana CSS display harta selain daripada none , menjadikan kebolehpercayaannya dipersoalkan. Ini amat mengecewakan kerana atribut secara jelas bertujuan untuk menyembunyikan unsur -unsur.

2. Harta display Terlabel: Peranan ganda harta display (mengawal penglihatan dan jenis elemen) tidak cekap. Harta CSS yang berdedikasi untuk penglihatan akan lebih baik, tetapi keserasian ke belakang menghalangnya.

Untuk memanfaatkan manfaat semantik hidden sambil memastikan bersembunyi yang boleh dipercayai, Monica mencadangkan peraturan CSS ini:

 [tersembunyi] {paparan: tiada! Penting; }

Ini boleh dimasukkan ke dalam reset CSS atau lembaran gaya asas.

Sebagai alternatif, menggunakan kelas CSS menyediakan pendekatan yang lebih mantap dan fleksibel. Kelas utiliti biasa mungkin kelihatan seperti ini:

 .hide, .den {
  Paparan: Tiada;
}

Walau bagaimanapun, perkara konteks. Untuk perubahan penglihatan yang dinamik dengan kesan visual, pendekatan yang lebih disesuaikan sering diperlukan:

 .menu {
   Kelegapan: 0;
   Keterlihatan: Tersembunyi;
   Peralihan: 0.2s;
   Transform: TranslateX (20px);
   & [data terbuka] {
     Kelegapan: 1;
     Keterlihatan: kelihatan;
     Transform: TranslateX (0);
   }
}

Kesimpulannya, sementara atribut hidden menawarkan rayuan semantik, kelemahan yang melekat memerlukan pertimbangan yang teliti. Untuk bersembunyi elemen yang boleh dipercayai, kelas CSS atau peraturan CSS yang disasarkan yang hidden memberikan penyelesaian yang lebih boleh dipercayai. Pendekatan terbaik bergantung pada konteks tertentu dan tahap kawalan yang dikehendaki.

Atas ialah kandungan terperinci Atribut `tersembunyi` kelihatan lemah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!