@Media CSS at-rule pada CSS memungkinkan kita menentukan sekumpulan CSS yang hanya diterapkan ke jenis media tertentu yang juga dapat kita tentukan dalam deklarasi @media. Kita akan lanjutkan pembahasan mengenai @media RULE pada CSS. Bagi teman-teman yang belum mengikuti part-2, bisa klik disini ya .

Catatan

Sintaks singkatan atau biasa lebih dikenal dengan istilah shorthand ditawarkan untuk kueri media yang berlaku untuk semua jenis media; kata kunci semua dapat ditinggalkan (bersama dengan trailing ‘dan’). Artinya, jika jenis media tidak secara eksplisit diberikan itu semua. Misalnya, keduanya identik:

 

Nama jenis media itu case-insensitive, mereka itu ga peka

Jenis media di atas termasuk dalam kelompok media yang berbeda. Tabel berikut menunjukkan tipe mana yang termasuk dalam grup mana:

Hubungan antara kelompok media dan jenis media
Tipe Media Grup Media
continuous, paged visual, audio, speech, tactile grid, bitmap interactive, static
print paged visual bitmap static
screen continuous visual, audio bitmap both
speech continuous speech N/A both

 

Contoh

Berikut ini mengubah tata letak bilah navigasi pada layar kecil (ketika lebar viewport kurang dari 50em) sehingga item menu diletakkan di atas satu sama lain, daripada duduk bersebelahan.