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 berbagai faktor bentuk ini.

Kueri media dimulai dengan kata kunci @media (aturan at CSS), 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. 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 media 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)">

Misalnya, Anda ingin menerapkan gaya yang berbeda-beda, bergantung pada apakah jendela browser dalam mode lanskap (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 default, Anda dapat menghapusnya jika ingin:

@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 berbagai jenis media—seperti print—mungkin tidak masalah, mungkin sebaiknya jangan 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 disebut titik henti sementara. Sebaiknya pilih titik henti sementara berdasarkan konten Anda, bukan ukuran perangkat populer, karena ukuran tersebut dapat berubah dengan 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. Sebaiknya hanya terapkan kolom jika 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 30em agar gaya kolom dapat diterapkan. Titik henti sementara tersebut dipilih berdasarkan jumlah konten.

@media (min-width: 50em) and (min-height: 30em) {
  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 kemungkinannya. Kueri media dapat jauh melampaui lebar dan tinggi, mengakses preferensi pengguna untuk fitur aksesibilitas dan warna tema. Menggunakan kueri media untuk melakukan penyesuaian tata letak adalah awal yang bagus untuk desain responsif, yang dibuat berdasarkan fitur ini dan lainnya.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang kueri media responsif.