Ö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 isteyebilirsiniz. Okunabilirliği artırmak için satır uzunluklarını sınırlandırmak buna iyi bir örnektir. Bunu web gibi esnek bir ortamda nasıl yapabilirsiniz?

Bu durumda, hesaplanan boyutunda oluşturulan yazı tipinde "0" karakterin genişliğine eşit bir ch birimi kullanabilirsiniz. Bu birim, metni boyutlandırmak için tasarlanmış bir birimle metnin genişliğini sınırlamanıza olanak tanır. Bu sayede, metnin boyutundan bağımsız olarak öngörülebilir kontrol sağlanır. ch birimi, bu örnekteki gibi belirli bağlamlarda faydalı olabilecek birkaç birimden biridir.

Numbers

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

Sayıların anlamı, bağlamlarına göre değişir. Örneğin, line-height tanımlarken, destekleyici bir birim olmadan tanımlarsanız sayı bir oranı temsil eder:

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

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

Numaralar aşağıdaki yerlerde de kullanılabilir:

• Filtreler için değer ayarlanırken: filter: sepia(0.5), öğeye 50% sepya filtresi uygular.
• Opaklık ayarlanırken: opacity: 0.5, 50% opaklığı uygular.
• Renk değerinin ayarlanması için 0-255 arasındaki değerlerin kabul edildiği rgb(50, 50, 50) renk kanallarında. Renk dersini göster.
• Bir öğeyi dönüştürmek için: transform: scale(1.2), öğeyi başlangıç boyutunun% 120'si kadar ö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 değerini kullandığı varsayılarak div p genişliği 150px'dır.

Yüzde olarak margin veya padding ayarlarsanız yönden bağımsız olarak, üst öğenin genişliğinin bir bölümü 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 */
}

transform değerini yüzde olarak ayarlarsanız dönüşüm grubu olan öğeyi temel alır. Bu örnekte, p öğesinin translateX değeri 10% ve width değeri 50% değerine sahiptir. Öncelikle genişliğin ne olacağını hesaplayın: 150px çünkü üst öğe genişliğinin% 50'si. Ardından, 150px üzerinden 10% alın. Bu, 15px anlamına gelir.

Boyutlar ve uzunluklar

Bir sayıya birim eklerseniz bu bir boyut olur. Örneğin, 1rem bir boyuttur. Bu bağlamda, bir sayıya iliştirilmiş birime, spesifikasyonlarda boyut jetonu olarak atıfta bulunulur. Uzunluklar mesafeyi ifade eden boyutlardır ve mutlak veya göreli olabilir.

Mutlak uzunluklar

Tüm mutlak uzunluklar aynı tabana uzanır. Böylece CSS'nizde nerede kullanılmış olurlarsa olsunlar öngörülebilir hale gelir. Örneğin, öğenizi boyutlandırmak için cm kullanırsanız ve ardından yazdırırsanız bir cetvel ile karşılaştırdığınızda sonuç doğru olacaktır.

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

Bu sayfayı yazdırdıysanız div öğesi 10x5 cm siyah dikdörtgen olarak yazdırılır. CSS'nin yalnızca dijital içerik için değil, basılı içerik stilini belirlemek için de kullanıldığını unutmayın. Mutlak uzunluklar, baskı için tasarlarken çok yararlı olabilir.

Göreli uzunluklar

Göreceli uzunluk, yüzdeye benzer bir taban değere göre hesaplanır. Bunlar ile yüzdeler arasındaki fark, öğeleri içeriğe dayalı olarak boyutlandırabilmenizdir. Bu, CSS'nin, metin boyutunu temel olarak kullanan ch ve görüntü alanının (tarayıcı pencereniz) genişliğine dayalı vw gibi birimlere sahip olduğu anlamına gelir. Göreli uzunluklar, duyarlı yapısı nedeniyle özellikle web'de yararlıdır.

Yazı tipi boyutuna bağlı birimler

CSS, oluşturulan tipografideki öğelerin boyutuna göre, metnin boyutu (em birim) veya yazı tipi karakterlerinin genişliği (ch birim) gibi yararlı birimler sağlar.

Görüntü alanına bağlı birimler

Görüntü alanının (tarayıcı penceresi) boyutlarını göreceli olarak kullanabilirsiniz. Bu birimler, kullanılabilir görüntü alanı alanını oluşturur.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Bu örnekte, 1vw görüntü alanı genişliğinin% 1'i olduğundan, div, görüntü alanı genişliğinin% 10'u olacaktır. p öğesi, 60ch değerine sahip bir max-width değerine sahip. Bu, hesaplanan yazı tipi ve boyutta 60 "0" karakter genişliğini aşamayacağı anlamına gelir.

Çeşitli birimler

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

Açı birimleri

Renk modülünde, hsl'daki ton gibi derece değerlerini tanımlamaya yardımcı olan açı birimlerini inceledik. 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 öğesini orta ekseninde 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'dir. dpi birimi, inç başına nokta sayısı anlamına gelir. Bu durum için yararlı bir bağlam, bir medya sorgusundaki Retina ekranlar gibi çok yüksek çözünürlüklü ekranları algılamak ve daha yüksek çözünürlüklü resim sunmaktır.

Öğrendiklerinizi sınayın

Boyutlandırma bilginizi test edin

Kaynaklar

• CSS Spesifikasyon Değerleri ve Birim Düzeyi 4
• MDN'deki Boyutlar ve Birimler
• EM'ler Hakkında Her Şey
• Yüzde açıklayıcısı