Tipe data CSS <length> mewakili dimensi atau pengukuran jarak. Terdiri dari <number> diikuti oleh satuan panjang. Jumlahnya segera diikuti oleh unit, yaitu tidak ada ruang putih yang diizinkan di antara mereka, dan unit panjang tidak peka huruf besar-kecil.

Banyak properti CSS mengambil nilai <length> seperti ukuran font, margin, tinggi garis, dll. Nilai <length> dapat menjadi negatif dalam beberapa kasus. Beberapa properti dapat membatasi nilai panjang untuk beberapa rentang. Jika nilainya di luar rentang yang diizinkan, deklarasi tidak valid dan harus diabaikan.

CSS menawarkan sejumlah unit berbeda untuk mengekspresikan panjang. Beberapa memiliki sejarah dalam tipografi, seperti point (pt) dan pica (pc), yang lain diketahui dari penggunaan sehari-hari, seperti centimeter (cm) dan inch (in). Dan ada juga unit yang diciptakan khusus untuk CSS: pixel (px).

CSS juga mendefinisikan satu set unit panjang lainnya, yang semuanya, termasuk yang disebutkan sebelumnya, termasuk dalam salah satu dari dua kategori: unit absolut atau unit relatif.

Panjang Absolut

Panjang absolut ditentukan menggunakan angka diikuti oleh satuan panjang absolut. Satuan panjang absolut terdiri dari satuan fisik (dalam, cm, mm, pt, pc) dan satuan px.

px

Meskipun memiliki panjang absolut, px tidak didefinisikan sebagai panjang konstan, tetapi didefinisikan relatif terhadap perangkat tampilan (perangkat cetak atau layar). Mereka didefinisikan sebagai absolut dalam CSS 2.1, tetapi dijelaskan secara relatif, karena perangkat dapat memilih untuk merender px ukuran apa pun yang diinginkan dalam kaitannya dengan piksel untuk mencapai PPI yang benar dan jarak tampilan untuk perangkat.

mm

Satu milimeter.
cm

Satu sentimeter. 1cm = 10mm = 37.8px.
di

Satu inci. 1in = 2.54cm = 96px.
pt

Satu poin. Itu sama dengan 1/72 inci. Point adalah unit ukuran font fisik yang paling umum di luar CSS, alasan mengapa masuk akal untuk digunakan dalam lembar gaya cetak.
pc

Satu pica. Itu sama dengan 12 poin.

Dengan banyak unit panjang CSS, mungkin terlintas dalam pikiran seseorang bahwa mungkin beberapa unit khusus untuk properti tertentu, tetapi tidak. Unit tidak ada hubungannya dengan properti, tetapi mereka ada hubungannya dengan media keluaran: layar atau kertas.

Tidak ada batasan unit mana yang bisa digunakan. Jika sebuah properti menerima nilai dalam px, ia juga menerima nilai dalam inci atau sentimeter. Tetapi secara umum Anda akan menggunakan unit yang berbeda untuk tampilan di layar daripada untuk mencetak di atas kertas.

Browser Support

Semua browser utama mendukung unit panjang: Chrome, Firefox, Safari, Opera, IE, dan di Android dan iOS.

Unit ch dan rem didukung di IE mulai dari versi 9.

Unit ch tidak didukung di browser berbasis Webkit.

Dukungan browser untuk unit persentase-viewport ditunjukkan pada tabel berikut:
Unit viewport: vw, vh, vmin, vmax

Unit panjang mewakili persentase dimensi viewport saat ini: lebar (vw), tinggi (vh), lebih kecil dari keduanya (vmin), atau lebih besar dari keduanya (vmax).

WhatsApp chat