Mengontrol tata letak makro dan mikro di era baru desain web yang responsif.
Desain responsif saat ini
Saat ini, ketika menggunakan istilah: "desain responsif", Anda kemungkinan besar berpikir tentang 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 ketinggalan zaman seperti penggunaan tabel untuk tata letak halaman.
Kueri media berbasis area pandang memberi Anda beberapa alat yang canggih, tetapi tidak memiliki banyak kemahiran. Komponen ini tidak memiliki kemampuan untuk merespons kebutuhan pengguna, dan kemampuan untuk memasukkan gaya responsif ke dalam komponen itu sendiri.
Anda dapat menggunakan informasi area pandang global untuk menata gaya komponen, tetapi komponen tersebut tetap tidak memiliki gayanya sendiri, dan hal ini tidak akan berfungsi jika sistem desain kita berbasis komponen, bukan berbasis halaman.
Kabar baiknya, ekosistem ini berubah, dan berubah dengan cukup cepat. CSS terus berkembang, dan era baru desain responsif sudah di depan mata.
Kami melihat hal ini terjadi sekitar setiap 10 tahun. 10 tahun lalu, sekitar tahun 2010-2012, kita melihat perubahan besar pada desain seluler dan responsif, serta kemunculan CSS3.
Jadi, sekali lagi, ekosistem ini siap untuk beberapa perubahan yang cukup besar pada CSS. Para engineer di Chrome dan di seluruh platform web sedang membuat prototipe, spesifikasi, dan memulai implementasi 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 pengalaman 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 operasi mereka, dan membantu membangun pengalaman web yang lebih tangguh dan dipersonalisasi, terutama bagi mereka yang memiliki kebutuhan aksesibilitas.
prefers-reduced-motion
Pengguna yang telah menetapkan preferensi sistem operasi untuk pengurangan gerakan, meminta lebih sedikit animasi saat menggunakan komputer secara umum. Oleh karena itu, kemungkinan besar mereka tidak akan menyukai layar intro yang mencolok, animasi kartu yang berputar, loader yang rumit, atau animasi mencolok lainnya saat menggunakan web.
Dengan prefers-reduced-motion, Anda dapat mendesain halaman dengan mempertimbangkan
pengurangan gerakan, dan membuat pengalaman yang ditingkatkan dengan gerakan bagi mereka yang tidak menetapkan
preferensi ini.
Kartu ini memiliki informasi di kedua sisi. Pengalaman gerakan yang dikurangi dasar pengukuran adalah crossfade untuk menampilkan informasi tersebut, sedangkan pengalaman yang ditingkatkan gerakan adalah kartu yang dibalik.
Prefers-reduced-motion tidak 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 terapkan progressive enhancement 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. Dalam sistem operasi mereka, baik di desktop maupun perangkat seluler, pengguna dapat menetapkan preferensi untuk tema terang, gelap, atau otomatis, yang berubah bergantung pada waktu.
Jika Anda menyiapkan halaman menggunakan properti kustom
CSS, menukar
nilai warna akan menjadi mudah. Anda dapat dengan cepat memperbarui nilai tema warna, seperti backgroundColor dan textOnPrimary, agar menyesuaikan 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 saat.
Mendesain untuk tema gelap
Saat mendesain untuk tema gelap, ini bukan hanya tentang membalikkan warna latar belakang dan teks atau scrollbar 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 di 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 masa pakai baterai secara signifikan di layar AMOLED. Layar tersebut adalah layar yang kita lihat di ponsel kelas atas yang lebih baru, dan menjadi semakin populer di berbagai perangkat seluler.
Studi Android 2018 tentang tema gelap menunjukkan penghematan konsumsi daya hingga 60%, bergantung pada kecerahan layar dan antarmuka pengguna secara keseluruhan. Statistik 60% berasal dari perbandingan layar putar 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 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 yang identik dengan dua ukuran penampung yang berbeda, keduanya menggunakan ruang dalam tata letak yang dibuat menggunakan petak CSS. Setiap komponen sesuai dengan alokasi ruang uniknya, dan menyesuaikan gayanya sendiri.
Tingkat fleksibilitas ini tidak mungkin dicapai 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 responsifnya sesuai dengan penampung, bukan area pandang
Hal ini memerlukan aturan-at @container. Cara kerjanya mirip dengan kueri media dengan @media, tetapi @container mengkueri penampung induk untuk mendapatkan informasi, bukan area pandang dan agen pengguna.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Pertama, tetapkan pembatasan 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 memiliki lebar kurang dari 850px.
Kartu kueri penampung
Di situs tanaman demo ini, setiap kartu produk, termasuk yang ada di hero, sidebar item yang baru dilihat, dan petak produk, semuanya adalah 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 di petak, tata letak kartu akan menjadi
horizontal dengan ditetapkan ke display: flex, yang memiliki flex-direction default "row".
Dengan ruang yang lebih sedikit, kartu produk akan ditumpuk. Setiap kartu produk memiliki gayanya sendiri, sesuatu yang tidak mungkin dilakukan hanya dengan gaya global.
Menggabungkan kueri penampung dengan kueri media
Kueri penampung memiliki banyak kasus penggunaan—salah satunya adalah komponen kalender. Anda dapat menggunakan kueri penampung untuk menata ulang tata letak acara kalender dan segmen lainnya berdasarkan lebar induk yang tersedia.
Kueri penampung demo ini 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 turunan penampung, dan gaya mikronya).
Jadi, sekarang kita dapat memikirkan tata letak Makro dan Mikro dalam komponen UI yang sama untuk memungkinkan beberapa keputusan desain bernuansa yang sangat bagus.
Menggunakan kueri container saat ini
Demo ini sekarang tersedia untuk dimainkan di balik tanda di Chrome Canary. Buka
about://flags di Canary dan aktifkan flag #enable-container-queries.
Tindakan ini akan mengaktifkan dukungan untuk nilai @container, inline-size, dan block-size
untuk properti contain, dan penerapan Petak LayoutNG.
Tanda ini juga mengaktifkan fitur Chrome DevTools yang sesuai. Pelajari cara memeriksa dan men-debug kueri penampung di DevTools.
Gaya tercakup
Untuk mengembangkan kueri penampung, gunakan gaya tercakup dengan @scope untuk membatasi jangkauan pemilih Anda.
Gaya tercakup memungkinkan gaya visual khusus komponen untuk menghindari tabrakan penamaan, sesuatu yang sudah memungkinkan kita lakukan dalam framework dengan banyak framework dan plugin seperti modul CSS. Gaya tercakup memungkinkan Anda menulis gaya yang dienkapsulasi secara native untuk komponen dengan CSS yang dapat dibaca tanpa perlu menyesuaikan markup.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Cakupan memungkinkan Anda membuat pemilih "berbentuk donat", tempat Anda dapat menentukan
batas atas dan bawah. Pemilih yang terdapat dalam aturan @scope akan dicocokkan
di antara batas tersebut.
Contohnya adalah panel tab, tempat Anda ingin tab mendapatkan gaya tercakup, tetapi panel dalam tab tersebut tidak terpengaruh oleh gaya tercakup tersebut.
Responsif terhadap faktor bentuk
Topik berikutnya dalam diskusi kita tentang era baru desain responsif adalah perubahan faktor bentuk, dan semakin banyaknya kemungkinan hal yang perlu kita desain sebagai komunitas web (seperti layar yang berubah bentuk atau virtual reality).
Layar foldable atau fleksibel, dan desain untuk bentangan layar adalah salah satu contoh perubahan faktor bentuk yang dapat kita lihat saat ini. Dan screen-spanning adalah spesifikasi lain yang sedang dikembangkan untuk mencakup faktor bentuk dan kebutuhan baru ini.
Kueri media eksperimental untuk bentangan layar dapat membantu kita di sini. Saat ini, perilaku fitur ini adalah: @media
(spanning: <type of fold>). Demo ini menyiapkan tata letak petak dengan dua kolom:
satu kolom memiliki lebar --sidebar-width, yang secara default berukuran 5rem, dan kolom lainnya berukuran
1fr. Saat tata letak dilihat di layar ganda yang memiliki satu lipatan
vertikal, nilai --sidebar-width diperbarui dengan nilai lingkungan
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, sementara UI aplikasi mengisi ruang lainnya. Hal ini mencegah "lipatan" di UI.
Anda dapat menguji layar perangkat foldable di emulator Chrome DevTools untuk membantu men-debug dan membuat prototipe bentangan layar langsung di browser.
Kesimpulan
Mengeksplorasi desain UI di luar layar datar adalah alasan lain mengapa kueri penampung dan gaya tercakup sangat penting. Kueri penampung memberi Anda kesempatan untuk memisahkan 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 yang mencakup 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.
Inilah responsif yang baru.
Ini menggabungkan tata letak makro dengan tata letak mikro, dan di atas semua itu, mempertimbangkan penyesuaian pengguna dan faktor bentuk.
Salah satu dari perubahan ini saja akan menjadi perubahan yang signifikan dalam cara kita mendesain untuk web. Namun, jika digabungkan, keduanya menandakan perubahan yang sangat besar dalam cara kita mengonseptualisasikan desain responsif. Sekarang saatnya memikirkan desain responsif di luar ukuran area pandang, dan mulai mempertimbangkan semua sumbu baru ini untuk pengalaman berbasis komponen dan yang disesuaikan dengan lebih baik.
Era desain responsif berikutnya telah hadir, dan Anda sudah dapat mulai mengeksplorasinya sendiri.
web.dev/learnCSS
Dan untuk saat ini, jika Anda ingin meningkatkan kemampuan CSS, dan mungkin mempelajari kembali beberapa hal dasar, tim saya meluncurkan kursus dan referensi CSS yang benar-benar baru dan sepenuhnya gratis di web.dev. Anda dapat mengaksesnya melalui web.dev/learnCSS.
Semoga Anda menikmati ringkasan tentang era desain responsif berikutnya, dan beberapa primitif yang akan menyertainya, dan semoga Anda juga antusias seperti saya tentang apa artinya ini bagi masa depan desain web.
Hal ini membuka peluang besar bagi kita sebagai komunitas UI untuk menerapkan gaya berbasis komponen, faktor bentuk baru, dan menciptakan pengalaman yang responsif bagi pengguna.