CSS Uzunluk Birimleri ve Kullanım Yerleri

CSS’in en temel konularından biri olan CSS birimleri (CSS Units), basit bir konu olsa da yeni başlayanların kafasını karıştırabilecek bir konudur. Yazımızda mutlak ve göreceli birimler olarak gruplandırdığımız toplam 17 CSS birimini ayrıntıları ile inceleyecek ve hangi birim ne zaman kullanılır sorularına cevap vereceğiz.

Not: Sıfır “0” değeri için birim kullanılması gerekmez. “0px” ve “0” tarayıcı için aynı anlamı ifade eder.

Not: Her birim, tüm tarayıcılarda çalışmayabilir kullanmadan önce hangi tarayıcıda çalıştığını öğrenmek için caniuse.com adresinden kontrol edebilir ve desteklemek istediğinizi tarayıcılara uygun olacak şekilde birimleri kullanabilirsiniz.

Mutlak Uzunluk Birimleri (Absolute Length Units)

Mutlak uzunluk birimleri; belirli bir değişene bağlı olarak ölçeklenmeyen, sabit uzunluklar için kullanılır. Bu sebeple web gibi dinamik ortamlarda değil, basılı metinler gibi statik yani sabit ortamlarda kullanılması daha uygundur.

Not: Mutlak uzunluk birimleri farklı çözünürlüğe sahip ekranlarda farklı görünümler yaratabilir.

in inches – inç
px pixel – piksel
pt point – punto
pc picas – pika
cm centimeters – santimetre
mm millimeters – milimetre
Q quarter millimeters – çeyrek milimetre

1in = 96px = 72pt = 6pc = 2.54cm = 25.4mm = 101.6Q

Göreceli Uzunluk Birimleri (Relative Length Units)

Göreceli uzunluk birimleri; font boyutu, ekran boyutu gibi değerlere bağlı olarak ölçeklenen birimlerdir.

Not: Ekran boyutu baz alınarak hesaplanan göreceli birimleri (vw, vh, vmin, vmax) kullanabilmek için aşağıdaki viewport meta etiketi kullanılmalıdır.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

em ephemeral unit – geçici birim

Ebeveyn öğesine tanımlanmış olan font boyutuna oranla değer alır. Aşağıdaki örnekte <p> etiketinin font boyutu 20px olarak ayarlanacaktır yani ebeveynine tanımlanmış fontun iki katı.

<div style='font-size: 10px;'>
  <p style='font-size: 2em;'>Merhaba Dünya</p>
</div>

rem root em – kök em

Sayfanın kök öğesi olan <html> etiketine tanımlanmış olan font boyutuna oranla değer alır. <html> etiketine bir font boyutu tanımlanmamışsa, büyük tarayıcıların varsayılan olarak kabul ettiği 16px değeri baz alınarak orantılanır. Aşağıdaki örnekte <html> etiketinin font boyutu ayarlanmadığı için tarayıcı varsayılanı olan 16px üzerinden hesap yapılır ve <p> etiketinin boyutu 32px olarak ayarlanır.

<html>
  <p style='font-size: 2rem;'>Merhaba Dünya</p>
</html>

ex equal x – x’e eşit

em birimi gibi ebeveyn etiketin font boyutuna oranla değer alır. Ancak alınan oran doğrudan font boyutu değildir. Küçük ‘x’ harfine denk gelen font boyunu oranlamak için kullanılır. Tercih edilen bir birim olmamakla birlikte, bilinmesinde fayda vardır. Aşağıdaki örnekte ebeveyn öğe olan 20px değeri ile ‘x’ harfi ne kadar yüksekliğe sahipse 1.5ex onun 1.5 katını alacaktır.

<div style='font-size: 20px;'>
  <p style='font-size: 1.5ex;'>Merhaba Dünya</p>
</div>

ch character width – karakter genişliği

em birimi gibi ebeveyn etiketin font boyutuna oranla değer alır. Ancak alınan oran doğrudan font boyutu değildir. Sıfır ‘0’ sayısına denk gelen font genişliğini oranlamak için kullanılır. Tercih edilen bir birim olmamakla birlikte, bilinmesinde fayda vardır. Aşağıdaki örnekte ebeveyn öğenin değeri olan 20px ile ‘0’ sayısının ne kadar genişliğe sahip olduğu hesaplanır. Aşağıdaki örnekte 1.5ch yani ‘0’ sayısının genişliğinin 1.5 katını alacaktır.

<div style='font-size: 20px;'>
  <p style='font-size: 1.5ch;'>Merhaba Dünya</p>
</div>

vw viewport width – görüntü alanı genişliği

Tarayıcıda sitenin göründüğü alanın genişliğine oranla değer belirlemek için kullanılır. Aşağıdaki örnekte, 1vw yani görüntü alanı genişliğinin %1’i oranında değer atanmıştır.

<p style='font-size: 1vw;'>Merhaba Dünya</p>

vh viewport height – görüntü alanı yüksekliği

Tarayıcıda sitenin göründüğü alanın yüksekliğine oranla değer belirlemek için kullanılır. Aşağıdaki örnekte, 1vh yani görüntü alanı yüksekliğinin %1’i oranında değer atanmıştır.

<div>
  <p style='font-size: 1vh;'>Merhaba Dünya</p>
</div>

vmin viewport minimum – minimum görüntü alanı

En küçük görüntü alanına oranla değer belirlemek için kullanılır. Görüntülenen sayfanın genişliği ve sayfa uzunluğu arasından küçük olan değer baz alınarak hesaplanır. Aşağıdaki örnekte, 5vmin değeri ile “görüntü alanı genişliği” ve “görüntü alanı yüksekliği” arasından en küçük değere sahip olanın %5’i alınmıştır.

<p style='font-size: 5vmin;'>Merhaba Dünya</p>

vmax viewport maximum – maksimum görüntü alanı

En büyük görüntü alanına oranla değer belirlemek için kullanılır. Görüntülenen sayfanın genişliği ve sayfa uzunluğu arasından büyük olan değer baz alınarak hesaplanır. Aşağıdaki örnekte, 5vmax değeri ile “görüntü alanı genişliği” ve “görüntü alanı yüksekliği” arasından en büyük değere sahip olanın %5’i alınmıştır.

<p style='font-size: 5vmax;'>Merhaba Dünya</p>

% percentage – yüzde

Ebeveyn öğe değerinin yüzdesi alınarak hesaplanır. Aşağıdaki örnekte de görüleceği üzere her bir yüzde değeri kendi ile alakalı özelliği baz alarak hesaplanır. Yani font-size: 5px olarak hesaplanır, width: 10px olarak hesaplanır, height: 20px olarak hesaplanır.

<div style='font-size: 10px;width:20px;height:40px;'>
  <p style='font-size: 50%;width:50%;height:50%'>Merhaba Dünya</p>
</div>

fr fractional unit – kesirli birim

CSS’in grid özelliği ile birlikte kullanılan bir birimdir. Tanım ile anlatmak zor olacağı için, aşağıdaki örnek üzerinden anlatmak daha doğru olur. Aşağıdaki örnekte 33.3% 33.3% 33.3%; değeri ile grid yapı üç eşit sütuna bölünmüştür. Bu değer yerine 1fr 1fr 1fr; yazılmış olsaydı da sonuç aynı olacaktı. Sonuç olarak fr birimi, grid yapılarda bölümlendirme yapmak için, % birimine alternatif olarak getirilmiş bir birimdir.

<style>
  div {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: 1200px;
  }
</style>

<div style="height: 100px; width: 500px;background:red;">
  <div style="height: 100px; width: 100px;background:green;"></div>
  <div style="height: 100px; width: 100px;background:blue;"></div>
  <div style="height: 100px; width: 100px;background:orange;"></div>
</div>

Kullanım Yerleri

Aşağıda vermiş olduğumuz kullanım tavsiyeleri pek çok kaynak incelenerek en çok önerilen birimler baz alınarak seçilmiştir. İhtiyaca ve duruma göre her birim her yerde kullanılabilir. Ancak, genel olarak aşağıdaki CSS özelliklerine karşılık gelen birimlerin kullanılması iyi bir uygulama olur.

font-size:em
@media:em
padding:rem
margin:rem
width:%
height:px
border:px
border-radius:px
box-shadow:px
text-shadow:px

Yorum Yap