Fitur media

Desain responsif tidak akan mungkin dilakukan 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.

Semua itu berubah dengan diperkenalkannya kueri media. Untuk pertama kalinya, desainer dapat bertemu dengan 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. Tidak banyak perubahan pada jenis media selama bertahun-tahun. Masih ada empat kemungkinan nilai:

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

Fitur media, di sisi lain, telah berkembang pesat. Desainer kini dapat memenuhi kebutuhan pengguna lebih dari setengahnya, dengan mengadaptasi desain agar sesuai dengan lebih dari sekadar ukuran layar.

Dimensi area pandang

Kueri media yang paling populer di web adalah kueri yang berkaitan dengan lebar area pandang. Namun, di sini pun Anda 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 secara aditif. Saya memperkenalkan aturan tata letak baru di setiap titik henti sementara, bukan membatalkan aturan sebelumnya.

Pendekatan aditif ini juga berfungsi untuk tinggi. Dengan min-height, Anda dapat memperkenalkan lebih banyak aturan saat tinggi area tampilan tersedia lebih banyak. Misalnya, Anda mungkin memiliki elemen header yang ingin ditautkan ke bagian atas jendela browser jika ada ruang vertikal yang cukup.

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

Namun, Anda dapat menggunakan fitur media max-height jika mau. Di sini, header ditambatkan secara default, tetapi kelekatannya 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. Objek ini juga menawarkan versi tanpa awalan jika Anda ingin menerapkan gaya pada rasio lebar terhadap 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 tersebut, fitur media orientation mungkin lebih sesuai dengan kebutuhan Anda. Nilai yang mungkin adalah 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 untuk perangkat. Jendela browser layar penuh di laptop biasa akan memiliki nilai orientation sebesar 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 hadir dalam 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 agar merespons kecepatan refresh yang berbeda menggunakan fitur media update. Fitur media ini melaporkan salah satu dari tiga nilai: none, slow, dan fast.

Nilai update sebesar none berarti tidak ada kecepatan refresh. Misalnya, halaman yang dicetak tidak dapat diperbarui.

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

Nilai update sebesar fast berarti layar di-refresh 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 hardware. Dalam 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 sebesar standalone dalam manifes aplikasi web Anda. Jika seseorang menambahkan situs Anda ke layar utamanya, 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 mengkueri kemampuan warna perangkat. Jika ingin menyesuaikan gaya untuk tampilan apa pun yang hanya menampilkan 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 maksimum, kedalaman warna, dan rasio kontras layar. Kemungkinan nilainya adalah standard atau high. Layar definisi tinggi yang melaporkan nilai dynamic-range sebesar high diberi ruang warna yang berbeda menggunakan fungsi CSS color() 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 mengetahui detail selengkapnya.

Kueri preferensi pengguna

Dengan CSS, Anda dapat berkolaborasi dengan pengguna untuk memastikan mereka dapat mengakses konten Anda dengan cara yang sesuai bagi mereka. Dalam pelajaran ini, Anda telah mempelajari cara menerapkan CSS yang berbeda berdasarkan dimensi dan fitur perangkat pengguna. Namun, Anda juga dapat menerapkan CSS yang berbeda berdasarkan setelan pengguna.

Mode gelap dan terang

Anda dapat merespons preferensi pengguna untuk tema terang atau gelap. Banyak pengguna menetapkan ini sebagai preferensi sistem.

Menetapkan skema warna untuk elemen UIx

Browser menyediakan warna default untuk hal-hal seperti scrollbar dan elemen formulir. Anda dapat menentukan apakah akan menggunakan tema terang untuk pengguna dengan color-scheme: light, atau tema gelap dengan color-scheme: dark. Anda juga dapat menentukan bahwa halaman mendukung keduanya, dengan color-scheme: light dark. Anda dapat menyetelnya di elemen :root atau html untuk menyetel skema seluruh halaman, atau Anda dapat menggantinya untuk elemen tertentu.

Anda juga dapat menetapkan tag meta untuk color-scheme guna menetapkan skema halaman sebelum gaya Anda dimuat. Jika Anda menetapkan color-scheme: normal pada elemen di halaman, elemen tersebut akan menggunakan nilai color-scheme yang Anda tetapkan di tag meta ini.

<meta name="color-scheme" content="dark light">

Fitur media prefers-color-scheme

Anda juga dapat menentukan gaya kustom sebagai respons terhadap tema warna pilihan pengguna dengan kueri media untuk prefers-color-scheme.

light-dark

Jika Anda memberi pengguna pilihan antara tema terang dan gelap, Anda mungkin merasa terlalu banyak kode yang harus ditulis untuk menetapkan setiap warna di dalam kueri media. light-dark() memungkinkan Anda menentukan keduanya dalam satu properti.

Untuk mengaktifkannya, Anda perlu menetapkan color-scheme: light dark pada elemen atau salah satu ancestor-nya. Pertama, Anda menetapkan warna yang akan digunakan dalam mode terang, lalu warna yang akan digunakan dalam mode gelap.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Jika preferensi sistem pengguna disetel untuk meminta mode terang, judul akan berwarna hitam. Jika preferensi pengguna adalah mode gelap, judul akan berwarna putih.

Preferensi kontras

Pengguna Anda mungkin merasa lebih mudah membaca konten dengan kontras tinggi atau rendah, dan dapat menyiapkan sistem mereka untuk mengganti tema Anda dengan tema yang paling sesuai bagi mereka. Peran Anda adalah memastikan bahwa situs Anda tetap berfungsi dengan baik sesuai preferensi mereka.

Anda mungkin ingat di modul Cascade bahwa gaya pengguna lokal !important dapat menggantikan gaya yang dibuat yang disediakan halaman web. Hal ini memungkinkan pengguna menggunakan gaya yang lebih sesuai bagi mereka.

Warna paksa

Windows menyediakan "Tema kontras" yang dapat dipilih pengguna untuk menggantikan tema di situs. Tema ini sering kali memiliki kontras tinggi, dan mungkin dalam mode terang atau gelap. Di CSS, ini disebut warna paksa, dan dalam sebagian besar kasus, situs Anda akan berperilaku seperti yang diharapkan dalam mode ini. Tombol, link, input, dan konten lainnya akan menggunakan warna tema.

Terkadang, Anda mungkin perlu menyesuaikan gaya, misalnya jika Anda menggunakan elemen dengan cara yang tidak standar. Anda dapat menggunakan kueri media @media (forced-colors: active) untuk menerapkan gaya saat pengguna telah mengaktifkan warna paksa.

Dalam beberapa kasus, gaya situs merupakan bagian integral untuk memahami konten itu sendiri, misalnya dengan pemilih warna atau grafik dengan kunci warna. Anda dapat menyetel forced-color-adjust: none; pada elemen untuk memilih tidak menggunakan mode warna paksa. Pastikan untuk hanya menonaktifkan elemen tertentu, dan periksa apakah konten masih dapat diakses dalam mode warna paksa.

Kontras tinggi

Beberapa pengguna juga dapat menyetel sistem mereka untuk meminta peningkatan kontras. Anda dapat menyesuaikan gaya dalam respons dengan kueri media prefers-contrast: more.

Pengurangan gerakan

Anda dapat merespons preferensi pengguna untuk mengurangi gerakan dengan kueri media prefers-reduced-motion. Hal ini sering digunakan untuk menyediakan animasi alternatif yang menghindari gerakan besar yang dapat memicu orang dengan epilepsi, gangguan gerak vestibular, atau sensitivitas migrain. Baca selengkapnya di Pertimbangan saat menggunakan animasi.

Pembuatan Naskah

Pengguna Anda dapat mengunjungi situs Anda dengan JavaScript dinonaktifkan, dan Anda dapat menyesuaikan CSS agar mereka tetap dapat mengakses konten Anda menggunakan kueri media scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Periksa pemahaman Anda

Menguji pengetahuan Anda tentang fitur media