Mengenal Jenis-Jenis Satuan Value dalam CSS

Satuan Value CSS

CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt untuk memubuat nilai dari property nya. misalnya kita mau mengatur besar suatu tulisan h1 nilainya bisa kita buat 20vw, 20px, atau memakai nilai lainnya.

css mengelompokan nilai ini kedalam 3 bagian, yaitu nilai absolut, relatif dan persen.

Nilai Absolute

nilai absolut merupakan nilai yang tidak terpengaruh oleh kondisi tag induknya, yang termasuk kedalam nilai absolut adalah

cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
 font-size: 0.5cm;
 line-height: 1cm;
}
</style>
</head>
<body>

<h1>Ini heading 1.5cm</h1>
<h2>Ini heading 2 1cm</h2>
<p>paragraph.</p>
<p>paragraph Lainnya.</p>

</body>
</html>

dari contoh diatas saya membuat h1 ukurannya menjadi 1.5cm, dan h2 ukuran 1cm

untuk contoh milimeter coba edit code diatas, ganti selector h1 dan h2 menjadi seperti berikut

h1 {font-size: 15mm;}
h2 {font-size: 10mm;}

kemudian jalankan, ternyata setelah dijalankan hasilnya sama dengan centimeter.

Contoh inches ganti style dalam contoh diatas dengan yang dibawah ini

<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
    font-size: 0.2in;
    line-height: 0.5in;
}
</style>

Contoh Pixel – ganti style diatas dengan dibawah ini dan lihat hasilnya.

<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
    font-size: 15px;
    line-height: 20px;
}
</style>

Contoh points – ganti style diatas dengan yang dibawah ini

<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
    font-size: 15pt;
    line-height: 25pt;
}
</style>

Contoh Picas

<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
font-size: 1.5pc;
line-height: 3pc;
}
</style>

Nilai Relatif

nilai relatif dapat terpengaruh oleh tag disekitarnya. nilai relatif yang didukung seperti pixel (px), Em-height (em), dan X-height (ex).

pixel (px) adalah ukuran yang paling umum digunakan di CSS. 1,1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1,1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.

dibawah ini table perbandingan antara px, em, dan persen

px em percent
5px 0.3125em 31.25%
6px 0.3750em 37.50%
7px 0.4375em 43.75%
8px 0.5000em 50.00%
9px 0.5625em 56.25%
10px 0.6250em 62.50%
11px 0.6875em 68.75%
12px 0.7500em 75.00%
13px 0.8125em 81.25%
14px 0.8750em 87.50%
15px 0.9375em 93.75%
16px 1.0000em 100.00%
17px 1.0625em 106.25%
18px 1.1250em 112.50%
19px 1.1875em 118.75%
20px 1.2500em 125.00%
21px 1.3125em 131.25%
22px 1.3750em 137.50%
23px 1.4375em 143.75%
24px 1.5000em 150.00%
25px 1.5625em 156.25%

Untuk mengkonversi satuan nilai bisa masuk kesini

1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.

Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.

Nilai Persentasi

Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.

berikut table informasi browser yang support dengan value yang telah dibahas diatas.

Length Unit  Chrome  IE  Firefox  Sapari  Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0 19.0 6.0 20.0
vmax 26.0 Not supported 19.0 Not supported 20.0

sebenarnya satuan value vmax ini tak begitu penting dan sangat jarang dipakai, apalagi di indonesia sangat jarang orang yang memakai browser IE, dan kebanyakan satuan nilai diatas tidak support dibrowser IE tersebut.

Keyword:

  • satuan value

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas