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 (CSS yang sesuai aturan), dan dapat digunakan untuk berbagai kasus penggunaan.

Menargetkan berbagai jenis output

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

Dalam contoh ini, warna latar belakang disetel 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 @media at-aturan 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 Anda, 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;
   }
}

Kedua 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 dengan kueri media. CSS hanya diterapkan jika jenis media cocok dan kondisinya juga benar. Kondisi ini disebut fitur media.

Ini adalah sintaksis untuk kueri media:

@media type and (feature)

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

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

Misalnya Anda ingin menerapkan gaya yang berbeda, bergantung pada apakah jendela browser berada 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 merupakan nilai default, Anda dapat mengabaikannya 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 jenis media yang berbeda—seperti print—mungkin tidak masalah, mungkin sebaiknya gunakan stylesheet terpisah untuk setiap kueri media. Sebagai gantinya, gunakan @media at-rules.

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 sebagian besar konten Anda berbasis gambar, piksel mungkin yang paling masuk akal. Jika konten Anda sebagian besar berbasis teks, mungkin lebih masuk akal untuk 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 true disebut titik henti sementara. Sebaiknya pilih titik henti sementara berdasarkan konten, bukan ukuran perangkat populer, karena ukuran dapat berubah pada setiap siklus rilis teknologi.

Dalam contoh ini, 50em adalah titik saat baris teks menjadi terlalu panjang. Jadi, titik henti sementara dibuat agar antarmuka lebih mudah dibaca. Menggunakan properti column-count, teks dibagi menjadi dua kolom sejak saat itu.

@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 "di paruh atas". Di contoh sebelumnya, jika pembaca menggunakan jendela browser yang lebar tetapi pendek, mereka harus men-scroll satu kolom ke bawah, lalu men-scroll kembali ke atas untuk mencapai bagian atas kolom kedua. Akan lebih aman jika hanya menerapkan kolom saat area pandang cukup lebar dan tinggi.

Anda bisa mengombinasikan kueri media sehingga gaya hanya berlaku jika semua kondisi adalah 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 bagaimana kueri media dapat digunakan untuk menyesuaikan desain dengan faktor bentuk perangkat pengguna, tetapi ini hanya mencakup permukaan kemungkinan. Kueri media dapat lebih dari sekadar 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 didasarkan pada fitur-fitur ini dan banyak lagi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang kueri media responsif.