Ölçü Birimleri

CSS Podcast - 008: Boyutlandırma Birimleri

Web duyarlı bir ortamdır ancak bazen genel arayüz kalitesini artırmak için boyutlarını kontrol etmek istersiniz. Buna örnek olarak, okunabilirliği artırmak için satır uzunluklarını sınırlamak verilebilir. Web gibi esnek bir ortamda bunu nasıl yaparsınız?

Bu durumda, hesaplanan boyutunda oluşturulan yazı tipindeki "0" karakterinin genişliğine eşit olan bir ch birimi kullanabilirsiniz. Bu birim, metnin genişliğini, metni boyutlandırmak için tasarlanmış bir birimle sınırlamanıza olanak tanır. Böylece, metnin boyutu ne olursa olsun öngörülebilir kontrol sağlanır. ch birimi, bu örnek gibi belirli bağlamlarda faydalı olabilecek birkaç birimden biridir.

Numbers

Sayılar, opacity, line-height ve hatta rgb'deki renk kanalı değerlerini tanımlamak için kullanılır. Sayılar, birimsiz tam sayılar (1, 2, 3, 100) ve ondalık sayılardır (.1, .2, .3).

Sayılar, bağlamlarına göre anlam kazanır. Örneğin, line-height değerini tanımlarken bir sayıyı destekleyici bir birim olmadan tanımlarsanız bu sayı bir oranı temsil eder:

p {
  font-size: 24px;
  line-height: 1.5;
}

Bu örnekte 1.5, p öğesinin hesaplanmış piksel yazı tipi boyutunun %150'sine eşittir. Yani p öğesinin font-size değeri 24px ise satır yüksekliği 36px olarak hesaplanır.

Sayılar aşağıdaki yerlerde de kullanılabilir:

• Filtreler için değerler ayarlanırken: filter: sepia(0.5), öğeye 50% sepya filtresi uygular.
• Opaklık ayarlanırken: opacity: 0.5, 50% opaklık uygular.
• Renk kanallarında: rgb(50, 50, 50), burada renk değeri ayarlamak için 0-255 değerleri kabul edilir. Renk dersine bakın.
• Bir öğeyi dönüştürmek için: transform: scale(1.2), öğeyi başlangıç boyutunun% 120'si oranında ölçeklendirir.

Yüzdeler

CSS'de yüzde kullanırken yüzdenin nasıl hesaplandığını bilmeniz gerekir. Örneğin, width, üst öğedeki kullanılabilir genişliğin yüzdesi olarak hesaplanır.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

Yukarıdaki örnekte, düzenin varsayılan box-sizing: content-box kullanıldığı varsayılarak div p'ün genişliği 150px'tür.

margin veya padding'ü yüzde olarak ayarlarsanız bu değerler, yönden bağımsız olarak üst öğenin genişliğinin bir kısmı olur.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

Yukarıdaki snippet'te hem margin-top hem de padding-left 150px olarak hesaplanır.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Yüzde olarak bir transform değeri ayarlarsanız bu değer, dönüşüm grubunun bulunduğu öğeyi temel alır. Bu örnekte, p için translateX değeri 10%, width değeri ise 50%'tir. Öncelikle genişliğin ne olacağını hesaplayın: 150px, üst öğesinin genişliğinin %50'si olduğundan. Ardından 150px'ün 10%'ünü alın. Bu değer 15px'dir.

Boyutlar ve uzunluklar

Sayıya bir birim eklerseniz bu birim boyut haline gelir. Örneğin, 1rem bir boyuttur. Bu bağlamda, bir sayıya eklenen birim, spesifikasyonlarda boyut jetonu olarak adlandırılır. Uzunluklar, mesafeyi ifade eden boyutlardır ve mutlak veya göreli olabilir.

Mutlak uzunluklar

Tüm mutlak uzunluklar aynı temelde çözümlenir ve bu sayede CSS'nizde nerede kullanıldıkları fark etmeksizin. Örneğin, öğenizi boyutlandırmak için cm'ü kullanıp ardından yazdırırsanız cetveleyle karşılaştırdığınızda doğru olmalıdır.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Bu sayfayı yazdırırsanız div 10x5 cm boyutunda siyah bir dikdörtgen olarak yazdırılır. CSS'nin yalnızca dijital içerik için değil, basılı içeriklere stil vermek için de kullanıldığını unutmayın. Mutlak uzunluklar baskı için tasarım yaparken çok kullanışlı olabilir.

Göreli uzunluklar

Göreceli uzunluk, tıpkı yüzde gibi bir taban değere göre hesaplanır. Bu değerlerle yüzdeler arasındaki fark, öğeleri bağlama göre boyutlandırabilmenizdir. Bu, CSS'de metin boyutunu temel alan ch gibi birimler ve görüntü alanının (tarayıcı pencereniz) genişliğine dayalı vw gibi birimler olduğu anlamına gelir. Göreli uzunluklar, duyarlı yapısı nedeniyle özellikle web'de yararlıdır.

Yazı tipi boyutuna göreceli birimler

CSS, oluşturulan yazı tipinin öğelerinin boyutuna göre göreceli olan yararlı birimler sağlar. Örneğin, metnin boyutu (em birimi) veya yazı tipi karakterlerinin genişliği (ch birimi).

Görüntü alanına göre birimler

Görüntü alanının (tarayıcı penceresi) boyutlarını göreceli bir temel olarak kullanabilirsiniz. Bu birimler, mevcut görüntü alanı alanını bölümlere ayırır.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Bu örnekte, 1vw görünüm genişliğinin% 1'i olduğundan, div görüntü alanının genişliğinin% 10'u olacaktır. p öğesinin max-width değeri 60ch olduğundan, hesaplanan yazı tipi ve boyutunda 60 "0" karakterden oluşan genişliği aşamaz.

Çeşitli birimler

Belirli değer türleriyle ilgilenmek için belirtilen başka birimler de vardır.

Açı birimleri

Renk modülünde, hsl'teki ton gibi derece değerlerini tanımlamak için faydalı olan açı birimlerine baktık. Ayrıca dönüşüm işlevleri içindeki öğelerin döndürülmesi için de kullanışlıdırlar.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

deg açı birimini kullanarak bir div'ı merkez ekseni üzerinde 90° döndürebilirsiniz.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Çözünürlük birimleri

Yukarıdaki örnekte min-resolution değeri 192dpi şeklindedir. dpi birimi, inç başına nokta sayısı anlamına gelir. Bunun için yararlı bir bağlam, medya sorgusunda Retina ekranlar gibi çok yüksek çözünürlüklü ekranları algılayıp daha yüksek çözünürlüklü bir resim sunmaktır.

Öğrendiklerinizi test etme

Beden bilgisi hakkındaki bilginizi test edin

Kaynaklar

• CSS Spesifikasyonu Değerleri ve Birimleri Düzeyi 4
• MDN'deki Boyutlandırma ve Birimler
• EMS Hakkında
• Yüzdeleri açıklayan bir makale