Rangkuman tentang semua cara fitur media memungkinkan Anda merespons perangkat dan preferensi.
Desain responsif tidak akan mungkin terwujud tanpa kueri media. Sebelum ada 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 yang cair.
Semua itu berubah dengan diperkenalkannya kueri media. Untuk pertama kalinya, desainer bisa bertemu orang-orang di tengah jalan. Desainer dapat menyesuaikan tata letak mereka untuk merespons perangkat pengguna.
Ingat, kueri media terdiri dari jenis media opsional dan fitur media wajib. Jenis media tidak mengalami banyak perubahan selama bertahun-tahun. Hanya ada empat kemungkinan nilai:
@media all
@media screen
@media print
@media speech
Di sisi lain, fitur media telah berkembang pesat. Desainer sekarang dapat memenuhi pengguna lebih dari separuh jalan, menyesuaikan desain agar sesuai dengan lebih dari sekadar ukuran layar.
Dimensi area pandang
Sejauh ini, kueri media paling populer di web adalah kueri yang menangani lebar area pandang. Tetapi bahkan di sini, Anda tetap 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 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 berfungsi untuk tinggi. Dengan menggunakan min-height, Anda dapat memasukkan lebih banyak aturan seiring bertambahnya tinggi area pandang yang tersedia. 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 daya tariknya 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. Kode ini juga menawarkan versi tanpa awalan jika Anda ingin menerapkan gaya dengan rasio lebar dan 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 sangat detail, fitur media orientation mungkin lebih sesuai dengan kebutuhan Anda. Kode 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 dikhususkan untuk perangkat tertentu. 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 apa pun. Kepadatan piksel biasanya hanya menjadi masalah untuk gambar, dan gambar responsif adalah cara untuk menangani kepadatan piksel secara langsung dalam 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 yang dicetak, misalnya, tidak dapat diperbarui.
Nilai update slow berarti tampilan tidak dapat dimuat ulang dengan cepat. Tampilan e-ink adalah salah satu contoh layar dengan kecepatan refresh lambat.
Nilai update dari fast berarti tampilan 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. Di modul tentang tema, Anda melihat cara menentukan properti dalam 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 ini.
Misalnya Anda telah memberikan nilai display berupa standalone dalam manifes aplikasi web. Jika seseorang menambahkan situs Anda ke layar berandanya, situs 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 perangkat. Jika ingin menyesuaikan gaya untuk tampilan apa pun 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 pada 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 definisi tinggi yang melaporkan nilai dynamic-range dari high diberi ruang warna berbeda menggunakan fungsi color() CSS 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 tentang tema dan aksesibilitas untuk detail selengkapnya.
Anda dapat menggabungkan fitur media dalam satu kueri media. Anda dapat menentukan cakupan gaya animasi Anda sehingga gaya tersebut hanya diterapkan jika perangkat memiliki kecepatan refresh yang cepat dan pengguna belum menyatakan 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 terbatas atau terbalik.
Fitur media scripting akan memungkinkan Anda menyesuaikan CSS berdasarkan ketersediaan JavaScript.
Fitur media bernama prefers-reduced-data akan memungkinkan pengguna untuk menentukan bahwa mereka menggunakan koneksi berkuota sehingga Anda dapat mengirim aset yang lebih kecil atau lebih sedikit.
Proposal lain 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 pada lebar tertentu seperti @media (width: 1024px)?
1023px dan di bawah 1025px secara bersamaan.min-width dan max-width adalah apa yang tersedia.Kueri media dapat memeriksa perangkat pada 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)