CSS Uzunluk Birimleri (Length Units)

Bu yazıda ise kullanılabilecek uzunluk birimlerine biraz daha detaylı değinmek istiyorum.

CSS Length Units (Uzunluk Birimleri)

Tasarımların hayata geçirilmesi ve oranların doğru sağlanabilmesi için önemli bir role sahip olan birimlere genişlik, yükseklik, kenar çizgisi, kenar boşlukları (margin), dolgular (padding), font boyutları, satır ve sütunlar gibi pek çok alanda ihtiyaç duyabilmekteyiz. Uzunluk birimi dediğimizde çoğu zaman aklımına ilk gelen birimler px (pixel), pt (points) ve % (percentage) olacaktır. Ancak, elbette sınırımız bunlardan ibaret değil ve çok daha farklı özellikler gösteren birimler de CSS dökümanları içerisinde değerlendirilebilmektedir. Ancak, uzunluk birimlerinin kullanılmasına bilinmesi gereken bazı hususlar vardır¹. Tüm CSS uzunluk birimleri pozitif (2px) veya negatif sayılar (-2px) olarak ifade edilebilir, ancak bazı özellikler yalnızca pozitif sayıları kabul eder (yazı tipi boyutu / font-size gibi). Yazım aşamasında sayıyı cm (santimetre) veya px (pixel / piksel) gibi gerçek uzunluk birimini temsil eden iki harfli bir kısaltma (two-letter abbreviation) izler. Ancak, 0 (sıfır) uzunluğu için herhangi bir uzunluk birimini belirtmemize gerek yoktur. Bu uzunluk birimlerini iki tip altında ele almamız gerekir; mutlak uzunluk birimleri (absolute length units) ve bağıl uzunluk birimleri (relative length units)².

Mutlak Uzunluk Birimleri

Mutlak uzunluk birimleri (absolute length units), fiziksel dünyadaki ölçümlerin dijital bir temsilidir. Ekran boyutu ve çözünürlüğü ile ilgili olmadığı için web arayüz geliştirme sürecinde pek tercih edilmemektedir. Piksel (px) bu anlamda bir istisna oluşturmaktadır. Diğer yandan, eğer basılı belgeler için stil sayfaları oluşturuyorsanız inches, points ve picas gibi mutlak değer birimleri daha işlevsel olacaktır. Aradaki farklılık ekranlar çözünürlüklerine bağlı olarak mutlak uzunlukların da değişkenlik gösterecek olmasından kaynaklanmaktadır. Bu, ekran DPI (inç başına nokta sayısı) farklılığından kaynaklanır. Daha yüksek çözünürlüklü ekranlar, daha küçük çözünürlüklü ekranlara kıyasla daha yüksek bir DPI değerine sahiptir ve bu nedenle görüntü veya metin daha küçük görünür³. Mutlak uzunluk birimleri şunları içerir:

cm (santimetre)
mm (milimetre)
in (inç) / (1in = 96px = 2.54cm)
pc (picas) / (1pc = 12 pt)
pt (point) / (1pt = 1in’in 1/72’si)
px (piksel) / (1px = 1/96th of 1in)

Piksel (px) ile ilgili istisnai durumu açıklamak gerekirse, px cihazın görüntüleme biçimine göre değerlendirilir. Bu anlamda, low-dpi değerine sahip bir cihazda bir CSS pikseli (px) bir cihaz pikseline (dot) eşittir diyebiliriz. High-res ekranlar ve printer gibi yüksek çözünürlüğün geçerli olduğu cihazlarda ise değer birden çok aygıt pikseline karşılık gelir.

Bağıl Uzunluk Birimleri

Bağıl uzunluk birimleri (relative length units), sabit değerler almazlar. Aldıkları değerler önceden tanımlanmış (predefined) bir değer veya özelliğe göredir. Cihazlara için fonksiyonel bir yapı sağlamaları sebebiyle arayüz geliştirme sürecinde sıklıkla göreli uzunluk birimleri kullanılır. Çünkü, genişlikler, yükseklikler, yazı boyutları ekran çözünürlüğü ile ilişkili olarak ele alınır. Birimler de bu bağlamda ayrışır.

Görünüm-oran Uzunluğu (viewport-percentage lengths)
1. vh (viewport height)
2. vw (viewport width)
3. vmin (viewport minimum)
4. vmax (viewport maximum)
5. % (percentages)
Font göreli uzunluklar (font-relative lengths)
1. ex (x-height)
2. ch (character)
3. em (em)
4. rem (root em)

Görünüm-Oran Uzunluğu (Viewport-Percentage Lengths)

vw (viewport width)

vw (viewport width), görüntü alanı genişliği birimidir. 1vw görünüm alanının 1/100’üne eşittir. Örneğin, pencerenin genişliği 1000px ise 1vw 10px’e karşılık olacaktır. vw temel olarak yüzde ifadesine benzese de değer üst elementlerden (parent) veya üst elementlerin genişliğinden bağımsız işler.

vh (viewport height)

vh (viewport height), görüntü alanı yüksekliği birimidir ve vw ile benzer kurallarda işler, yani 1vh görünüm alanının 1/100’üne eşittir. Örneğin, pencerenin yüksekliği 1000px ise 1vh 10px olacaktır.

vmin (viewport minimum)

vmin görüntü alanı yüksekliği (vh / viewport height) ve görüntü alanı genişliği (vw / viewport width) değerlerine bakar ve minimum olan değer üzerinden 1/100 olarak oranlanır. Örneğin, 1200x800px bir ekranda min değer 800px olacaktır. Dolayısıyla 1vmin 8px olarak değerlendirilir.

vmax (viewport maximum)

vmax tıpkı vmin gibi görüntü alanının yükseklik ve genişlik değerine bakar ancak bu defa max olan değer üzerinden değerlilik alır. Yani, yukarıdaki örnek üzerinden ilerleyecek olursak 1200x800px bir ekranda 1vmax karşılığı 12px olacaktır.

% (percentages)

% (percentages) teknik olarak bir uzunluk birimi değildir. Ancak, responsive web design çalışmalarında elementler arasında orana dayalı ilişkiler kurmak amacıyla sıklıkla kullanılmaktadırlar. Yüzde olarak verilen bir değer bir üstündeki elementin (parent) değerine bağlı olarak değerlilik alır. Örneğin, 1000px görüntü alanındaki element için 10% genişlik tanımı verelim. Bu durumda elementin genişliği 100px olacaktır.

Font Göreli Uzunluklar (Font-Relative Lengths)

em (em)

em birimi, temel elementin (base element) veya üst elementin (parent element) yazı tipi boyutuna eşit bir değer alır. Örneğin, üst elementin yazı tipi boyutu 10px ise, 1em tüm yakın alt elementler için 10px (10×1) olarak hesaplanır. Değerin bir tam sayı olmasına gerek yoktur. Yani, 0,5em şeklinde de bir tanım yapmamız mümkündür. Bu durumda alacağımız birim karşılığı 5px olacaktır. Unutmadan, em kullanımında üst elementin alacağı değere dikkat edilmelidir. İç içe elementlerde her element için em tanımı yapılırsa bir süre sonra elde edilecek değer karışıklıklara neden olabilir.

rem (root em)

rem birimi em biriminden farklı olarak her zaman kök elementin (root element) değerini alır ve art arda sıralı em gibi kullanılmaz. rem birimi özellikle duyarlı tasarım sürecinde oldukça faydalıdır. rem ile HTML elementinin yazı tipini değiştirerek tüm sayfanın ölçeklendirilmesi sağlanabilir.

ex (x-height)

ex birimi geçerli yazı tipinin x-height değeri veya em biriminin yarısı olarak değerlilik alır. Bir yazı tipinin x-height değeri o yazı tipinin lower-case x yüksekliğini ifade eder ve font ailesine göre farklılıklar taşır. Nadiren kullanılan bir birimdir.

ch (character)

ch birimi ex birimine benzer ancak lower-case x karakterinin yüksekliği yerine 0 (sıfır / zero) karakterinin yüksekliğini alır. Yine font ailesine bağlı olarak değişkenlik gösterir.

Fraction Birimleri (Fraction units)

fr

Alan (space) birimidir. CSS Grid yapısında alanı kesirlere bölmek için kullanılır.