Unit CSS
CSS memiliki unit yang berbeda-beda untuk mendeskripsikan satuan panjangnya.
Banyak properti CSS menggunakan nilai “length”, seperti width, margin, padding, font-size, dll.
Panjang CSS adalah angka yang diikuti dengan satuan panjang, seperti 10px, 2em, dll.
Unit CSS adalah satuan untuk menentukan ukuran dari suatu elemen atau kontennya.
Spasi tidak bisa ada di antara angka dan unit. Namun, jika nilainya 0, unit dapat dihilangkan.
Untuk beberapa properti CSS, panjang negatif diperbolehkan.
Ada dua jenis satuan panjang yaitu, absolut dan relatif.
Absolute Lengths
Satuan panjang absolut(absolute lengths) merupakan satuan panjang yang telah ditetapkan dan panjang yang dinyatakan dalam satuan ini akan tampak persis dengan ukuran tersebut.
Satuan panjang absolut tidak disarankan untuk digunakan di layar, karena ukuran layar sangat bervariasi.
Contoh :
Cm= Centimeters
<!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>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Contoh :
Mm=Milimeters
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
font-size: 5mm;
line-height: 10mm;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Contoh :
In = Inches (1in = 96px = 2.54cm)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
font-size: 0.2in;
line-height: 0.5in;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Contoh :
Px = Pixels (1px = 1/96th of 1in)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
font-size: 15px;
line-height: 20px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
*Piksel (px) relatif terhadap perangkat tampilan. Untuk perangkat dengan dpi rendah, 1px adalah satu piksel perangkat (titik) dari tampilan. Untuk printer dan layar resolusi tinggi, 1px menyiratkan beberapa piksel perangkat.
Contoh :
pt = points (1pt = 1/72 of 1in)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
font-size: 15pt;
line-height: 25pt;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Contoh :
Pc = Picas (1pc = 12 pt)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
font-size: 1.5pc;
line-height: 3pc;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Relative Lengths
Satuan panjang relatif menentukan panjang relatif terhadap properti panjang lainnya. Unit panjang relatif berskala lebih baik di antara berbagai media rendering.
Contoh :
em = Satuan panjang relatif dengan ukuran font elemen (2em berarti 2 kali ukuran font saat ini)
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
line-height: 2em;
}
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>
</body>
</html>
Contoh :
ex = Satuan panjang relatif dengan tinggi x font, saat ini jarang digunakan
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 1ex;
}
</style>
</head>
<body>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>
</body>
</html>
Contoh :
ch = Satuan panjang relatif dengan lebar “0” (nol)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 3ch;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 3ch.</div>
<p>The ch unit sets the font-size relative to the width of the character "0".</p>
</body>
</html>
Contoh :
rem = Satuan panjang relatif dengan ukuran font elemen root
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size:16px;
}
div {
font-size: 3rem;
border: 1px solid black;
}
#top-div {
font-size: 2rem;
border: 1px solid red;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div id="top-div">
The font-size of this div element is 2rem, which translates to 2 x the browser's font size.
<div>The font-size of this div element is 3rem. It also shows that it does not inherit from its parent element font size.</div>
</div>
<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>
</body>
</html>
Contoh :
vw = Satuan panjang relatif dengan 1% dari lebar viewport *
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vw;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>
<p>The vw unit is not supported in IE8 and earlier.</p>
</body>
</html>
Contoh :
vh = Satuan panjang relatif dengan 1% tinggi viewport *
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vh;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>
<p>The vh unit is not supported in IE8 and earlier.</p>
</body>
</html>
Contoh :
vmin = Satuan panjang relatif dengan 1% dimensi viewport * yang lebih kecil
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmin;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>
</body>
</html>
Contoh :
vmax = Satuan panjang relatif dengan 1% dimensi viewport * yang lebih besar
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmax;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Edge 15 and earlier, nor in Safari 6.1 and earlier.</p>
</body>
</html>
Contoh :
% = Satuan panjang relatif dengan elemen induk
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 150%;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 150%.</div>
<p>The % unit sets the font-size relative to the current font-size.</p>
</body>
</html>
Tip: Unit em dan rem cukup praktis dalam membuat tata letak yang dapat diskalakan dengan sempurna, contoh : viewport = ukuran jendela browser. Jika viewport memiliki lebar 50cm, 1vw = 0,5cm.
Browser
Angka-angka dalam tabel berikut menentukan versi browser pertama yang sepenuhnya mendukung length unit.
| Length Unit | Chrome | Internet Explorer | Mozila | Safari | 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 | Tidak Support | 19.0 | 7.0 | 20.0 |
Catatan: Internet Explorer 9 mendukung vmin dengan nama non-standar: vm
