Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

7 Unit CSS Yang Mungkin Anda Belum Ketahui

by
Length:MediumLanguages:

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. Unit em didefenisikan sebagai font-size saat ini. Jadi, misalkan, jika Anda menetapkan ukuran font pada elemen body, nilai em  dari setiap elemen anak didalam body akan memiliki ukuran font yang sama.

Disini, kita telah tentukan bahwa div akan memiliki font-size sebesar 1.2em. Itu berarti 1.2 kali ukuran dari apapun font-size yang diwarisi, pada kasus ini 14px. Hasilnya adalah 16.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.

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.

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.

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 unit vh dan vw.

Elemen vh sama dengan 1/100 dari tinggi viewport. Contohnya, jika tinggi perambah 900px, 1vh akan menjadi 9px. Demikian pula, jika lebar viewport 750px, 1vw akan menjadi 7.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:

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, paa vmin 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 nilai vmin dibawah 100 akan menghasilkan hal tersebut. Contohnya, sebuah elemen persegi yang selalu menyentuh paling tidak dua sisi dari layar akan didefenisikan seperti ini:

Jika anda butuh sebuah kotak persegi yang selalu menutupi viewport yang terlihat (selalu menyentuh seluruh empat sisi screen), gunakan aturan yang sama tetapi gunakan vmax.

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

Unit ex dan ch, mirip dengan em dan rem, bergantung pada font dan ukuran font saat ini. Namun, tidak seperti em dan rem, satuan ukur ini juga bergantung pada font-family, karena ditentukan berdasarkan ukuran spesifik font.

Unit ch , 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 sebesar N unit karakter, seperti width: 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.

Unit ex didefenisikan sebagai “x-height dari font saat ini ATAU satu setengah dari satu em”. x-height dari font yang diberikan adalah tinggi x huruf kecil dari font itu. Sering kali, ini ada pada middle mark dari font.

x-height; the height of the lower case x (read more about  The Anatomy of Web Typography )

Ada banyak sekali penggunaan dari unit ukur tersebut, kebanyakan sebagai pengatur tipografi mikro. Contohnya, elemensup, yang singkatan dari superscript, 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 khusus vertical-align superscript- dan subscript-, tapi jika anda ingin kontrol yang lebih granular, anda dapat menanganinya secara lebih eksplisit seperti ini:

Bisa saya gunakan?

Unit ex  telah ada sejak CSS1, namun anda tidak akan menemukan dukungan yang solid untuk unit ch. 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.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.