CSS Units in Detail

CSS'de Uzunluk Birimleri

CSS'de uzunlukları ifade etmek için birçok farklı birim bulunmaktadır. Birçok CSS özelliği, genişlik, kenar boşluğu (margin), dolgu (padding), yazı tipi boyutu (font-size) gibi "uzunluk" değerleri alır.

Mutlak Uzunluk Birimleri

Mutlak uzunluk birimleri sabittir ve herhangi bir uzunluk birimi ile ifade edilen bir uzunluk, tam olarak o boyutta görünecektir. Bu birimler genellikle baskı ve diğer sabit boyutlu medyalarda kullanılır. Mutlak uzunluk birimleri şunlardır:

cm: Santimetre
mm: Milimetre
in: İnç
px: Piksel
pt: Punto (1 pt = 1/72 inç)
pc: Pika (1 pc = 12 pt)

Örnek

p {
    margin: 1cm;
    padding: 10px;
    font-size: 12pt;
}

Göreli Uzunluk Birimleri

Göreli uzunluk birimleri, başka bir uzunluk özelliğine göre bir uzunluk belirtir. Göreli uzunluk birimleri, farklı görüntüleme ortamları arasında daha iyi ölçeklenir. Bu birimler şunlardır:

em: Ana öğenin yazı tipi boyutuna göre hesaplanan birim.
rem: Kök öğenin yazı tipi boyutuna göre hesaplanan birim.
vw: Görüntüleme alanının genişliğinin %1'i.
vh: Görüntüleme alanının yüksekliğinin %1'i.
%: Bağlı olduğu öğenin bir yüzdesi olarak ifade edilen birim.

`em` ve `rem` Kavramı

em: Bu birim, içinde bulunduğu öğenin yazı tipi boyutuna göre hesaplanır. Örneğin, bir öğenin yazı tipi boyutu 16px ise, 2em bu öğe için 32px anlamına gelir.
rem: Bu birim, kök öğenin (genellikle <html> öğesi) yazı tipi boyutuna göre hesaplanır. Örneğin, kök öğenin yazı tipi boyutu 16px ise, 2rem tüm belgede 32px anlamına gelir.

Örnek

html {
    font-size: 16px;
}

body {
    font-size: 1.5em; /* 24px */
}

h1 {
    font-size: 2rem; /* 32px */
}

`vh` ve `%` Örneği

div {
    width: 50vw; /* Görüntüleme alanının genişliğinin %50'si */
    height: 50vh; /* Görüntüleme alanının yüksekliğinin %50'si */
}

.container {
    width: 100%;
    height: 100%;
}

Kritik Değerlendirme

PDF'de sunulan bilgiler genel olarak doğrudur, ancak bazı kritik noktalar daha ayrıntılı ele alınmalıdır. Örneğin, mutlak uzunluk birimlerinin kullanımı, genellikle responsive (duyarlı) tasarımda önerilmez çünkü ekran boyutları ve çözünürlükler arasında ölçeklenmezler. Göreli uzunluk birimleri ise, duyarlı tasarımda daha esneklik sağlar ve farklı cihazlarda daha tutarlı bir kullanıcı deneyimi sunar.

Sonuç

CSS uzunluk birimlerini anlamak, etkili ve duyarlı web tasarımı için kritik öneme sahiptir. Mutlak ve göreli birimlerin doğru kullanımı, bir web sitesinin farklı cihazlarda ve ekran boyutlarında nasıl görüneceğini doğrudan etkiler. Bu nedenle, doğru birimlerin seçimi ve kullanımı, profesyonel web geliştirme süreçlerinde titizlikle ele alınmalıdır.

Cascading Style Sheets