CSS Birimleri

Bu konu boyunca uzunluklar piksel ve rem olarak yazıldı, ch birimi tanımsız bırakıldı. Bir uzunluk birkaç ayrı biçimde yazılabilir ve seçim yalnızca bir sayı biçimi değildir: bazı birimler kullanıcı ayarlarını izler, bazıları izlemez.

Bu ders birimleri üç aileye ayırır ve aralarındaki dönüşümleri hesapla gösterir.

Üç Aile

Mutlak birimler — px, cm, mm, in, pt, pc, q. Aralarındaki oranlar sabittir ve tanım gereği 1in = 96px kabul edilir. px bir aygıt pikseline karşılık gelmez; bir başvuru birimidir ve aygıt piksel oranı ne olursa olsun aynı fiziksel büyüklüğe yakın durur.

Yazı tipine göreli birimler — em, rem, ch, ex, cap, lh, rlh. Bunların değeri hesaplandıkları bağlamdaki yazı ölçülerine bağlıdır.

Görüntü alanına göreli birimler — vw, vh, vmin, vmax ve bunların dinamik biçimleri. Görüntü alanının yüzde biri olarak tanımlıdır.

// birim.mjs — em zinciri, rem sabitligi ve yuzde referanslari
console.log("--- em zinciri: her kusakta yeniden carpilir ---");
const zincir = [
  { ad: "html",    fontSize: "16px" },
  { ad: "body",    fontSize: "1em"  },
  { ad: "section", fontSize: "1.25em" },
  { ad: "div",     fontSize: "1.25em" },
  { ad: "p",       fontSize: "1.25em" },
  { ad: "span",    fontSize: "1.25em" },
];
let ustPx = 16;
for (const o of zincir) {
  let px;
  if (o.fontSize.endsWith("px")) px = parseFloat(o.fontSize);
  else px = ustPx * parseFloat(o.fontSize);
  console.log(`${o.ad.padEnd(8)} font-size: ${o.fontSize.padEnd(7)} -> ${px.toFixed(3)}px  (ust ${ustPx.toFixed(3)}px)`);
  ustPx = px;
}

console.log("\n--- ayni zincir rem ile ---");
const KOK = 16;
ustPx = 16;
for (const o of zincir) {
  const px = o.fontSize.endsWith("px") ? parseFloat(o.fontSize) : KOK * parseFloat(o.fontSize);
  console.log(`${o.ad.padEnd(8)} font-size: ${o.fontSize.replace("em","rem").padEnd(8)} -> ${px.toFixed(3)}px`);
}

console.log("\n--- ayni ogede em: font-size dis, padding ic degeri kullanir ---");
const ustFont = 16, kendiFont = 1.5 * ustFont;
console.log(`ust font-size = ${ustFont}px`);
console.log(`font-size: 1.5em -> ${kendiFont}px   (ust deger uzerinden)`);
console.log(`padding:   1.5em -> ${1.5 * kendiFont}px   (kendi font-size'i uzerinden)`);
console.log(`line-height: 1.5em -> ${1.5 * kendiFont}px`);

console.log("\n--- yuzde neye gore cozulur ---");
const KAPSAYAN = { en: 640, boy: 400, fontSize: 16 };
const REF = {
  "width":       ["kapsayan en", KAPSAYAN.en],
  "padding-top": ["kapsayan EN", KAPSAYAN.en],
  "margin-left": ["kapsayan en", KAPSAYAN.en],
  "height":      ["kapsayan boy", KAPSAYAN.boy],
  "font-size":   ["ust font-size", KAPSAYAN.fontSize],
  "line-height": ["kendi font-size", 16],
};
for (const [oz, [aciklama, taban]] of Object.entries(REF)) {
  console.log(`${oz.padEnd(12)} %50 -> ${(taban * 0.5).toFixed(1)}px   (referans: ${aciklama} = ${taban})`);
}

console.log("\n--- mutlak birim donusumleri (1in = 96px) ---");
const PX = { px: 1, in: 96, cm: 96/2.54, mm: 96/25.4, q: 96/101.6, pt: 96/72, pc: 16 };
for (const [b, v] of Object.entries(PX)) console.log(`1${b.padEnd(3)} = ${v.toFixed(4)}px`);

console.log("\n--- ch ve ex (ornek bir yazi tipinde) ---");
const fs = 16, chOran = 0.5, exOran = 0.52;
console.log(`font-size=${fs}px, 1ch=${fs*chOran}px, 1ex=${(fs*exOran).toFixed(2)}px`);
console.log(`max-width: 70ch -> ${70 * fs * chOran}px`);

--- em zinciri: her kusakta yeniden carpilir ---
html     font-size: 16px    -> 16.000px  (ust 16.000px)
body     font-size: 1em     -> 16.000px  (ust 16.000px)
section  font-size: 1.25em  -> 20.000px  (ust 16.000px)
div      font-size: 1.25em  -> 25.000px  (ust 20.000px)
p        font-size: 1.25em  -> 31.250px  (ust 25.000px)
span     font-size: 1.25em  -> 39.063px  (ust 31.250px)

--- ayni zincir rem ile ---
html     font-size: 16px     -> 16.000px
body     font-size: 1rem     -> 16.000px
section  font-size: 1.25rem  -> 20.000px
div      font-size: 1.25rem  -> 20.000px
p        font-size: 1.25rem  -> 20.000px
span     font-size: 1.25rem  -> 20.000px

--- ayni ogede em: font-size dis, padding ic degeri kullanir ---
ust font-size = 16px
font-size: 1.5em -> 24px   (ust deger uzerinden)
padding:   1.5em -> 36px   (kendi font-size'i uzerinden)
line-height: 1.5em -> 36px

--- yuzde neye gore cozulur ---
width        %50 -> 320.0px   (referans: kapsayan en = 640)
padding-top  %50 -> 320.0px   (referans: kapsayan EN = 640)
margin-left  %50 -> 320.0px   (referans: kapsayan en = 640)
height       %50 -> 200.0px   (referans: kapsayan boy = 400)
font-size    %50 -> 8.0px   (referans: ust font-size = 16)
line-height  %50 -> 8.0px   (referans: kendi font-size = 16)

--- mutlak birim donusumleri (1in = 96px) ---
1px  = 1.0000px
1in  = 96.0000px
1cm  = 37.7953px
1mm  = 3.7795px
1q   = 0.9449px
1pt  = 1.3333px
1pc  = 16.0000px

--- ch ve ex (ornek bir yazi tipinde) ---
font-size=16px, 1ch=8px, 1ex=8.32px
max-width: 70ch -> 560px

em Zinciri

İlk iki blok bu dersin merkezindeki farkı gösteriyor. Aynı ağaçta, her kuşakta font-size: 1.25 bildirimi yazıldı. em ile yazıldığında değer her kuşakta bir öncekinin üzerine çarpıldı ve beşinci kuşakta 39 pikseli aştı. rem ile yazıldığında her kuşak kök ögenin boyutunu kullandı ve değer 20 pikselde sabit kaldı.

em — ögenin kendi hesaplanmış font-size değerine bağlıdır. font-size özelliğinde kullanıldığında, ögenin kendi değeri henüz hesaplanmadığı için üst ögenin değeri kullanılır. Zincirleme büyüme buradan doğar.

rem — her zaman kök ögenin font-size değerine bağlıdır. Zincir yoktur.

Üçüncü blok aynı öge içindeki ayrımı gösteriyor. font-size: 1.5em üst ögenin 16 pikseli üzerinden 24 piksel verdi. Aynı ögede padding: 1.5em ise ögenin kendi 24 pikseli üzerinden 36 piksel verdi. İki bildirim aynı sayıyı taşıyor ama farklı tabanlara başvuruyor.

em biriminin bu davranışı bir kusur değil, bileşen ölçeklemesinin aracıdır: bir düğmenin iç boşluğu em ile yazıldığında, düğmenin yazı boyutu değiştiğinde iç boşluk da onunla birlikte ölçeklenir. rem ile yazılsaydı sabit kalırdı.

Yüzdelerin Referansı Özelliğe Göre Değişir

Dördüncü blok, sık yapılan bir varsayımı yıkıyor. Bir yüzde her zaman aynı ölçüye başvurmaz.

width, margin ve — dikkat — dikey iç boşluk da dâhil olmak üzere bütün padding değerleri kapsayan bloğun satır içi ölçüsüne başvurur. padding-top: 50% yazımı kapsayanın yüksekliğinin değil, genişliğinin yarısını verir.

Bu tuhaf görünen kural bir kalıbın temelidir: bir kutuya en–boy oranı vermek. padding-top genişliğe bağlı olduğu için, yüksekliği genişliğe oranlı bir kutu bu yolla kurulabilir. aspect-ratio özelliği aynı işi doğrudan yapar ve bugün tercih edilen yol odur.

height kapsayanın yüksekliğine, font-size üst ögenin yazı boyutuna, line-height ögenin kendi yazı boyutuna başvurur.

Piksel Yazmanın Bedeli

Beşinci blok mutlak birimlerin sabit oranlarını veriyor. Bu oranlar hesaplanabilir ama kararın asıl boyutu başka yerdedir.

Kullanıcı, tarayıcısında varsayılan yazı boyutunu değiştirebilir. Bu ayar kök ögenin font-size değerini etkiler. Sonuç şudur:

• rem ve em ile yazılan ölçüler bu ayarla birlikte büyür.
• px ile yazılan ölçüler değişmez.

Yazı boyutu piksel olarak yazılmış bir sayfa, kullanıcının okuma ayarını görmezden gelir. Yakınlaştırma yine işler, ama yakınlaştırma bütün sayfayı büyütür — kullanıcının istediği, genellikle yalnızca metnin büyümesidir.

Uygulanabilir kural: yazı boyutu, aralık ve kutu ölçüleri rem ya da em ile yazılır. px yalnızca gerçekten sabit kalması gereken ölçüler için kullanılır: ince kenarlıklar, bir piksellik ayırıcılar, gölge ofsetleri.

Kök ögenin font-size değerine sabit bir piksel yazmak aynı sorunu geri getirir; bu değer ya hiç yazılmaz ya da yüzdeyle yazılır.

Yazı Tipine Bağlı Diğer Birimler

Son blok ch birimini tanımlıyor: bir yazı tipinde “0” karakterinin genişliği. Kutu boyutlandırma dersinde yazılan max-width: 70ch bildirimi burada karşılığını buluyor — örnekteki oranla 560 piksel.

ex küçük harf yüksekliğine, cap büyük harf yüksekliğine, lh ögenin satır yüksekliğine karşılık gelir. Bunların değeri seçilen yazı tipine bağlıdır; örnekteki 0,5 ve 0,52 oranları örnek değerlerdir.

lh birimi aralık ölçeği kurmakta kullanışlıdır: margin-block-end: 1lh yazmak, boşluğun tam bir satır yüksekliği kadar olmasını sağlar ve metnin taban çizgisi düzeni korunur.

Görüntü Alanı Birimleri

1vw görüntü alanı genişliğinin yüzde biri, 1vh yüksekliğinin yüzde biridir. vmin ve vmax ikisinden küçüğünü ve büyüğünü kullanır.

Yükseklik birimlerinde bir ayrım vardır. Bazı ortamlarda tarayıcı arayüzü kaydırmayla gizlenip görünür ve görüntü alanının yüksekliği değişir. Bunun için üç aile tanımlıdır: svh en küçük, lvh en büyük, dvh ise o anki yüksekliği kullanır. 100vh yazmak arayüz görünürken taşan bir kutu üretebilir; 100svh bu durumu önler.

Yazı boyutunu doğrudan vw ile yazmak sakıncalıdır: kullanıcı yakınlaştırma yaptığında görüntü alanı genişliği yakınlaştırmayla ölçüldüğü için metin büyümez. Ölçeklenen tipografi için görüntü alanı birimi tek başına değil, bir alt sınırla birlikte kullanılır — bunun aracı bir sonraki derste ele alınacak.

/* istasyon.css — 24. adım: birim seçimi */
:root { font-size: 100%; }          /* kullanıcı ayarını koru */

main { max-width: 70ch; padding-inline: 1rem; }

h1 { font-size: 2.4414rem; margin-block-end: 0.5em; }

.durum-rozeti { padding-block: 0.25em; padding-inline: 0.75em; }

.olcum-cizelgesi th,
.olcum-cizelgesi td {
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border-block-end: 1px solid var(--cizgi);
}

.kart { box-shadow: 0 1px 2px rgb(28 39 51 / 0.06); }

Rozetin iç boşluğu em ile yazıldı: rozet küçük bir yazı boyutunda kullanıldığında iç boşluk da küçülür. Hücre iç boşluğu rem ile yazıldı: çizelgenin ritmi hücre içeriğinin boyutundan bağımsız kalmalıdır.

Başlığın alt boşluğu em ile yazıldı ve başlığın kendi boyutuna bağlandı; büyük başlıklar büyük boşluk alır.

Kenarlık ve gölge ofseti px olarak kaldı: bunlar ölçeklendiğinde bulanıklaşan, sabit kalması istenen ölçülerdir.

Özet

• em, ögenin kendi hesaplanmış yazı boyutuna bağlıdır; font-size özelliğinde kullanıldığında üst ögenin değerine başvurur ve her kuşakta yeniden çarpılarak zincirleme büyür.
• rem her zaman kök ögenin yazı boyutuna bağlıdır; zincir yoktur ve değer ağacın derinliğinden etkilenmez.
• Bir yüzdenin referansı özelliğe göre değişir: width ve bütün padding değerleri kapsayanın satır içi ölçüsüne, height kapsayanın blok ölçüsüne, line-height ögenin kendi yazı boyutuna başvurur.
• px ile yazılan ölçüler kullanıcının yazı boyutu ayarıyla büyümez; yazı, aralık ve kutu ölçüleri rem ya da em ile yazılır, px sabit kalması gereken ince ayrıntılara ayrılır.
• Görüntü alanı yükseklik birimlerinin üç ailesi vardır; svh en küçük, lvh en büyük, dvh o anki yüksekliği kullanır.

Sonraki Adım

Birimler tanımlandı ama hâlâ tek tek sabit değerler yazılıyor. Bir ölçünün iki değer arasında kalması, iki ölçüden küçüğünün seçilmesi ya da bir değerin başka bir değerden çıkarılması gerekebilir. Sonraki ders — kursun son dersi — bu hesapları yapan fonksiyonları tanımlar ve kursun kurduğu biçem dosyasını toparlar.