Mengontrol tata letak makro dan mikro di era baru desain web responsif.
Desain Responsif Saat Ini
Saat ini, ketika menggunakan istilah: "desain responsif", kemungkinan besar Anda berpikir untuk menggunakan kueri media untuk mengubah tata letak saat mengubah ukuran desain dari ukuran seluler, ukuran tablet, hingga ukuran desktop.
Namun, dalam waktu dekat, persepsi tentang desain responsif ini dapat dianggap ketinggalan zaman karena menggunakan tabel untuk tata letak halaman.
Kueri media berbasis area pandang memberi Anda beberapa alat yang canggih, tetapi tidak memiliki banyak kegunaan. Mereka tidak memiliki kemampuan untuk merespons kebutuhan pengguna, dan kemampuan untuk memasukkan gaya responsif ke dalam komponen itu sendiri.
Anda dapat menggunakan informasi area tampilan global untuk menata gaya komponen, tetapi komponen tersebut tetap tidak memiliki gayanya sendiri, dan itu tidak berfungsi jika sistem desain kami berbasis komponen dan bukan berbasis halaman.
Kabar baiknya adalah, ekosistem terus berubah, dan berubah dengan cepat. CSS terus berkembang, dan era baru desain responsif segera hadir.
Kami melihat hal ini terjadi setiap 10 tahun sekali. 10 tahun lalu, sekitar 2010-2012, kita melihat perubahan besar pada desain seluler dan responsif, serta kemunculan CSS3.
Jadi menunjukkan bahwa, sekali lagi, ekosistem siap untuk beberapa perubahan yang cukup besar terjadi pada CSS. Engineer Chrome dan di seluruh platform web membuat prototipe, menentukan, 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 yang baru, memberi Anda kemampuan untuk menata gaya pengalaman web yang selaras dengan preferensi dan kebutuhan spesifik pengguna. Artinya, fitur media preferensi memungkinkan Anda menyesuaikan pengalaman pengguna dengan pengalaman pengguna.
Fitur media preferensi pengguna ini mencakup:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Dan lainnya
Fitur preferensi memanfaatkan preferensi yang ditetapkan pengguna dalam sistem operasinya, dan membantu membangun pengalaman web yang lebih kuat 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 mereka secara umum. Oleh karena itu, kemungkinan mereka tidak akan menyukai layar pengantar yang mencolok, animasi card flip, loader yang rumit, atau animasi mencolok lainnya saat menggunakan web.
Dengan prefers-reduced-motion, Anda dapat mendesain halaman dengan mempertimbangkan gerakan
yang dikurangi, dan membuat pengalaman gerakan yang ditingkatkan bagi pengguna yang belum
menetapkan preferensi ini.
Kartu ini memiliki informasi di kedua sisi. Pengalaman gerakan pengurangan dasar adalah crossfade untuk menampilkan informasi tersebut, sedangkan pengalaman gerakan yang ditingkatkan adalah card flip.
Preferensi-mengurangi-gerak seharusnya tidak berarti "tidak ada gerakan", karena gerakan sangat penting untuk menyampaikan informasi secara online. Sebagai gantinya, berikan pengalaman dasar pengukuran yang solid yang memandu pengguna Anda tanpa gerakan yang tidak perlu, dan secara bertahap meningkatkan pengalaman tersebut bagi 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 atau seluler, pengguna dapat menyetel preferensi
untuk tema terang, gelap, atau otomatis, yang berubah bergantung pada waktu.
Jika Anda menyiapkan halaman menggunakan properti kustom CSS, menukar nilai warna menjadi mudah. Anda dapat memperbarui nilai tema
warna dengan cepat, seperti backgroundColor dan textOnPrimary untuk 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, hal ini bukan hanya tentang membalik latar belakang dan warna teks atau scrollbar gelap. Ada beberapa hal 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 menggambar elemen ke depan, Anda mungkin ingin menggunakan cahaya pada warna latar belakang elemen untuk menggambarnya ke depan. 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. Itu adalah layar yang kami lihat di ponsel kelas atas yang lebih baru, dan semakin populer di seluruh perangkat seluler.
Studi Android 2018 tentang tema gelap menunjukkan penghematan 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 bagi 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 memahami manfaat peralihan dari desain responsif berbasis halaman ke desain responsif berbasis container dalam mengembangkan ekosistem desain.
Berikut adalah contoh kemampuan canggih yang diberikan kueri penampung. Anda dapat memanipulasi salah satu gaya elemen kartu, termasuk daftar link, ukuran font, dan tata letak keseluruhan berdasarkan penampung induknya:
Contoh ini menunjukkan dua komponen identik dengan dua ukuran container berbeda, keduanya menggunakan ruang dalam tata letak yang dibuat menggunakan Petak CSS. Setiap komponen sesuai dengan alokasi ruangnya yang unik, dan menata gayanya sendiri.
Tingkat fleksibilitas ini adalah sesuatu yang tidak mungkin dilakukan dengan kueri media saja.
Kueri container memberikan pendekatan yang jauh lebih dinamis untuk desain responsif. Artinya, jika Anda menempatkan komponen kartu ini di sidebar atau bagian utama, atau dalam petak di dalam isi utama halaman, komponen itu sendiri memiliki informasi dan ukuran responsifnya sesuai dengan penampung, bukan area pandang
Tindakan ini memerlukan @container at-rule. Cara kerjanya mirip dengan kueri media dengan @media, tetapi, @container akan mengkueri penampung induk untuk mendapatkan informasi, bukan area tampilan dan agen pengguna.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Pertama, tetapkan {i>containment<i} pada elemen induk. Lalu, tulis kueri @container untuk menata gaya setiap elemen dalam container berdasarkan ukurannya, dengan menggunakan min-width atau max-width.
Kode di atas menggunakan max-width, dan menetapkan link ke display:none, serta
mengurangi ukuran font waktu saat lebar penampung kurang dari 850px.
Kartu kueri container
Dalam 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 container yang digunakan. Hal ini memungkinkan setiap kartu produk bergeser ke tata letak yang tepat untuk mengisi ruangnya. Misalnya, petak menggunakan tata letak kolom minmax untuk memungkinkan elemen mengalir ke dalam ruangnya, dan menata ulang petak saat ruang tersebut terlalu terkompresi (yang berarti elemen tersebut 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 berjalan
horizontal dengan disetel ke display: flex, yang memiliki arah fleksibel
default "baris".
Dengan lebih sedikit ruang, kartu produk bertumpuk. Setiap kartu produk memiliki gayanya sendiri, sesuatu yang tidak mungkin dilakukan dengan gaya global saja.
Mencampur Kueri Container dengan Kueri Media
Kueri penampung memiliki banyak kasus penggunaan, salah satunya adalah komponen kalender. Anda dapat menggunakan kueri penampung untuk mengatur ulang tata letak acara kalender dan segmen lainnya berdasarkan lebar induknya yang tersedia.
Penampung demo ini membuat kueri untuk mengubah tata letak dan gaya tanggal dan hari kalender, serta menyesuaikan margin dan ukuran font pada acara terjadwal agar lebih sesuai dengan ruang.
Kemudian, gunakan kueri media untuk menggeser seluruh tata letak untuk ukuran layar yang lebih kecil. Contoh ini menunjukkan betapa canggihnya combine 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 yang sangat bagus.
Menggunakan kueri penampung saat ini
Demo ini kini tersedia untuk dimainkan di belakang tanda di Chrome Canary. Buka
about://flags di Canary dan aktifkan tanda #enable-container-queries.
Ini akan mengaktifkan dukungan untuk nilai @container, inline-size, dan block-size
untuk properti contain, serta implementasi LayoutNG Grid.
Flag ini juga mengaktifkan fitur Chrome DevTools yang sesuai. Pelajari cara memeriksa dan men-debug kueri container di DevTools.
Gaya cakupan
Untuk membangun kueri penampung, grup kerja CSS juga secara aktif mendiskusikan gaya cakupan untuk membantu penggunaan namespace yang tepat dan pencegahan konflik untuk komponen.
Gaya dengan cakupan memungkinkan penataan gaya khusus komponen dan pass-through untuk menghindari konflik penamaan. Banyak framework dan plugin seperti modul CSS telah memungkinkan kita untuk melakukannya dalam framework. Spesifikasi ini sekarang akan memungkinkan kita 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 */ }
}
Pencakupan akan memungkinkan kita membuat pemilih "berbentuk donat", tempat kita dapat menentukan tempat untuk menyimpan gaya yang dienkapsulasi, dan tempat untuk keluar dari gaya cakupan tersebut untuk merujuk kembali ke gaya yang lebih global.
Contohnya adalah panel tab, tempat kita ingin tab mendapatkan gaya cakupan, dan panel dalam tab untuk mendapatkan gaya induk.
Responsif terhadap faktor bentuk
Topik berikutnya dalam percakapan kita tentang era baru desain responsif adalah perubahan faktor bentuk, dan peningkatan kemungkinan tentang apa yang perlu kita desain sebagai komunitas web (seperti perubahan bentuk layar atau realitas virtual).
Layar foldable atau fleksibel, dan mendesain untuk rentang layar adalah salah satu contoh yang menunjukkan pergeseran faktor bentuk saat ini. Rentang layar masih menjadi spesifikasi lain untuk mencakup faktor bentuk dan kebutuhan baru ini.
Kueri
media eksperimental
untuk rentang layar dapat membantu kita dalam hal ini. Saat ini perilakunya seperti ini: @media
(spanning: <type of fold>). Demo ini menyiapkan tata letak petak dengan dua kolom:
satu memiliki lebar --sidebar-width, yaitu 5rem secara default, dan satunya lagi
1fr. Saat tata letak dilihat di dua layar yang memiliki satu lipatan vertikal, nilai --sidebar-width akan 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 dengan sidebar, yaitu navigasi dalam hal ini, mengisi ruang salah satu lipatan, tempat UI aplikasi mengisi lipat yang lain. Hal ini mencegah "lipatan" di UI.
Anda dapat menguji layar perangkat foldable di emulator Chrome DevTools untuk membantu men-debug dan membuat prototipe layar yang membentang langsung di browser.
Kesimpulan
Mempelajari desain UI di luar layar datar merupakan alasan lain mengapa kueri container dan gaya cakupan sangat penting. Hal ini 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, sekarang Anda dapat mendesain tata letak makro menggunakan kueri media berbasis halaman, termasuk variasi rentang layar. Selain itu, penggunaan tata letak mikro dengan kueri container pada komponennya, 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 yang terpenting, mempertimbangkan penyesuaian pengguna dan faktor bentuk.
Setiap perubahan ini saja akan menimbulkan perubahan yang cukup besar dalam cara kita mendesain untuk web. Namun, jika digabungkan, hal ini menandakan perubahan yang sangat besar dalam cara kita mengkonsep desain responsif. Saatnya memikirkan desain responsif di luar ukuran area pandang, dan mulai mempertimbangkan semua sumbu baru ini untuk pengalaman berbasis komponen dan disesuaikan yang lebih baik.
Era desain responsif berikutnya telah tiba, dan Anda sudah bisa mulai menjelajahinya sendiri.
web.dev/learnCSS
Dan untuk saat ini, jika Anda ingin meningkatkan level game CSS Anda, dan mungkin mempelajari kembali dasar-dasarnya, tim saya akan meluncurkan kursus dan referensi CSS baru yang 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. Saya juga berharap Anda senang dengan perubahan ini terhadap masa depan desain web.
Ini membuka peluang besar bagi kami sebagai komunitas UI untuk mengadopsi gaya berbasis komponen, faktor bentuk baru, dan menciptakan pengalaman yang responsif pengguna.