23/03/2016

Length (Satuan Ukuran dalam CSS)

23/03/2016

Istilah length adalah tipe data CSS yang digunakan untuk menentukan ukuran elemen menggunakan unit relatif atau unit absolut. Dalam penulisannya (sintak CSS), ukuran lenght terdiri dari integer atau angka desimal lalu diikuti oleh singkatan satuan ukuran tanpa ada spasi diantara keduanya.

Satuan Ukuran CSS Unit Relative


Unit relative adalah unit yang besaran nilainya akan menghasilkan ukuran yang tidak tetap dan tergantung pada beberapa hal seperti nilai yang ditentukan pada elemen induk, ukuran lebar viewport, ukruan tinggi viewport (layar area konten pada browser diluar toolbars, tab, address box atau lainnya), dll. Artinya, besaran nilai dari unit relative akan menghasilkan ukuran yang tidak pasti.
Berikut ini gambaran singkat dari unit relative
Unit Deskripsi
% Relatif terhadap nilai yang telah ditentukan pada elemen induk
em Unit em relatif terhadap nilai yang telah ditentukan pada elemen induk (dua kali lebih besar)
rem Unit rem relatif terhadap ukuran elemen utama(HTML)
Kata Kunci xx-small, x-small, small, medium, large, x-large, xx-large
vw Unit vw relatif terhadap 1/100 ukuran lebar viewport
vh Unit vh relatif terhadap 1/100 ukurang tinggi viewport
ch Unit ch relatif terhadap lebar karakter "0" (nol) pada jenis font yang digunakan
vmin Unit vmin relatif terhadap 1/100 ukuran terkecil viewport(lebar/tinggi)
vmax Unit vmax Relatif terhadap 1/100 ukuran terbesar viewport(lebar/tinggi)
Contoh penulisan Satuan Ukuran CSS unit relatif adalah seperti berikut

Sintaks CSS

#elemen {font-size: 1em}

Sebagai catatan, apabilai kita tidak menentukan nilai CSS font-size pada sebuah dokumen HTML, ada nilai default yang digunakan oleh kebanyakan browser untuk menentukan ukuran font pada tag <body> dan <HTML>, yaitu 100%, artinya 100% = 1em = 1rem = 16px = 12pt.

Satuan Ukuran CSS Nilai Absolute


Nilai absolute adalah nilai-nilai yang didasarkan pada ukuran media printing dan tidak terpengaruh oleh kondisi css tag induk elemen HTML (parent) atau viewport. Artinya, besaran nilai dari unit absolute akan menghasilkan ukuran yang pasti.
Nilai Deskripsi
px Satuan pixel titik layar, 1px = 1/96 dari 1in
mm Satuan milimeter
cm Satuan centimeter, 1cm = 10mm
di satuan inchi, 1di = 2,54cm
pt satuan point, 1pt = 1,72 inchi
pc Satuan pica, 1pc = 12point
Contoh penulisan Satuan Ukuran CSS unit absolute adalah seperti berikut

Sintaks CSS

#elemen {font-size: 1px}
Catatan
  1. jenis satuan ukuran dapat diabaikan jika angka yang dimaksud adalah nol (0)
  2. Jenis nilai yang paling umum di CSS dari unit relative adalah persen dan dari unit absolute adalah pixel.
  3. Satuan Piksel (px) dapat dikategorikan dalam unit relatif dan unit absolute. Pixel disebut sebagian bagian dari unit relative karena pengukuran didasarkan pada resolusi layar monitor atau layar, bukan ukuran viewport. Namun, piksel juga bisa dikategorikan sebagai bagian dari unit absolute karena ukuran yang diberikan dalam pixel dapat berubah hanya melalui fitur zoom pada layar monitor saja.
  4. Panjang dan lebar Gambar dengan tipe seperti foto jpeg dan gifs didefinisikan dalam piksel.