CSS Uzunluk Birimleri Rehberi

Temel olarak, CSS uzunluk birimleri web sitelerinin ölçülmesinde ve oluşturulmasında önemli bir role sahiptir. Kenar boşlukları ve dolgular gibi birçok CSS özelliği, çeşitli sayfa öğelerini düzgün şekilde görüntülemek için uzunluk ölçümlerine bağlıdır. Öyleyse, her birinin kendi özel amacına hizmet eden, CSS’de uzunluğu ifade etmek için birkaç farklı ünite bulunması şaşırtıcı değildir.

Tüm CSS uzunluk birimleri, pozitif ya da negatif sayılar olarak ifade edilebilir, ancak bazı özellikler sadece pozitif sayıları kabul eder (örneğin, yazı tipi boyutu). Sayıyı cm (santimetre) veya px (piksel) gibi gerçek uzunluk birimini temsil eden iki harfli bir kısaltma izler. Kuralın istisnası, uzunluk biriminin belirtilmesi gerekmeyen 0 (sıfır) uzunluğudur.

CSS uzunluk birimleri iki tipte gelir: mutlak uzunluk birimleri ve bağıl uzunluk birimleri.

Mutlak CSS uzunluk birimleri

Mutlak CSS uzunluk birimleri web tasarımı için uygun değildir. Fiziksel dünyadaki ölçümlerin dijital temsilidir ve ekran boyutu ve çözünürlüğü ile ilgili değildir. Belirli bir birimin aynı değerlerinin mutlak uzunlukları farklı ekranlarda farklılık gösterebilir. Bu, ekran DPI’daki farktan kaynaklanır (inç başına nokta sayısı). Daha yüksek çözünürlüklü ekranlar, daha küçük çözünürlüklü ekranlara kıyasla daha yüksek bir DPI’ye sahiptir, böylece görüntü veya metni daha küçük gösterir. Mutlak üniteler, nesnelerin inç, nokta ve resim olarak ölçmenin yaygın olduğu basılı belgeler için stil sayfalarının tanımlanmasında çok daha faydalıdır.

Mutlak uzunluk birimleri şunlardır:

Mutlak uzunluk birimlerinin çoğu web üzerinde işe yaramaz. Px istina tabi.
Piksel görüntüleme cihazına göredir. Ekran görüntüsü için, bir CSS pikseli tipik olarak ekranın bir cihaz pikseline (nokta) eşittir. Yazıcılar ve çok yüksek çözünürlüklü ekranlar için, bir CSS pikseli birden fazla cihaz pikselini ima eder, böylece inç başına piksel sayısı 96 civarında kalır.

Göreceli(Bağıl) CSS uzunluk birimleri

Göreceli CSS uzunluk birimleri sabit değerlere sahip değildir. Değerleri önceden tanımlanmış başka bir değer veya özelliğe göredir. Göreceli birimler web tasarımında daha kullanışlıdır, çünkü genişlik, yükseklik, yazı tipi boyutu vb. Diğer bazı temel parametrelerle ilişkilendirebildiğimiz için öğeleri düzgün şekilde boyutlandırmayı kolaylaştırırlar.

Yazı Tipi Bağıl Uzunlukları

Yazı tipi göreli birimleri, önceden tanımlanmış yazı tipi boyutu veya yazı tipi ailesi değeri ile ilgilidir ve şunları içerir:

• ex (x-height)
• ch (character)
• em (em)
• rem (root em)

ex

ex birim “geçerli yazı tipinin x yüksekliği veya  bir “em“in yarısı” olarak tanımlanır. Belirli bir fontun x yüksekliği, o fontun küçük harf x’inin yüksekliğidir. Yazı tipi ailesi değiştikçe değişir.

ch

Bu, x yüksekliğine benzer, yalnızca ch, x karakterinin yüksekliği yerine sıfır (0) karakterinin genişliğine dayanır. Yazı tipi ailesi değiştikçe de değişir.

em

em birimi, ana öğenin veya ana öğenin yazı tipi boyutuna eşit bir değere sahiptir. Örneğin, ana öğenin yazı tipi boyutu 30 piksel ise, o zaman 1em değeri, tüm alt öğelerin tümü için 30 piksel (30 x 1) olarak hesaplanır. Numaranın tam bir sayı olması gerekmez. Örneğimizde 1em yerine 0.5 koyarsak, bu değer 15 px (30 x 0,5) olarak hesaplanır.

Unutulmaması gereken bir şey em değerinin hemen üst etiketin değerini almasıdır. Bu, iç içe geçmiş elemanlarda istenmeyen sonuçlara yol açabilir.

Örneğin, iç içe geçmiş 3 elementimiz var. İlk eleman (root) 30px font boyutunda, iç içe iki eleman ise fontu 2em olarak ayarlanmış. Kök öğenin içine yerleştirilen öğenin yazı boyutu 60 px (30 x 2) olurken, iç öğenin içine yerleştirilmiş öğenin yazı boyutu 120 px (60 x 2) olur.

rem

rem birimi em’e benzer, ancak değeri her zaman kök öğenin yazı tipi boyutuna (HTML belgelerinde html öğesidir) eşit kalır. Em gibi aşamalı kullanılmaz.
Hızlı yanıt veren web siteleri geliştirirken rem birimi kullanışlıdır, çünkü tüm sayfayı yalnızca html öğesindeki yazı tipi boyutunu değiştirerek ölçekleyebilirsiniz.

Görüntü Alanı Yüzde Uzunlukları

Vitrin yüzdesi uzunlukları, görünüm alanının genişliğine ve yüksekliğine dayanır ve şunları içerir:

• vh (viewport height)
• vw (viewport width)
• vmin (viewport minimum)
• vmax (viewport maximum)

vw

Bu “görünüm genişliği” birimidir. 1vw, görünüm(viewport) genişliğinin 1 / 100’üne eşittir. Ana öğeden veya ana öğenin genişliğinden bağımsız olarak değerin tüm öğeler için tutarlı kalması dışında, yüzdeye benzer. Örneğin, pencerenin genişliği 1000 piksel ise, 1vw 10 piksel olacaktır.

vh

Sadece vw (viewport width) birimi ile aynı, bunun yerine viewport yüksekliğine dayanır. 1vh, görünüm yüksekliğinin 1 / 100’üne eşittir. Örneğin, tarayıcının yüksekliği 900px ise, 1vh 9px olarak değerlendirilir.

vmin

vmin, görünüm yüksekliği ve genişliği arasındaki minimum değerin 1 / 100’üne eşittir. Başka bir deyişle, en küçük uzunluğa sahip tarafın 1 / 100’ü. Örneğin, boyutlar 1200 x 800 olsaydı, değer 8 piksel olurdu.

vmax

Vmin’e benzer şekilde, bunun dışında, görünümün yüksekliği ve genişliği arasındaki maksimum değerin 1 / 100’üne eşittir. Başka bir deyişle, en büyük uzunluğa sahip tarafın 1 / 100’ü. Örneğin, boyutlar 1200 x 800 olsaydı, değer 12 piksel olurdu.

Yüzde Ölçü Birimi(%)

Yüzde, teknik olarak bir uzunluk birimi değildir, ancak duyarlı web sitesi geliştirmede çok sık kullanıldığından bu tür bir ilişki vardır.

Yüzde olarak ayarlanan bir uzunluk, ana öğenin aynı özelliğinin uzunluğuna dayanır. Örneğin, ana öğe 1000 piksel genişliğinde ise,%50 genişlik değerine sahip yuvalanmış öğe 500 piksel genişliğinde olacaktır.

Tarayıcı desteği

em, ex, px, cm, mm, in, pt, ve pc: Eski IE de dahil olmak üzere tüm tarayıcılarda desteklenir.

rem: IE9+ dahil tüm kullanımda olan tarayıcılar.

vw, vh, ve vmin: Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. Internet Explorer vmin, standart olmayan vm sözdizimi tarafından desteklenir.

vmax :Chrome 20+, Firefox 19+ ve Opera 20+ ve Safari 6.1+. IE’de destek yok.