CSS’ de Ölçü ve Uzunluk Birimleri

Published in

baakademi

5 min readSep 13, 2020

CSS içinde uzunluk tanımlamaları için birden fazla ölçü birimi kullanılmaktadır. Bunların bazıları matbaacılıktan, bazıları günlük hayatımızda kullandığımız ölçülerden gelirken bazıları ise bilişim teknolojilerinde özellikle web sitelerinin tasarlanmasında ve ölçülmesinde önemli role sahip birimlerdir.

Tüm CSS uzunluk birimleri, pozitif ya da negatif sayılar olarak ifade edilebilir, ancak bazı özellikler sadece pozitif sayıları geçerli görür (örneğin yazı tipi boyutu).

CSS de ölçü birimlerini genel olarak 2 kısıma ayırabiliriz:

Mutlak(Absolute) Ölçü Birimleri
Göreceli (Relative) Ölçü Birimleri:

Font Göreli Uzunluklar
Pencere Boyu veya Bakış Alanı Birimi (Viewport)

Tasarım yaparken çıkış ortamı göz önüne alınıp(ekran,baskı vb.) uygun birimlerin seçilmesi ise buradaki kilit nokta diyebiliriz. Yanlış bir kullanımda tasarımımızı efektif bir şekilde çıktıya yansıtamayabiliriz.

1) MUTLAK (ABSOLUTE) ÖLÇÜ BİRİMLERİ

Mutlak ölçü birimleri (cm, mm, in, pt ,pc ve px*) çıkış ortamı baskı olacak belgelerde kullanışlı ölçülerdir. Web tasarımı için uygun değildir (pixel istisnai bir durum). Belirli bir birimin aynı değerlerinin mutlak uzunlukları farklı ekranlarda farklılık gösterebilir. 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.Bu sebeple, belgenin tamamını görmek için kullanıcının sürekli ekranı kaydırması gerekecektir. Bu da iyi bir kullanıcı deneyimi oluşturmaz.

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) web tasarımında çokça tercih edilen bir birimdir. Pixel 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şit diyebiliriz. Bu tarz bilgisayar ekranlarında 1 inç başına 96 nokta düşer. 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.

2) GÖRECELİ (RELATIVE) ÖLÇÜ BİRİMLERİ

Göreceli CSS uzunluk birimleri sabit değerlere sahip değildir. Değerleri önceden tanımlanmış (predefined) 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 Göreli(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:

em

Bu ölçü biriminde varsayılan font ailesinde (font-family) yer alan M harfinin genişliği ölçü için referans olarak alınır. 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 20px ise, 1em tüm alt elementler için 20px (20×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ığı 10px olacaktır.

Unutulmaması gereken önemli nokta ise 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)20px font boyutunda, iç içe iki eleman ise fontu 2em olarak ayarlanmış. Kök öğenin içine yerleştirilen öğenin yazı boyutu 40 px (20 x 2) olurken iç öğenin içine yerleştirilmiş öğenin yazı boyutu 80 px (40 x 2) olur.

rem (root em)

rem birimi em biriminden farklı olarak her zaman kök elementin (HTML belgelerinde html öğesidir.) 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 em ile aynı mantıkta çalışır ,“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 ise, o fontun küçük harf x’inin yüksekliğidir. Yazı tipi ailesi değiştikçe değişir. Nadiren kullanılan bir birimdir.

ch (character)

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

Pencere Boyu veya Bakış Alanı Birimi (Viewport)

Viewport, tarayıcı ekranın kullanıcı tarafından görünen kısmını ifade eder. HTML5, web tasarımcılarının < meta > etiketi ile görüntüleme alanı üzerinden kontrol sahibi olmamızı sağlayan bir yöntem geliştirmesi sayesinde bu yeni ölçü birimini CSS’e kazandırmış oldu.

Tasarımcılar için büyük kolaylık sağlayan bu ölçü birimi, artık javascript ile yapılan ekrana sığdırma gibi bazı işlemleri otomatik olarak yapmamıza olanak tanımaktadır.

İlk başta bakış alanını belirleyip sonra sayfa boyutunu değiştirdiğinizde buna göre yeni bir ölçeklendirme yapılır. Kullanıcı tarayıcı boyutunu her değiştiğinde hesaplamalar tekrar tekrar yapılır.

Viewport olarak kullanabileceğiniz ölçü birimleri vh, vw, vmin ve vmax ‘dir.

vw (viewport width)

vw , 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 üst elementlerden (parent) veya üst elementlerin genişliğinden bağımsız işler.

vh (viewport height)

vh, 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) ve görüntü alanı genişliği (vw ) değerlerine bakar ve minimum olan değer üzerinden 1/100 olarak oranlar. Örneğin, 1900x1080px bir ekranda min değer 1080px olacaktır. Dolayısıyla 1vmin 10.8px olarak değerlendirilir.

vmax (viewport maximum)

vmax tıpkı vmin gibi görüntü alanının yükseklik ve genişlik değerini inceler ancak bu sefer max olan değer üzerinden işlem gerçekleştirir. Yani, yukarıdaki örnek üzerinden ilerleyecek olursak 1900x1080px bir ekranda 1vmax karşılığı 19px olacaktır.

viewport meta etiketinin kuralı şu şekildedir;

<meta name=”viewport” content=”width=değer, height=değer, initial-scale=değer, minimum-scale=değer, maximum-scale=değer, user-scalable=değer, target-desityDpi=değer” />

% (percentages)

Başka bir uzunluğa bağlı olarak verilen yüzde orantı birimdir. Örneğin sayfamızda 500px genişliğinde bir alan olduğunu düşünürsek ve içerisine eşit boylarda 4 kutu oluşturacaksak kutuların genişliklerine “width: 25%;” değeri veririz. Böylece kutuların mutlak boyutunu 125px değerine eşitleyebiliriz. Yüzde ölçülendirme birimi responsive tasarım anlayışının en temel ölçü birimidir.