Fitur media

Ringkasan semua cara fitur media memungkinkan Anda merespons perangkat dan preferensi.

Desain responsif tidak akan mungkin tanpa kueri media. Sebelum kueri media, tidak ada cara untuk mengetahui jenis perangkat yang digunakan orang untuk mengunjungi situs Anda. Desainer harus membuat asumsi. Asumsi tersebut dienkode ke dalam desain lebar tetap atau tata letak fleksibel.

Semuanya berubah dengan diperkenalkannya kueri media. Untuk pertama kalinya, desainer dapat memenuhi kebutuhan pengguna. Desainer dapat menyesuaikan tata letak mereka untuk merespons perangkat pengguna.

Ingat, kueri media terdiri dari jenis media opsional dan fitur media wajib. Tidak banyak perubahan pada jenis media selama bertahun-tahun. Masih ada empat kemungkinan nilai:

@media all
@media screen
@media print
@media speech

Di sisi lain, fitur media telah diperluas secara signifikan. Desainer kini dapat memenuhi kebutuhan pengguna lebih dari sekadar ukuran layar, dengan menyesuaikan desain agar sesuai dengan lebih banyak hal.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Dimensi area pandang

Kueri media yang paling populer di web sejauh ini adalah kueri yang menangani lebar area pandang. Namun, di sini pun Anda akan diberi pilihan. Anda dapat menggunakan fitur media max-width untuk menerapkan gaya di bawah lebar tertentu, atau Anda dapat menggunakan fitur media min-width untuk menerapkan gaya di atas lebar tertentu.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}
@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Secara pribadi, saya lebih suka menggunakan min-width. Saya menerapkan gaya tata letak secara tambahan. Saya memperkenalkan aturan tata letak baru di setiap titik henti sementara, bukan mengurungkan aturan sebelumnya.

Pendekatan tambahan ini juga berfungsi untuk tinggi. Dengan min-height, Anda dapat memperkenalkan lebih banyak aturan seiring dengan semakin banyaknya tinggi area pandang yang tersedia. Misalnya, Anda mungkin memiliki elemen header yang ingin Anda anchor ke bagian atas jendela browser jika ada cukup ruang vertikal.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Namun, Anda dapat menggunakan fitur media max-height jika mau. Di sini, header ditautkan secara default, tetapi kemelekatan akan dihapus jika tidak ada cukup ruang vertikal.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Memilih antara awalan min- dan max- tidak hanya berlaku untuk width dan height. Fitur media aspect-ratio menawarkan pilihan yang sama. Library ini juga menawarkan versi tanpa awalan jika Anda ingin menerapkan gaya dengan rasio lebar ke tinggi yang tepat.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Menyediakan gaya yang berbeda untuk rasio aspek yang berbeda dapat dengan cepat menjadi tidak terkendali. Jika Anda tidak memerlukan tingkat kontrol yang terperinci, fitur media orientation mungkin lebih sesuai dengan kebutuhan Anda. Class ini memiliki dua kemungkinan nilai: portrait atau landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Meskipun istilah "potret" dan "lanskap" paling sering digunakan untuk merujuk pada orientasi perangkat seluler, fitur media orientation tidak khusus perangkat. Jendela browser layar penuh di laptop biasa akan memiliki nilai orientation landscape.

Layar

Layar yang berbeda memiliki kepadatan piksel yang berbeda, yang diukur dalam dpi, titik per inci. Anda dapat menyesuaikan gaya untuk kepadatan piksel yang berbeda menggunakan fitur media resolution. Seperti aspect-ratio, resolution memiliki tiga variasi: minimum, maksimum, dan persis.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Anda mungkin tidak perlu menggunakan kueri media resolution. Kepadatan piksel biasanya hanya menjadi masalah untuk gambar, dan gambar responsif adalah cara untuk menangani kepadatan piksel secara langsung di HTML.

Di sisi lain, CSS adalah tempat Anda menentukan animasi dan transisi. Anda dapat menyesuaikan animasi dan transisi tersebut untuk merespons berbagai kecepatan refresh menggunakan fitur media update. Fitur media ini melaporkan salah satu dari tiga nilai: none, slow, dan fast.

Nilai update none berarti tidak ada kecepatan refresh. Halaman cetak, misalnya, tidak dapat diperbarui.

Nilai update slow berarti layar tidak dapat dimuat ulang dengan cepat. Layar e-ink adalah salah satu contoh layar dengan kecepatan refresh lambat.

Nilai update fast berarti layar dimuat ulang dengan cukup cepat untuk menangani animasi dan transisi.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Tidak semua aspek layar terkait dengan kemampuan hardware. Di modul tentang tema, Anda telah melihat cara menentukan properti dalam file manifes aplikasi web. Salah satu properti tersebut disebut display, dan Anda dapat memberikan nilai fullscreen, standalone, minimum-ui, atau browser. Fitur media display-mode yang sesuai memungkinkan Anda menyesuaikan gaya untuk berbagai opsi ini.

Misalnya, Anda telah memberikan nilai display standalone dalam manifes aplikasi web. Jika seseorang menambahkan situs Anda ke layar utama, situs akan diluncurkan tanpa antarmuka browser. Anda dapat memutuskan untuk menampilkan tombol kembali bagi pengguna tersebut.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Warna

Ada banyak fitur media untuk membuat kueri kemampuan warna perangkat. Jika ingin menyesuaikan gaya untuk layar yang hanya menghasilkan nuansa abu-abu, Anda dapat menggunakan fitur media monochrome tanpa nilai apa pun.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Ada fitur media color yang sesuai.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Untuk layar warna, Anda dapat menulis kueri dengan fitur media color-gamut, color-index, atau dynamic-range. Semuanya melaporkan detail spesifik tentang kemampuan warna layar.

Dalam contoh ini, nilai warna diperbarui sebagai respons terhadap fitur media dynamic-range, yang melaporkan kombinasi kecerahan maksimum, kedalaman warna, dan rasio kontras layar. Kemungkinan nilainya adalah standard atau high. Layar beresolusi tinggi yang melaporkan nilai dynamic-range high diberi ruang warna yang berbeda menggunakan fungsi color() CSS baru.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Interaksi

Fitur media juga dapat melaporkan jenis mekanisme input yang digunakan untuk berinteraksi dengan situs Anda: hover, any-hover, pointer, dan any-pointer. Lihat modul tentang interaksi untuk detail selengkapnya.

Preferensi

Ada berbagai kueri media yang memungkinkan Anda merespons preferensi pengguna: prefers-color-scheme, prefers-contrast, dan prefers-reduced-motion. Lihat modul tentang tema dan aksesibilitas untuk mengetahui detail selengkapnya.

Anda dapat menggabungkan fitur media dalam satu kueri media. Anda dapat menentukan cakupan gaya animasi sehingga hanya diterapkan jika perangkat memiliki kecepatan refresh yang cepat dan pengguna belum menyatakan preferensi untuk mengurangi gerakan.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Fitur media lainnya

Masih banyak fitur media lainnya yang akan hadir.

Fitur media forced-colors dan inverted-colors akan melaporkan apakah perangkat menggunakan palet warna yang dibatasi atau terbalik.

Fitur media scripting akan memungkinkan Anda menyesuaikan CSS berdasarkan ketersediaan JavaScript.

Fitur media yang disebut prefers-reduced-data akan memungkinkan pengguna menentukan bahwa mereka menggunakan koneksi berbayar sehingga Anda dapat mengirim aset yang lebih kecil atau lebih sedikit.

Proposal lainnya masih dalam proses perumusan. Di modul berikutnya dan terakhir, Anda akan mempelajari proposal untuk fitur media yang menangani berbagai konfigurasi layar.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang fitur media

Kueri media dapat memeriksa perangkat pada lebar tertentu seperti @media (width: 1024px)?

Benar
Lebar tertentu hanya dapat dicapai dengan memeriksa lebar di atas 1023px dan di bawah 1025px secara bersamaan.
Salah
min-width dan max-width adalah yang tersedia.

Kueri media dapat memeriksa perangkat di aspect-ratio tertentu seperti @media (aspect-ratio: 4/3)?

Benar
Khusus untuk rasio aspek, satu rasio dapat dicocokkan.
Salah
Opsi ini ada untuk aspect-ratio.

Manakah kueri media warna yang valid?

@media (color)
Cocok dengan perangkat warna apa pun.
@media (monochrome)
Mencocokkan perangkat apa pun tanpa kemampuan warna.
@media (color-gamut: srgb)
Mencocokkan perangkat dengan kemampuan warna sRGB.
@media (min-color-index: 15000)
Mencocokkan perangkat dengan minimal 15 ribu warna yang tersedia.
@media (dynamic-range: high)
Mencocokkan perangkat yang mampu menampilkan rentang warna HD.

Manakah dari kueri media preferensi pengguna berikut yang valid?

@media (prefers-color-scheme: dark)
Cocok jika pengguna menyetel sistem operasinya ke mode gelap.
@media (prefers-colors: high-definition)
Tidak nyata.
@media (prefers-reduced-motion: reduce)
Cocok jika pengguna menyetel sistem operasinya untuk mengurangi gerakan.
@media (prefers-contrast: more)
Cocok jika pengguna menyetel sistem operasinya ke kontras yang lebih tinggi.
@media (prefers-site-speed: fast)
Tidak nyata.