What Css Measurement Unit Is Best Used for Responsive Design
Indonesian (Bahasa Indonesia) translation by Septian Ahmad Fujianto (you can also view the original English article)
Mudah bagi kita untuk terpaku menggunakan teknik CSS yang sudah dikuasai dengan baik, tetapi melakukan hal itu membuat kita mengalami kesulitan saat menghadapi suatu masalah baru yang muncul.
Dengan semakin pesatnya perkembangan web, permintaan atas solusi baru akan terus berkembang. Sehubungan dengan itu, sebagai desainer web dan pengembang front end, kita tidak punya pilihan lain kecuali untuk menguasai set peralatan yang dimiliki, dan memahaminya dengan baik.
Itu berarti memahami peralatan khusus - peralatan yang jarang digunakan, namun saat dibutuhkan, adalah peralatan yang pas untuk pekerjaan tersebut.
Hari ini, saya akan perkenalkan beberapa peralatan CSS yang mungkin anda belum ketahui sebelumnya. Peralatan ini adalah macam macam unit pengukuran, mirip pixel atau em, namun mungkin ada beberapa yang anda belum pernah dengar sebelumnya! Ayo kita mulai.
rem
Kita mulai dengan sesuatu yang mirip dengan apa yang sudah anda kenal. Unitem didefenisikan sebagai font-size saat ini. Jadi, misalkan, jika Anda menetapkan ukuran font pada elemen body, nilaiem dari setiap elemen anak didalam body akan memiliki ukuran font yang sama.
<body> <div class="test">Test</div> </body>
body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } Disini, kita telah tentukan bahwa div akan memiliki font-size sebesar1.2em. Itu berarti 1.2 kali ukuran dari apapun font-size yang diwarisi, pada kasus ini 14px. Hasilnya adalah16.8px.
Namun, apa yang terjadi jika anda menurunkan ukuran font yang didefenisi em dalam satu sama lain? pada potongan kode berikut kita menerapkan CSS sama persis seperti diatas. Tiap div mewarisi font-size dari parent nya, menghasilkan font-size yang bertambah secara bertahap.
<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body>
Meskipun hal ini diinginkan pada beberapa kasus, sering Anda hanya ingin bergantung pada suatu metrik tunggal sebagai pembanding. Pada kasus ini, anda sebaiknya menggunakan rem. Huruf "r" pada rem berarti "root"; ini sama dengan font-size yang ditentukan pada elemen akar; pada umumnya merupakan elemen html.
html { font-size: 14px; } div { font-size: 1.2rem; } Pada ketiga elemen div yang bertingkat dicontoh sebelumnya, ukuran font akan menjadi 16.8px.
Baik untuk Grid
Rem tidak hanya berguna untuk pengatur ukuran font. Sebagai contoh, anda bisa menggunakannya sebagai basis dari seluruh sistem grid atau UI style library pada ukuran font di root HTML menggunakan rem, dan menggunakan pembesaran em pada bagian tertentu. Ini akan memberikan anda pengatur ukuran dan pembesaran font yang mudah diprediksi.
.container { width: 70rem; // 70 * 14px = 980px } Pada konsepnya, ide untuk strategi seperti ini adalah untuk memungkinkan tampilan tatap muka anda untuk membesar berdasarkan dari ukuran konten anda. Namun, tidak selamanya dapat digunakan untuk setiap kasus.
Bisa saya gunakan?
Fitur: unit rem (root em) di caniuse.com
vh dan vw
Teknik desain web responsif sangat bergantung dengan aturan persentase. Namun, persentase CSS tidak dapat selalu menjadi solusi terbaik untuk menyelesaikan setiap masalah. Lebar pada CSS relatif dengan ukuran parent elemen terdekat yang mengandungnya. Bagaimana jika anda ingin menggunakan lebar dan tinggi viewport bukannya lebar dari parent element? Itulah yang diberikan unitvh dan vw.
Elemen vh sama dengan 1/100 dari tinggi viewport. Contohnya, jika tinggi perambah900px, 1vh akan menjadi 9px. Demikian pula, jika lebar viewport 750px, 1vw akan menjadi7.5px.
Penggunaan aturan tersebut hampir tiada batasnya. Contohnya, cara yang paling sederhana untuk membuat slide full-height atau hampir full-height dapai dicapai dengan menggunakan satu baris CSS berikut:
.slide { height: 100vh; } Bayangkan jika anda ingin sebuah headline yang diatur untuk memenuhi lebar dari layar. Untuk mencapainya, anda akan mengatur font-size pada vw. Ukuran tersebut akan membesar sesuai dengan lebar dari perambah.
Bisa saya gunakan?
Fitur: Unit viewport : vw, vhdi caniuse.com
vmin dan vmax
Sementara pada vh dan vm selalu terkait dengan tinggi dan lebar viewport, masing-masing, paavmin dan vmax selalu terkait ke ukuran maksimum atau minimum dari lebar dan tinggi viewport, tergantung pada mana yang lebih kecil dan besar. Contohnya, jika perambah diatur ke lebar 1100px dan tinggi 700px, 1vmin akan menjadi 7px dan 1vmax akan menjadi 11px. Namun, jika lebar diatur sebesar 800px dan tinggi diatur ke 1080px, vmin menjadi sama dengan 8px sedangkan vmax akan diatur menjadi 10.8px.
Jadi, kapan anda mungkin bisa menggunakan nilai ini?
Bayangkan anda butuh sebuah elemen yang selalu terlihat dilayar. Menggunakan tinggi dan lebar yang diatur dengan nilaivmin dibawah 100 akan menghasilkan hal tersebut. Contohnya, sebuah elemen persegi yang selalu menyentuh paling tidak dua sisi dari layar akan didefenisikan seperti ini:
.box { height: 100vmin; width: 100vmin; } 
Jika anda butuh sebuah kotak persegi yang selalu menutupi viewport yang terlihat (selalu menyentuh seluruh empat sisi screen), gunakan aturan yang sama tetapi gunakanvmax.
.box { height: 100vmax; width: 100vmax; } 
Kombinasi dari aturan tersebut memberikan suatu cara yang fleksibel dalam memanfaatkan ukuran viewport dengan cara yang baru dan menarik.
Bisa saya gunakan?
Fitur: Unit viewport: vmin, vmaxdi caniuse.com
ex dan ch
Unitex danch, mirip denganem danrem, bergantung pada font dan ukuran font saat ini. Namun, tidak sepertiem danrem, satuan ukur ini juga bergantung pada font-family, karena ditentukan berdasarkan ukuran spesifik font.
Unitch , atau unit karakter didefenisikan sebagai "pengukuran lanjutan" lebar dari karakter nol, 0. Beberapa diskusi menarik tentang pengertiannya dapat ditemukan di blog Eric Meyer , tapi konsep dasarnya adalah, jika diberikan font monospace, sebuah kotak dengan lebar sebesarN unit karakter, sepertiwidth: 40ch;, bisa selalu memiliki suatu string dengan 40 karakter pada font tersebut. Sementara penggunaan konvensional aturan tersebut berhubungan seperti halnya meletakkan braille, kemungkinan kreatifitas disini tentu saja dapat dikembangkan melampaui pengaplikasian sederhana ini.
Unitex didefenisikan sebagai "x-height dari font saat ini ATAU satu setengah dari satuem". x-height dari font yang diberikan adalah tinggi x huruf kecil dari font itu. Sering kali, ini ada pada middle mark dari font.
Ada banyak sekali penggunaan dari unit ukur tersebut, kebanyakan sebagai pengatur tipografi mikro. Contohnya, elemensup, yang singkatan darisuperscript, dapat didorong keatas baris menggunakan position relative dan nilai bottom 1ex. Demikian pula, anda bisa mendorong elemen subscript kebawah. Pengaturan bawaan perambah ini menggunakan aturan khususvertical-align superscript- dan subscript-, tapi jika anda ingin kontrol yang lebih granular, anda dapat menanganinya secara lebih eksplisit seperti ini:
sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex; } Bisa saya gunakan?
Unitex telah ada sejak CSS1, namun anda tidak akan menemukan dukungan yang solid untuk unitch. Untuk dukungan yang lebih spesifik, periksa unit dan nilai CSS di blog Eric Meyer.
Kesimpulan
Mengikuti perkembangan dan ekspansi dari CSS sangatlah penting sehingga ada mengetahui dan mengerti seluruh peralatan yang anda punya. Mungkin suatu saat anda akan menemui suatu masalah tertentu yang membutuhkan solusi yang tidak terduga dengan penggunaan salah satu dari unit ukur yang jarang digunakan diatas. Luangkan waktu anda untuk membaca spesifikasi baru. Bergabung untuk berita terbaru dari sumber berkualitas seperti cssweekly. Dan jangan lupa, bergabung sekarang untuk update mingguan, kursus, tutorial gratis dan sumber informasi Desain Web seperti ini di Tuts+!
Bacaan lebih lanjut
Referensi lebih lanjut mengenai CSS unit.
- Mengambil "Erm.." dari Em
- Membahas Em lebih lanjut
- Unit Viewport Caniuse
What Css Measurement Unit Is Best Used for Responsive Design
Source: https://webdesign.tutsplus.com/id/articles/7-css-units-you-might-not-know-about--cms-22573
0 Response to "What Css Measurement Unit Is Best Used for Responsive Design"
Post a Comment