Mengontrol tata letak makro dan mikro di era baru desain web responsif.
Desain Responsif Saat Ini
Saat ini, saat menggunakan istilah: "desain responsif", Anda kemungkinan besar memikirkan penggunaan kueri media untuk mengubah tata letak saat mengubah ukuran desain dari ukuran seluler, ke ukuran tablet, hingga ukuran desktop.
Namun, dalam waktu dekat, persepsi tentang desain responsif ini mungkin dianggap usang seperti penggunaan tabel untuk tata letak halaman.
Kueri media berbasis area tampilan memberi Anda beberapa alat yang canggih, tetapi tidak memiliki banyak kehalusan. Mereka tidak memiliki kemampuan untuk merespons kebutuhan pengguna, dan kemampuan untuk menyuntikkan gaya responsif ke dalam komponen itu sendiri.
Anda dapat menggunakan informasi area tampilan global untuk menata gaya komponen, tetapi komponen tersebut tetap tidak memiliki gaya, dan hal ini tidak berfungsi saat sistem desain kami berbasis komponen, bukan berbasis halaman.
Kabar baiknya, ekosistem ini berubah, dan perubahannya cukup cepat. CSS terus berkembang, dan era baru desain responsif sudah di depan mata.
Kita melihat hal ini terjadi sekitar setiap 10 tahun. 10 tahun yang lalu, sekitar tahun 2010-2012, kami melihat perubahan besar dengan desain responsif dan seluler, serta munculnya CSS3.
Jadi, sekali lagi, ekosistem siap untuk beberapa perubahan besar pada CSS. Para engineer di Chrome dan di seluruh platform web sedang membuat prototipe, menentukan spesifikasi, dan memulai penerapan untuk era desain responsif berikutnya.
Update ini mencakup fitur media berbasis preferensi pengguna, kueri penampung, dan kueri media untuk jenis layar baru, seperti layar perangkat foldable.
Responsif terhadap pengguna
Fitur media preferensi pengguna baru memberi Anda kemampuan untuk menata gaya web yang sesuai dengan preferensi dan kebutuhan spesifik pengguna. Artinya, fitur media preferensi memungkinkan Anda menyesuaikan pengalaman pengguna dengan pengalaman pengguna Anda.
Fitur media preferensi pengguna ini mencakup:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Dan lainnya
Fitur preferensi mengambil preferensi yang telah ditetapkan pengguna di sistem operasinya, dan membantu membangun pengalaman web yang lebih andal dan dipersonalisasi, terutama bagi mereka yang memiliki kebutuhan aksesibilitas.
prefers-reduced-motion
Pengguna yang telah menyetel preferensi sistem operasi untuk mengurangi gerakan, meminta lebih sedikit animasi saat menggunakan komputer secara umum. Oleh karena itu, kemungkinan mereka tidak akan menyukai layar pengantar yang mencolok, animasi balik kartu, pemuat yang rumit, atau animasi mencolok lainnya saat menggunakan web.
Dengan prefers-reduced-motion, Anda dapat mendesain halaman dengan mempertimbangkan gerakan yang dikurangi, dan menciptakan pengalaman yang ditingkatkan dengan gerakan bagi mereka yang tidak menyetel preferensi ini.
Kartu ini memiliki informasi di kedua sisinya. Pengalaman dengan gerakan yang dikurangi secara mendasar adalah crossfade untuk menampilkan informasi tersebut, sedangkan pengalaman dengan gerakan yang ditingkatkan adalah flip kartu.
Prefers-reduced-motion tidak boleh berarti "tanpa gerakan", karena gerakan sangat penting untuk menyampaikan informasi secara online. Sebagai gantinya, berikan pengalaman dasar yang solid yang memandu pengguna Anda tanpa gerakan yang tidak perlu, dan tingkatkan pengalaman tersebut secara progresif untuk pengguna Anda tanpa kebutuhan atau preferensi aksesibilitas tersebut.
prefers-color-scheme
Fitur media preferensi lainnya adalah
prefers-color-scheme. Fitur ini membantu Anda menyesuaikan UI dengan tema yang disukai pengguna. Di sistem operasi mereka, baik di desktop maupun perangkat seluler, pengguna dapat menyetel preferensi untuk tema terang, gelap, atau otomatis, yang berubah bergantung pada waktu.
Jika Anda menyiapkan halaman menggunakan properti kustom CSS, penukaran nilai warna akan menjadi mudah. Anda dapat memperbarui nilai tema warna dengan cepat, seperti backgroundColor dan textOnPrimary agar disesuaikan secara dinamis dengan tema baru dalam kueri media.
Untuk mempermudah pengujian beberapa kueri preferensi ini, Anda dapat menggunakan DevTools untuk emulasi, bukan membuka preferensi sistem setiap kali.
Mendesain untuk tema gelap
Saat mendesain untuk tema gelap, bukan hanya tentang membalikkan warna latar belakang dan teks atau scroll bar gelap. Ada beberapa pertimbangan yang mungkin tidak Anda sadari. Misalnya, Anda mungkin perlu menurunkan saturasi warna pada latar belakang gelap untuk mengurangi getaran visual.
Daripada menggunakan bayangan untuk menciptakan kedalaman dan menarik elemen ke depan, Anda mungkin ingin menggunakan cahaya dalam warna latar belakang elemen untuk menariknya ke depan. Hal ini karena bayangan tidak akan efektif pada latar belakang gelap.
Tema gelap tidak hanya memberikan pengalaman pengguna yang lebih disesuaikan, tetapi juga dapat meningkatkan daya tahan baterai secara signifikan di layar AMOLED. Layar tersebut adalah layar yang kita lihat di ponsel kelas atas yang lebih baru, dan layar tersebut menjadi semakin populer di seluruh perangkat seluler.
Studi Android tahun 2018 tentang tema gelap menunjukkan penghematan daya hingga 60%, bergantung pada kecerahan layar dan keseluruhan antarmuka pengguna. Statistik 60% berasal dari perbandingan layar pemutaran YouTube dengan video yang dijeda pada kecerahan layar 100% menggunakan tema gelap untuk UI aplikasi vs. tema terang.
Anda harus selalu memberikan pengalaman tema gelap kepada pengguna jika memungkinkan.
Responsif terhadap penampung
Salah satu area baru yang paling menarik di CSS adalah kueri penampung, yang juga sering disebut kueri elemen. Sulit untuk meremehkan apa yang akan dilakukan oleh peralihan dari desain responsif berbasis halaman ke desain responsif berbasis penampung untuk mengembangkan ekosistem desain.
Berikut adalah contoh kemampuan canggih yang disediakan kueri penampung. Anda dapat memanipulasi gaya elemen kartu apa pun, termasuk daftar link, ukuran font, dan tata letak keseluruhan berdasarkan penampung induknya:
Contoh ini menunjukkan dua komponen identik dengan dua ukuran penampung yang berbeda, keduanya menempati ruang dalam tata letak yang dibuat menggunakan CSS Grid. Setiap komponen sesuai dengan alokasi ruang uniknya, dan menyesuaikan gaya tampilannya.
Fleksibilitas ini tidak mungkin dilakukan hanya dengan kueri media.
Kueri penampung memberikan pendekatan yang jauh lebih dinamis untuk desain responsif. Artinya, jika Anda menempatkan komponen kartu ini di sidebar atau bagian hero atau dalam petak di dalam isi utama halaman, komponen itu sendiri memiliki informasi dan ukuran responsif sesuai dengan penampung, bukan area tampilan
Hal ini memerlukan aturan @ @container. Aturan ini berfungsi dengan cara yang sama seperti kueri media dengan @media, tetapi @container mengkueri penampung induk untuk mendapatkan informasi, bukan viewport dan agen pengguna.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Pertama, tetapkan penampungan pada elemen induk. Kemudian, tulis kueri @container
untuk menata gaya elemen apa pun dalam penampung berdasarkan ukurannya,
menggunakan min-width atau max-width.
Kode di atas menggunakan max-width, dan menetapkan link ke display:none, serta
mengurangi ukuran font waktu saat penampung kurang dari lebar 850px.
Kartu kueri penampung
Di situs demo tanaman ini, setiap kartu produk, termasuk yang ada di hero, sidebar item yang baru dilihat, dan petak produk, semuanya merupakan komponen yang sama persis, dengan markup yang sama.
Tidak ada kueri media yang digunakan untuk membuat seluruh tata letak ini, hanya kueri penampung. Hal ini memungkinkan setiap kartu produk beralih ke tata letak yang tepat untuk mengisi ruangnya. Misalnya, petak menggunakan tata letak kolom minmax untuk memungkinkan elemen mengalir ke ruangnya, dan menata ulang petak saat ruang tersebut terlalu padat (yang berarti mencapai ukuran minimum).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Jika ada setidaknya 350px ruang dalam petak, tata letak kartu akan
horizontal dengan ditetapkan ke display: flex, yang memiliki flex-direction
default "row".
Dengan ruang yang lebih sedikit, kartu produk akan bertumpuk. Setiap kartu produk memiliki gaya sendiri, sesuatu yang tidak mungkin dilakukan hanya dengan gaya global.
Mencampur Kueri Container dengan Kueri Media
Kueri penampung memiliki banyak kasus penggunaan—salah satunya adalah komponen kalender. Anda dapat menggunakan kueri penampung untuk menata ulang acara kalender dan segmen lainnya berdasarkan lebar yang tersedia dari induknya.
Penampung demo ini membuat kueri untuk mengubah tata letak dan gaya tanggal dan hari dalam seminggu di kalender, serta menyesuaikan margin dan ukuran font pada acara terjadwal agar lebih sesuai dengan ruang.
Kemudian, gunakan kueri media untuk mengubah seluruh tata letak untuk ukuran layar yang lebih kecil. Contoh ini menunjukkan betapa efektifnya menggabungkan kueri media (menyesuaikan gaya global atau makro) dengan kueri penampung (menyesuaikan elemen turunan penampung dan gaya mikro-nya).
Jadi, sekarang kita dapat memikirkan tata letak Makro dan Mikro dalam komponen UI yang sama untuk memungkinkan beberapa keputusan desain yang sangat bagus dan bernuansa.
Menggunakan kueri penampung saat ini
Demo ini kini tersedia untuk dimainkan di balik tanda di Chrome Canary. Buka
about://flags di Canary dan aktifkan flag #enable-container-queries.
Hal ini akan mengaktifkan dukungan untuk nilai @container, inline-size, dan block-size
untuk properti contain, dan penerapan Petak LayoutNG.
Tombol ini juga mengaktifkan fitur Chrome DevTools yang sesuai. Pelajari cara memeriksa dan men-debug kueri penampung di DevTools.
Gaya yang di-scope
Untuk membangun kueri penampung, gunakan gaya tercakup dengan @scope untuk membatasi jangkauan pemilih Anda.
Gaya yang di-scope memungkinkan gaya khusus komponen untuk menghindari konflik penamaan, sesuatu yang sudah memungkinkan kita lakukan dalam framework oleh banyak framework dan plugin seperti modul CSS. Gaya yang tercakup memungkinkan Anda menulis gaya yang dienkapsulasi secara native untuk komponen dengan CSS yang mudah dibaca tanpa perlu menyesuaikan markup.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Penetapan cakupan memungkinkan Anda membuat pemilih "berbentuk donat", tempat Anda dapat menentukan batas atas dan bawah. Pemilih yang ada dalam aturan @scope akan dicocokkan
dalam batas tersebut.
Contohnya adalah panel tab, tempat Anda ingin tab mendapatkan gaya yang tercakup, tetapi panel dalam tab tersebut tidak terpengaruh oleh gaya yang tercakup tersebut.
Responsif terhadap faktor bentuk
Topik berikutnya dalam percakapan kita tentang era baru desain responsif adalah pergeseran faktor bentuk, dan kemungkinan yang terus berkembang dari apa yang perlu kita desain sebagai komunitas web (seperti layar yang dapat berubah bentuk atau virtual reality).
Layar foldable atau fleksibel, dan desain untuk rentang layar adalah salah satu contoh di mana kita dapat melihat perubahan faktor bentuk saat ini. Rentang layar adalah spesifikasi lain yang sedang dikerjakan untuk mencakup faktor bentuk dan kebutuhan baru ini.
Kueri media
eksperimental untuk rentang layar dapat membantu kami di sini. Saat ini berperilaku seperti ini: @media
(spanning: <type of fold>). Demo ini menyiapkan tata letak petak dengan dua kolom:
satu memiliki lebar --sidebar-width, yang secara default 5rem, dan yang lainnya adalah
1fr. Saat tata letak dilihat di layar ganda yang memiliki lipatan vertikal
tunggal, nilai --sidebar-width diperbarui dengan nilai lingkungan dari
lipatan kiri.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
Hal ini memungkinkan tata letak tempat sidebar, dalam hal ini navigasi, mengisi ruang salah satu lipatan, tempat UI aplikasi mengisi lipatan lainnya. Hal ini mencegah terjadinya "lipatan" di UI.
Anda dapat menguji layar perangkat foldable di emulator Chrome DevTools untuk membantu men-debug dan membuat prototipe tampilan layar penuh langsung di browser.
Kesimpulan
Mengeksplorasi desain UI di luar layar datar adalah alasan lain mengapa kueri penampung dan gaya yang tercakup sangat penting. Hal ini memberi Anda kesempatan untuk mengelompokkan gaya komponen dari tata letak halaman dan gaya global, serta gaya pengguna, sehingga memungkinkan desain responsif yang lebih tangguh. Artinya, Anda kini dapat mendesain tata letak makro menggunakan kueri media berbasis halaman, termasuk nuansa rentang layar. Pada saat yang sama, gunakan tata letak mikro dengan kueri penampung pada komponen, dan tambahkan kueri media berbasis preferensi pengguna untuk menyesuaikan pengalaman pengguna berdasarkan preferensi dan kebutuhan unik mereka.
Ini adalah responsif baru.
Tata letak ini menggabungkan tata letak makro dengan tata letak mikro, dan di atas semua itu, tata letak ini mempertimbangkan penyesuaian pengguna dan faktor bentuk.
Setiap perubahan ini saja akan merupakan perubahan yang cukup besar dalam cara kita mendesain web. Namun, jika digabungkan, keduanya menandakan perubahan besar dalam cara kita mengonseptualisasikan desain responsif. Sekarang saatnya memikirkan desain responsif di luar ukuran area tampilan, dan mulai mempertimbangkan semua sumbu baru ini untuk pengalaman berbasis komponen dan yang disesuaikan yang lebih baik.
Era desain responsif berikutnya telah hadir, dan Anda sudah dapat mulai mengeksplorasinya sendiri.
web.dev/learnCSS
Untuk saat ini, jika Anda ingin meningkatkan kemampuan CSS, dan mungkin meninjau kembali beberapa dasar-dasar, tim kami meluncurkan kursus dan referensi CSS baru yang sepenuhnya gratis di web.dev. Anda dapat mengaksesnya melalui web.dev/learnCSS.
Semoga Anda menikmati ringkasan ini tentang era desain responsif berikutnya, dan beberapa elemen dasar yang akan disertakan, dan kami juga berharap Anda sama antusiasnya dengan kami tentang arti hal ini bagi masa depan desain web.
Hal ini membuka peluang besar bagi kami sebagai komunitas UI untuk menerapkan gaya berbasis komponen, faktor bentuk baru, dan menciptakan pengalaman yang responsif terhadap pengguna.