Dalam pengembangan web responsif, seringkali kita perlu menampilkan atau menyembunyikan elemen tertentu berdasarkan ukuran layar atau orientasi perangkat. Visibility Classes dalam Foundation menyediakan cara yang mudah dan efisien untuk mengontrol tampilan elemen HTML tanpa perlu menulis banyak kode CSS kustom.¹ Tutorial kali ini akan membahas bagaimana cara memanfaatkan kelas-kelas visibilitas ini.

Konsep Dasar Visibility Classes

Visibility Classes di Foundation bekerja dengan menerapkan kelas CSS tertentu pada elemen HTML.² Kelas-kelas ini akan mengatur properti display atau visibility dari elemen tersebut berdasarkan breakpoint Foundation (small, medium, large, xlarge, xxlarge) atau status perangkat (misalnya, landscape atau portrait).³

Kelas untuk Menyembunyikan Elemen

Foundation menyediakan kelas untuk menyembunyikan elemen pada ukuran layar tertentu:⁴

• .hide: Menyembunyikan elemen di semua ukuran layar menggunakan display: none;.⁵

   

• .show-for-small-only: Hanya menampilkan elemen pada ukuran layar kecil (dan menyembunyikannya pada ukuran yang lebih besar).⁶

   

• .show-for-medium-only: Hanya menampilkan elemen pada ukuran layar medium (dan menyembunyikannya pada ukuran yang lebih kecil atau lebih besar).⁷

   

• .show-for-large-only: Hanya menampilkan elemen pada ukuran layar besar (dan menyembunyikannya pada ukuran yang lebih kecil).⁸

   

• .show-for-xlarge-only: Hanya menampilkan elemen pada ukuran layar sangat besar (dan menyembunyikannya pada ukuran yang lebih kecil).⁹

   

• .show-for-xxlarge-only: Hanya menampilkan elemen pada ukuran layar ekstra sangat besar (dan menyembunyikannya pada ukuran yang lebih kecil).¹⁰

   

• .hide-for-small-only: Menyembunyikan elemen hanya pada ukuran layar kecil (dan menampilkannya pada ukuran yang lebih besar).¹¹

   

• .hide-for-medium-only: Menyembunyikan elemen hanya pada ukuran layar medium (dan menampilkannya pada ukuran yang lebih kecil atau lebih besar).¹²

   

• .hide-for-large-only: Menyembunyikan elemen hanya pada ukuran layar besar (dan menampilkannya pada ukuran yang lebih kecil).¹³

   

• .hide-for-xlarge-only: Menyembunyikan elemen hanya pada ukuran layar sangat besar (dan menampilkannya pada ukuran yang lebih kecil).¹⁴

   

• .hide-for-xxlarge-only: Menyembunyikan elemen hanya pada ukuran layar ekstra sangat besar (dan menampilkannya pada ukuran yang lebih kecil).¹⁵

   

Contoh Penggunaan:

“`html

<div class=”show-for-small-only”>Ini hanya terlihat di layar kecil.</div>

<div class=”hide-for-small-only”>Ini tidak terlihat di layar kecil.</div>

<div class=”show-for-medium-only”>Ini hanya terlihat di layar medium.</div>

<div class=”hide-for-medium-only”>Ini tidak terlihat di layar medium.</div>

<div class=”show-for-large-only”>Ini hanya terlihat di layar besar.</div>

<div class=”hide-for-large-only”>Ini tidak terlihat di layar besar.</div>

“`

Kelas untuk Kontrol Orientasi

Foundation juga menyediakan kelas untuk mengontrol tampilan elemen berdasarkan orientasi perangkat:¹⁶

• .show-for-landscape: Hanya menampilkan elemen saat perangkat berada dalam orientasi landscape (horizontal).¹⁷

   

• .show-for-portrait: Hanya menampilkan elemen saat perangkat berada dalam orientasi portrait (vertikal).¹⁸

   

• .hide-for-landscape: Menyembunyikan elemen saat perangkat berada dalam orientasi landscape.
• .hide-for-portrait: Menyembunyikan elemen saat perangkat berada dalam orientasi portrait.

Contoh Penggunaan:

“`html

<div class=”show-for-portrait”>Tampilan ini dioptimalkan untuk mode potret.</div>

<div class=”show-for-landscape”>Tampilan ini lebih baik dilihat dalam mode lanskap.</div>

“`

Kelas untuk Kontrol Media Cetak

Selain ukuran layar dan orientasi, Anda juga dapat mengontrol tampilan elemen saat dicetak:

• .show-for-print: Hanya menampilkan elemen saat halaman dicetak.¹⁹

   

• .hide-for-print: Menyembunyikan elemen saat halaman dicetak.²⁰

   

Contoh Penggunaan:

“`html

<div class=”hide-for-print”>Navigasi ini tidak perlu dicetak.</div>

<div class=”show-for-print”>Laporan ini dicetak pada tanggal [tanggal].</div>

“`

Menggabungkan Kelas Visibilitas

Anda dapat menggabungkan beberapa kelas visibilitas pada satu elemen untuk kontrol yang lebih spesifik.

Contoh:

“`html

<div class=”show-for-medium-only hide-for-large-only”>

Elemen ini hanya terlihat pada layar medium.21

</div>

“`

Kapan Menggunakan Visibility Classes?

Visibility Classes sangat berguna untuk:

• Menampilkan menu navigasi yang berbeda pada perangkat seluler dan desktop.
• Menyembunyikan elemen dekoratif pada layar kecil untuk meningkatkan kinerja.
• Menampilkan informasi tambahan hanya pada ukuran layar yang lebih besar.
• Mengoptimalkan konten untuk orientasi landscape atau portrait pada perangkat seluler.²²

   

• Menyertakan atau menghilangkan elemen tertentu saat mencetak halaman.

Kesimpulan

Dengan Visibility Classes dari Foundation, Anda memiliki alat yang ampuh untuk mengontrol tampilan elemen berdasarkan berbagai kondisi perangkat dan media.²³ Ini membantu Anda menciptakan pengalaman pengguna yang lebih baik dan responsif tanpa perlu menulis banyak kode CSS kustom. Pada tutorial berikutnya, kita akan menjelajahi komponen UI lain yang disediakan oleh Foundation. Jangan ragu untuk mencoba berbagai kombinasi kelas visibilitas dalam proyek Anda!