Bootstrap - Klas Visually Hidden

Hai there, bakat pembangun web masa depan! Hari ini, kita akan melihat fitur yang menarik dan sangat berguna di Bootstrap: kelas visually hidden. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk mengorbit anda dalam perjalanan ini. Jadi, ambil minuman kesukaan anda, duduk nyaman, dan mari kita mulakan pengembaraan ini bersama!

Apa Itu Visually Hidden?

Sebelum kita masuk ke detil, mari kita mulakan dari dasar. Kelas visually hidden di Bootstrap adalah seperti trik sihir untuk halaman web anda. Ia membolehkan anda menyembunyikan kandungan secara visual tetapi masih menjadikan ia boleh dicapai oleh pembaca skrin. Ia halus, kan?

Imagin anda sedang merancang laman web untuk sekolah sihir ( mari kita panggil Hogwarts, bagaimana? ). Anda mahu termasuk maklumat penting untuk pelajar dengan kecacatan penglihatan, tetapi anda tidak mahu maklumat ini mengelantakkan tata letak visual untuk pelajar lain. Itu di mana kelas visually hidden datang untuk menyelamatkan!

Bagaimana Ia Bertindak?

Kelas visually hidden menggunakan CSS untuk menyembunyikan kandungan daripada pengguna berpenglihatan manakala menjadikan ia tersedia untuk pembaca skrin. Ia seperti mempunyai mantel kebas untuk elemen HTML anda!

Mari kita lihat contoh yang mudah:

<h1>Selamat Datang ke Hogwarts</h1>
<p class="visually-hidden">Kandungan ini adalah untuk pembaca skrin sahaja.</p>

Dalam contoh ini, pengguna berpenglihatan hanya akan melihat "Selamat Datang ke Hogwarts", manakala pengguna pembaca skrin juga akan mendengar "Kandungan ini adalah untuk pembaca skrin sahaja."

Implementasi Klas Visually Hidden di Bootstrap

Sekarang kita mengerti konsep ini, mari kita lihat bagaimana kita boleh implementasikan ia di Bootstrap. Bootstrap menyediakan kita kelas yang siapguna .visually-hidden.

Ini adalah bagaimana anda boleh menggunainya:

<div class="visually-hidden">Kandungan ini disembunyikan secara visual tetapi boleh dicapai oleh pembaca skrin.</div>

Mudah, kan? Hanya tambahkan kelas ke mana-mana elemen yang anda mahu disembunyikan secara visual.

Contoh Praktikal

Mari kita lihat beberapa contoh praktikal di mana anda mungkin menggunakan kelas visually hidden:

1. Pautan Skip Navigation:

<a href="#main-content" class="visually-hidden">Langkau ke kandungan utama</a>
<nav>
<!-- Item menu navigasi -->
</nav>
<main id="main-content">
<!-- Kandungan utama -->
</main>

Ini membolehkan pengguna pembaca skrin melangkau langsung ke kandungan utama, meningkatkan pengalaman navigasi mereka.

2. Label Borang:

<label for="search" class="visually-hidden">Carian</label>
<input type="text" id="search" placeholder="Carian">

Di sini, kita menyediakan label untuk pembaca skrin tanpa mengganggu reka letak visual input carian.

3. Konteks Tambahan:

<button>
Padam
<span class="visually-hidden">item ini daripada troli anda</span>
</button>

Ini menyediakan konteks tambahan untuk pengguna pembaca skrin tanpa mencemarkan teks butang untuk pengguna berpenglihatan.

Magi di Balik Visually Hidden

Sekarang, mari kita lihat di belakang tabir dan lihat bagaimana Bootstrap mengimplementasikan kelas sihir ini. Ini adalah CSS yang membuat ia berkerja:

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

Jangan bimbang jika ini kelihatan seperti nombor sihir daripada kelas pewarnaan tinggi! Mari kita pecahkan ia:

1. position: absolute: Ini mengambil elemen keluar daripada aliran biasa dokumen.
2. width: 1px; height: 1px: Membuat elemen kecil.
3. padding: 0; margin: -1px: Menghapuskan ruang di sekeliling elemen.
4. overflow: hidden: Menyembunyikan apa-apa kandungan yang mungkin melampau.
5. clip: rect(0, 0, 0, 0): Mengiris kandungan ke segi empat 0x0.
6. white-space: nowrap: Menghalang teks daripada melengkung.
7. border: 0: Menghapuskan sebarang sempadan.

Penyataan !important memastikan gaya ini tidak ditimpa oleh peraturan CSS lain.

Visually Hidden vs Display None

Anda mungkin bertanya, " Mengapa tidak hanya gunakan display: none?" Well, murid好奇 saya, ada perbezaan penting:

Properti	Visually Hidden	Display None
Penampilan Visual	disembunyikan	disembunyikan
Akses Pembaca Skrin	Dapat dicapai	Tidak dapat dicapai
Kehadiran DOM	Hadir	Hadir
Impak Tata Letak	Tidak ada impak	Mengganggu tata letak

Seperti yang anda boleh lihat, visually-hidden adalah jalan untuk pergi apabila anda mahu mengekalkan kebolehcapaian sementara menyembunyikan kandungan secara visual.

Visibility Responsif

Bootstrap juga menyediakan kelas untuk togol kebolehlihatan berdasarkan saiz skrin. Kelas ini menggabungkan konsep visually hidden dengan reka letak responsif:

• .d-none: disembunyikan untuk semua saiz skrin
• .d-{sm,md,lg,xl,xxl}-none: disembunyikan hanya pada saiz skrin tertentu
• .d-{sm,md,lg,xl,xxl}-block: kelihatan sebagai elemen blok pada saiz skrin tertentu

Sebagai contoh:

<div class="d-none d-md-block">
Kandungan ini disembunyikan pada skrin kecil tetapi kelihatan pada skrin medium dan yang lebih besar.
</div>

Kesimpulan

Dan di situ anda ada, para penyihir web muda! Kita telah membongkar misteri kelas visually hidden Bootstrap. Ingat, dengan kuasa yang besar datang tanggungjawab yang besar. Gunakan teknik ini bijak untuk membuat laman web yang tidak hanya menarik secara visual tetapi juga boleh dicapai oleh semua pengguna.

Sementara kita menutup pelajaran ini, saya diingatkan oleh seorang pembangun web tua yang pernah katakan kepada saya, "Magi sebenar reka letak web tidak terletak pada apa yang anda boleh lihat, tetapi pada apa yang anda tidak boleh lihat." Jadi, teruskanlah cuba, eksperimen, dan cipta pengalaman web yang sihir untuk semua!

Hingga pengembaraan berikutnya di dunia pembangunan web, terus kod dan tetap curi-curi!

Credits: Image by storyset