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