Fitur media

Rangkuman dari semua cara bagaimana fitur media memungkinkan Anda merespons perangkat dan preferensi Anda.

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 dengan lebar tetap atau tata letak cair.

Semua itu berubah dengan diperkenalkannya kueri media. Untuk pertama kalinya, desainer dapat bertemu orang setengah jalan. Desainer dapat menyesuaikan tata letak mereka untuk merespons perangkat pengguna.

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

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

Di sisi lain, fitur media telah berkembang secara signifikan. Desainer sekarang dapat bertemu pengguna hingga lebih dari separuh jalan, mengadaptasi desain agar sesuai dengan lebih dari sekadar ukuran layar.

Dimensi area pandang

Sejauh ini, kueri media yang paling populer di web adalah kueri yang menangani lebar area pandang. Namun, bahkan di sini pun, Anda akan diberikan 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 dengan cara tambahan. Saya memperkenalkan aturan tata letak baru di setiap titik henti sementara, bukan mengurungkan aturan sebelumnya.

Pendekatan tambahan ini juga berlaku untuk tinggi badan. Dengan menggunakan min-height, Anda dapat memperkenalkan lebih banyak aturan saat tinggi area pandang yang lebih besar. Misalnya, Anda mungkin memiliki elemen header yang ingin ditambatkan 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 ditambatkan secara default, tetapi tingkat kelekatan akan dihapus jika tidak ada ruang vertikal yang cukup.

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. Class ini juga menawarkan versi tanpa awalan jika Anda ingin menerapkan gaya dengan rasio lebar 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 berbagai gaya untuk rasio aspek yang berbeda-beda dapat menjadi konsekuensi yang tidak diinginkan. Jika Anda tidak memerlukan tingkat kontrol yang mendetail tersebut, 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 spesifik untuk perangkat. Jendela browser layar penuh di laptop biasa akan memiliki nilai orientation sebesar landscape.

Layar

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

@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 tidak perlu menggunakan kueri media resolution apa pun. Kepadatan piksel biasanya hanya menjadi masalah untuk gambar, dan gambar responsif adalah cara menangani kepadatan piksel langsung di HTML.

Di sisi lain, CSS adalah tempat Anda menentukan animasi dan transisi. Anda dapat menyesuaikan animasi dan transisi tersebut untuk merespons kecepatan refresh yang berbeda 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 yang dicetak, misalnya, tidak dapat diperbarui.

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

Nilai update fast berarti layar dimuat ulang 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 tampilan terkait dengan kemampuan perangkat keras. Dalam modul tentang tema, Anda telah melihat cara menentukan properti di file manifes aplikasi web. Salah satu properti tersebut disebut display, dan Anda dapat memberinya nilai fullscreen, standalone, minimum-ui, atau browser. Fitur media display-mode yang sesuai memungkinkan Anda menyesuaikan gaya untuk berbagai opsi tersebut.

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

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

Warna

Ada banyak fitur media untuk mengkueri kemampuan warna sebuah perangkat. Jika ingin menyesuaikan gaya untuk tampilan apa pun yang hanya menghasilkan warna 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 berwarna, 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, kedalaman warna, dan rasio kontras maksimum layar. Kemungkinan nilainya adalah standard atau high. Layar definisi tinggi yang melaporkan nilai dynamic-range dari high diberi ruang warna yang berbeda menggunakan fungsi CSS color() yang 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 tema dan aksesibilitas untuk detail selengkapnya.

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

@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

Ada lebih banyak fitur media yang akan segera 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 berkuota sehingga Anda dapat mengirim aset yang lebih kecil atau lebih sedikit.

Proposal lainnya masih dirumuskan. Dalam modul berikutnya dan terakhir, Anda akan mempelajari proposal untuk fitur media yang menangani berbagai konfigurasi layar.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang fitur media