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 aspek lainnya. Dengan menggunakan kueri media, desainer dapat merespons berbagai faktor bentuk ini.

Kueri media dimulai dengan kata kunci @media (aturan @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 dengan satu cara di layar, tetapi berbeda saat dicetak. Jenis media kueri memungkinkan hal ini.

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

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

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

Anda dapat menggunakan aturan @ @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 tersebut 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 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, bergantung pada apakah jendela browser dalam mode lanskap (lebar area pandang lebih besar daripada tingginya) atau mode potret (tinggi area pandang lebih besar daripada 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 media adalah all. Karena itu adalah nilai default, Anda dapat menghapusnya jika mau:

@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, sebaiknya jangan menggunakan stylesheet terpisah untuk setiap kueri media. Sebagai gantinya, gunakan aturan @@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. */
}

Kueri media ini juga dapat ditulis menggunakan fitur media width dan operator kurang dari atau sama dengan.

@media (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 paling cocok. Jika konten Anda sebagian besar berbasis teks, sebaiknya gunakan 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. /*
}

Hal ini juga dapat ditulis menggunakan sintaksis rentang.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

Pilih titik henti 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 dan tidak nyaman dibaca. Jadi, titik henti dibuat untuk membuat antarmuka lebih mudah dibaca. Dengan menggunakan properti column-count, teks 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 "di 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 mencapai bagian atas kolom kedua. Akan lebih aman jika hanya menerapkan kolom saat area tampilan cukup lebar dan tinggi

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

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

Anda juga dapat menggunakan kata kunci or dan not untuk mengekspresikan situasi yang lebih kompleks saat Anda ingin menerapkan gaya. Hal ini dapat menjadi rumit secara logika, jadi pastikan untuk menguji bahwa hal tersebut berfungsi dan berinteraksi seperti yang Anda harapkan.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

Contoh ini menunjukkan cara kueri media dapat digunakan untuk menyesuaikan desain dengan faktor bentuk perangkat pengguna, tetapi ini hanyalah sebagian kecil dari kemungkinannya. Kueri media dapat melampaui lebar dan tinggi, mengakses preferensi pengguna untuk fitur aksesibilitas dan warna tema. Menggunakan kueri media untuk melakukan penyesuaian tata letak adalah awal yang baik untuk desain responsif, yang dibangun berdasarkan fitur ini dan lainnya.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang kueri media responsif.