Ö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. Buna örnek olarak, okunabilirliği artırmak için satır uzunluklarını sınırlamak verilebilir. Bunu web gibi esnek bir ortamda nasıl yaparsınız?

Bu durumda, oluşturulan yazı tipinde "0" karakterinin hesaplanmış boyutundaki genişliğe 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. Bu da metnin boyutundan bağımsız olarak tahmin edilebilir bir kontrol sağlar. ch birimi, bu örnekteki gibi belirli bağlamlar için yararlı olan bir avuç 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ığı ayarlarken: opacity: 0.5, 50% opaklığı 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 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%;
}

Önceki ö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 bölümü olur.

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

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

Önceki örnekte 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 bu değer, dönüşüm ayarlanmış öğ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

Bir sayıya birim eklerseniz bu sayı boyut olur. Ö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ı tabana göre çözülür. Bu sayede, CSS'nizde kullanıldıkları her yerde tahmin edilebilir olurlar. Örneğin, öğenizin boyutunu ayarlamak için cm'ü kullanıp ardından yazdırırsanız cetveleyle karşılaştırdığınızda doğruluk elde edersiniz. cm ve in gibi fiziksel birimlerin, piksel boyutlarındaki farklılıklar nedeniyle ekranlarda bu boyutlarda güvenilir bir şekilde gösterilmeyeceğini unutmayın. Fiziksel birimler en iyi şekilde, daha güvenilir olacakları baskı stili sayfalarında kullanılı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çeriğe stil vermek için de kullanıldığını unutmayın. Mutlak uzunluklar, baskı için tasarım yaparken gerçekten kullanışlı olabilir.

Göreli uzunluklar

Göreceli uzunluk, yüzdeye benzer şekilde bir taban değere göre hesaplanır. Bu değerler ile yüzdeler arasındaki fark, boyutları varsayılan yazı tipi boyutu veya pencere boyutları gibi alakalı bir temel boyuta göre tanımlayabilmenizdir. Bu, CSS'nin temel olarak yazı tipinin boyut metriklerini kullanan ch gibi birimlere 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 kullanışlı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üntü alanı genişliğinin% 1'i olduğu için div, görüntü alanı genişliğinin% 10'u olur. p öğesinin max-width değeri 60ch. Bu, hesaplanmış yazı tipi ve boyutta 60 "0" karakter genişliğini aşamaz.

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

Görüntü alanına göre birim değerleri, görüntü alanı boyutu değişmediği sürece aynı kalır. Ancak mobil tarayıcılar, genellikle viewport'un hesaplanmış boyutunu değiştirmeden küçük ekranlarda mümkün olduğunca fazla içerik göstermek için kullanıcı arayüzü öğelerini gösterir veya gizler. Görünür alandaki bu değişiklikleri hesaba katmak için görüntü alanına göre birimlere alternatifler kullanabilirsiniz.

Kapsayıcıya göre birimler

Bir öğenin kapsayıcısının boyutlarını göreli temel olarak kullanabilirsiniz. Bu birimler, kullanılabilir kapsayıcı alanını bölümlere ayırır. Bu işlevler, yazı tipi boyutlarını mevcut alana göre ayarlamak için kapsayıcı sorgularında faydalıdır.

Çeşitli birimler

Belirli değer türleriyle işlem yapmak 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. Dönüşüm işlevleri içindeki öğeleri döndürmek için de faydalı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

Önceki örnekte min-resolution değerinin değeri 192dpi'tır. 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 yayınlamaktır.

Öğrendiklerinizi test etme

Beden bilgisi hakkındaki bilginizi test edin

Kaynaklar

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