Konverter Unit CSS

Dua keluarga unit

Setiap panjang CSS termasuk ke salah satu dari dua keluarga. Unit absolut, seperti px, pt, cm, mm, dan in, menggambarkan ukuran fisik atau perangkat yang tetap dan tidak berubah seiring konteks. Unit relatif, seperti em, rem, persen, vw, vh, ch, dan ex, menggambarkan ukuran berdasarkan sesuatu yang lain, biasanya ukuran font atau viewport. Seluruh seni CSS yang responsif dan aksesibel berujung pada pemilihan keluarga yang tepat untuk setiap pekerjaan, dan konverter ini hadir untuk menerjemahkan dengan bersih di antara keduanya.

Garis pemisahnya penting karena unit absolut membekukan sebuah nilai sedangkan unit relatif membiarkannya beradaptasi. Sebuah judul yang disetel dalam piksel tetap berukuran sama tidak peduli bagaimana pengguna mengonfigurasi browser-nya, sedangkan judul yang sama dalam rem membesar saat mereka menaikkan ukuran teks default mereka. Salah satu dari perilaku itu bersahabat; yang lain diam-diam menyingkirkan sebagian orang.

Piksel dan dasar 16px

px adalah titik acuan untuk hampir setiap konversi. Terlepas dari namanya, sebuah piksel CSS tidak selalu satu titik fisik layar; pada layar berkerapatan tinggi, browser memetakannya ke beberapa titik perangkat agar sebuah kata 16px tetap berukuran nyaman dibaca, itulah sebabnya px dihitung sebagai absolut meskipun perangkat kerasnya bervariasi. Sebagian besar konversi pada alat ini bergantung pada satu angka, yaitu ukuran font root, yang secara default adalah 16px karena itulah ukuran yang diterapkan browser pada elemen html secara bawaan. Ubah dasar itu di Pengaturan Lanjutan maka setiap hasil rem dan em dihitung ulang terhadapnya.

em versus rem: perbedaan cascade

Inilah perbedaan yang paling banyak menjebak pengembang. rem selalu relatif terhadap ukuran font root, sehingga 1.5rem adalah panjang yang sama di mana pun dalam dokumen, dapat diprediksi dan datar. em relatif terhadap ukuran font elemen tempatnya berada, yang berarti em berlipat ganda. Jika sebuah item daftar disetel ke 1.2em dan induknya juga 1.2em, anaknya menjadi 1.2 kali 1.2 dari elemen kakeknya, dan penyarangan dapat diam-diam membengkakkan teks Anda ke ukuran yang mengejutkan.

Pelipatgandaan itu sesekali memang yang Anda inginkan. Padding atau margin yang dinyatakan dalam em menskala mengikuti teks elemen itu sendiri, sehingga sebuah tombol tetap berpadding proporsional saat labelnya membesar. Namun untuk skala tipe global, rem biasanya merupakan default yang lebih aman justru karena ia tidak berlipat ganda. Konverter ini memungkinkan Anda menyetel ukuran font root dan ukuran font induk secara terpisah sehingga hasil rem dan hasil em mencerminkan perbedaan persis itu.

Unit viewport untuk tata letak fluid

Unit viewport mengukur terhadap ukuran jendela itu sendiri. 1vw adalah satu persen dari lebar viewport dan 1vh adalah satu persen dari tingginya, sehingga 50vw selalu selebar setengah jendela tanpa memandang pengaturan font. Unit-unit ini adalah tulang punggung tata letak fluid dan judul tampilan besar yang seharusnya menskala mengikuti layar alih-alih mengikuti ukuran teks.

Namun gunakanlah dengan hati-hati. Mengukur teks isi murni dalam vw berarti teks menyusut menjadi tak terbaca pada ponsel yang sempit dan membengkak pada monitor yang lebar, dan ia bisa mengabaikan zoom pengguna pada beberapa pengaturan. Penawar modernnya adalah fungsi clamp, yang mengambil nilai minimum, nilai fluid yang dipilih, dan nilai maksimum, membiarkan sebuah judul membesar mengikuti viewport tetapi tidak pernah jatuh di bawah batas bawah atau melampaui batas atas. Konversikan batas bawah dan batas atas Anda di sini dalam rem agar keduanya tetap menghormati pengaturan font pengguna.

Persen, ch, dan ex

Persen bersifat relatif, tetapi terhadap apa bergantung pada propertinya. Untuk width ia adalah persentase dari lebar blok yang memuatnya; untuk font-size ia adalah persentase dari ukuran font induk, yang membuatnya berperilaku mirip em untuk tipe. Kepekaan terhadap konteks itulah sebabnya alat ini meminta ukuran font induk saat Anda mengonversi persentase ukuran font. Dua unit relatif-font lain mudah terlewatkan: ch adalah lebar dari angka nol pada font saat ini, sempurna untuk membatasi sebuah paragraf pada ukuran baca yang nyaman di sekitar 60ch, sedangkan ex adalah tinggi dari huruf kecil x, berguna untuk penyesuaian vertikal yang terikat pada proporsi jenis hurufnya.

Unit cetak absolut: pt, in, cm, mm

Unit fisik diatur oleh rasio yang persis dalam spesifikasi CSS, itulah sebabnya konversi di sini bukanlah perkiraan. Satu inci setara 96px, satu point adalah satu per tujuh puluh dua inci sehingga menghasilkan satu dan sepertiga piksel, satu sentimeter sekitar 37,8px, dan satu milimeter adalah sepersepuluh dari itu. Rasio ini tetap tanpa memandang tampilan yang sebenarnya.

Di layar, unit-unit ini sebagian besar merupakan jebakan, karena satu sentimeter di halaman jarang cocok dengan satu sentimeter pada penggaris yang ditempelkan ke monitor. Tempat sejati mereka adalah stylesheet cetak, di mana selembar kertas fisik memberi mereka makna yang sungguhan, dan pt khususnya tetap menjadi cara konvensional bagi desainer dan pengolah kata untuk menggambarkan ukuran tipe. Gunakan pt, cm, dan mm saat Anda menata untuk cetak, dan gunakan rem, em, serta unit viewport saat Anda menata untuk layar.

Aksesibilitas: mengapa font px adalah masalah

Saat Anda menyetel ukuran font dalam px, Anda memakukannya. Seorang pengguna yang menaikkan ukuran teks default browser-nya, sering kali karena mereka membutuhkannya, tidak melihat perubahan, karena nilai piksel yang tetap mengabaikan preferensi itu sepenuhnya. Mengukur teks dalam rem sebagai gantinya berarti ia menskala mengikuti ukuran font root yang telah dipilih pengguna, yang merupakan salah satu kemenangan aksesibilitas berdampak tertinggi yang tersedia dalam CSS dan tidak menghabiskan apa pun secara visual bagi pembaca default.

Sebuah alur kerja praktis muncul dari hal ini: rancang dalam piksel karena intuitif, lalu konversikan tipe dan jarak Anda ke rem sebelum merilis agar tata letak menghormati pengaturan pengguna. Itulah konversi paling umum yang dilakukan alat ini, dan pada dasar default 16px aritmetikanya bersahabat, karena 16px adalah 1rem, 24px adalah 1.5rem, dan 8px adalah 0.5rem.