Kueri media

Desainer dapat menyesuaikan desain mereka untuk mengakomodasi pengguna. Contoh paling jelas dari hal ini adalah faktor bentuk perangkat pengguna; lebarnya, rasio aspek perangkat, dan sebagainya. Dengan menggunakan kueri media, desainer dapat merespons faktor bentuk yang berbeda ini.

Kueri media dimulai dengan kata kunci @media (CSS aturan), dan dapat digunakan untuk berbagai kasus penggunaan.

Menargetkan berbagai jenis output

Situs sering ditampilkan di layar, tetapi CSS juga dapat digunakan untuk menata gaya situs untuk output lainnya. Anda mungkin ingin halaman web Anda terlihat berbeda di layar, tetapi berbeda saat dicetak. Membuat kueri jenis media memungkinkan hal ini.

Dalam contoh ini, warna latar belakang ditetapkan ke abu-abu. Namun, jika halaman dicetak, warna latar belakang harus transparan. Tindakan ini akan menghemat tinta printer pengguna.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Anda dapat menggunakan aturan at @media di stylesheet seperti itu, atau Anda dapat membuat stylesheet terpisah dan menggunakan atribut media pada elemen link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Jika Anda tidak menentukan jenis media apa pun untuk CSS, CSS akan otomatis memiliki nilai jenis media all. Kedua blok CSS ini setara:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Dua baris HTML ini juga setara:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Kondisi kueri

Anda dapat menambahkan kondisi ke jenis media. Ini disebut kueri media. CSS hanya diterapkan jika jenis medianya cocok dan kondisinya juga benar. Kondisi ini disebut fitur media.

Berikut adalah sintaksis untuk kueri media:

@media type and (feature)

Anda dapat menggunakan kueri media pada elemen link jika gaya Anda berada dalam stylesheet terpisah:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Katakanlah Anda ingin menerapkan gaya yang berbeda bergantung pada apakah jendela browser berada dalam mode lanskap atau tidak (lebar area pandang lebih besar dari tingginya) atau mode potret (tinggi area pandang lebih besar dari lebarnya). Ada fitur media bernama orientation yang dapat Anda gunakan untuk mengujinya:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Atau, jika Anda lebih suka memiliki stylesheet terpisah:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Dalam hal ini, jenis medianya adalah all. Karena itu adalah nilai defaultnya, Anda dapat membiarkannya:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Atau menggunakan stylesheet terpisah:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Meskipun menggunakan stylesheet terpisah untuk jenis media yang berbeda—seperti print—tidak apa-apa, mungkin sebaiknya gunakan stylesheet terpisah untuk setiap kueri media. Sebagai gantinya, gunakan aturan at @media.

Menyesuaikan gaya berdasarkan ukuran area pandang

Untuk desain responsif, salah satu fitur media yang paling berguna melibatkan dimensi area pandang browser. Untuk menerapkan gaya saat jendela browser lebih lebar dari lebar tertentu, gunakan min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Gunakan fitur media max-width untuk menerapkan gaya di bawah lebar tertentu:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Anda dapat menggunakan unit panjang CSS apa pun dalam kueri media. Jika konten Anda sebagian besar berbasis gambar, piksel mungkin merupakan pilihan yang paling tepat. Jika konten Anda sebagian besar berbasis teks, mungkin lebih baik menggunakan unit relatif yang didasarkan pada ukuran teks, seperti em atau ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Anda juga dapat menggabungkan kueri media untuk menerapkan lebih dari satu kondisi. Gunakan kata and untuk menggabungkan kueri media Anda:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Memilih titik henti sementara berdasarkan konten

Titik saat kondisi fitur media menjadi benar (true) disebut titik henti sementara. Sebaiknya pilih titik henti sementara berdasarkan konten Anda, bukan ukuran perangkat yang populer, karena fitur tersebut dapat berubah di setiap siklus rilis teknologi.

Dalam contoh ini, 50em adalah titik saat baris teks menjadi terlalu panjang. Jadi, titik henti sementara dibuat untuk membuat antarmuka lebih mudah dibaca. Dengan menggunakan properti column-count, teks akan dibagi menjadi dua kolom mulai dari titik tersebut.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kombinasi

Anda dapat menggunakan kueri media berdasarkan tinggi area pandang, bukan hanya lebarnya. Hal ini dapat berguna untuk mengoptimalkan konten antarmuka "paruh atas". Pada contoh sebelumnya, jika pembaca menggunakan jendela browser yang lebar tetapi pendek, mereka harus men-scroll ke bawah satu kolom, lalu men-scroll kembali ke atas untuk membuka bagian atas kolom kedua. Akan lebih aman untuk hanya menerapkan kolom saat area pandang cukup lebar dan cukup tinggi.

Anda dapat menggabungkan kueri media sehingga gaya hanya berlaku jika semua kondisi benar. Dalam contoh ini, area pandang harus memiliki lebar minimal 50em dan tinggi 60em agar gaya kolom dapat diterapkan. Titik henti sementara tersebut dipilih berdasarkan jumlah konten.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Contoh ini menunjukkan cara kueri media dapat digunakan untuk menyesuaikan desain dengan faktor bentuk perangkat pengguna, tetapi ini hanya sekilas tentang kemungkinan yang ada. Kueri media dapat jauh melampaui lebar dan tinggi, mengakses preferensi pengguna untuk fitur aksesibilitas dan warna tema. Menggunakan kueri media untuk membuat penyesuaian tata letak adalah awal yang baik untuk desain responsif, yang dibangun di atas fitur-fitur ini dan banyak lagi.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang kueri media responsif.