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.
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)
?
1023px
dan di bawah 1025px
secara bersamaan.min-width
dan max-width
adalah yang tersedia.Kueri media dapat memeriksa perangkat di aspect-ratio
tertentu seperti @media (aspect-ratio: 4/3)
?
aspect-ratio
.Manakah kueri media warna yang valid?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
Manakah dari kueri media preferensi pengguna berikut yang valid?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)