CSS Birimleri: px, em, rem, %, vw, vh ve svh, lvh, dvh

Sayısal veri tipleri: number, integer, dimension, percentage

Her CSS bildiriminin değeri, özelliğe göre bir sayı, anahtar kelime, fonksiyon ya da bunların birleşiminden oluşur. MDN sayısal tipleri dört grupta toplar:

<integer> değerleri z-index, column-count ve grid-row gibi özelliklerde kullanılır. Dikkat: 12.0 bir tam sayıyı temsil etse de <integer> değil <number> sayılır; 3e4 gibi bilimsel gösterim de tam sayı için geçerli değildir. <number> tipinde ise 12. geçersizdir, çünkü ondalık noktadan sonra en az bir rakam gelmelidir; .60 gibi baştaki sıfırı atlanmış yazım geçerlidir.

<dimension>, birimi olan sayıların genel adıdır ve uzunluklar dışında açı (deg, turn), zaman (s, ms), frekans (Hz), çözünürlük (dpi, dppx) ve grid'e özgü fr birimini de kapsar. Kural her biri için aynıdır: sayı ile birim arasında hiçbir boşluk olamaz. 1 cm geçersiz, 1cm geçerlidir. Birim adları büyük küçük harfe duyarlı değildir.

<length>: uzunluğun kuralları

<length> tipi bir mesafeyi temsil eder ve width, height, margin, padding, border-width, font-size gibi pek çok özellikte kullanılır. MDN'in tanımladığı temel kurallar şunlardır:

• Bir uzunluk, bir <number> ve hemen ardından gelen bir birimden oluşur.
• Değer 0 ise birim yazmak isteğe bağlıdır: margin: 0 geçerlidir. Sıfır dışındaki her değerde birim zorunludur.
• Bazı özellikler negatif uzunluk kabul eder (örneğin margin), bazıları kabul etmez.
• Yüzde değerleri bazı özelliklerde uzunlukla aynı yerde kullanılabilse de kendileri bir <length> değildir. İkisini birlikte kabul eden özelliklerin sözdiziminde <length-percentage> yazar.

.kutu {
  margin: 0;            /* geçerli: sıfırda birim gerekmez */
  padding: 16px;        /* geçerli */
  width: 300;           /* geçersiz: birim yok, bildirim yok sayılır */
  border-width: 2 px;   /* geçersiz: sayı ile birim arasında boşluk */
}

Mutlak birimler: px, cm, in, pt

Mutlak uzunluk birimleri birbirlerine sabit oranlarla bağlıdır. MDN'e göre ekran gibi düşük çözünürlüklü aygıtlarda px fiziksel "referans piksel" olarak alınır ve diğer birimler ona göre tanımlanır; bu yüzden ekrandaki 1cm gerçek bir santimetreyle birebir aynı olmayabilir. Yazıcı gibi yüksek çözünürlüklü aygıtlarda ise in, cm ve mm fiziksel karşılıklarına eşittir ve px onlara göre tanımlanır.

Bu oranlarla basit dönüşümler yapabilirsiniz. 1in hem 96px hem 72pt olduğuna göre 1pt = 96 / 72 = 1.333...px'tir; buradan 12pt = 12 × 96 / 72 = 16px bulunur. 1cm ise 96 / 2.54 ≈ 37.8px eder. Bu birimlerin çoğu, çıktı boyutunun sabit olduğu baskı stillerinde anlamlıdır.

Kenarlıkların piksele yuvarlanması

border-width, outline-width ve outline-offset gibi bazı özelliklerde hesaplanan uzunluk, görüntünün düzgün olması için tam sayıda aygıt pikseline yuvarlanır. 1 aygıt pikselinden küçük ama sıfır olmayan değer yukarı, 1'den büyük değer aşağı yuvarlanır. MDN'in örneği: devicePixelRatio değeri 3 olan bir ekranda border-width: 1.5px değeri 1.5 × 3 = 4.5 aygıt pikseline karşılık gelir, aşağı yuvarlanarak 4 aygıt pikseli olur ve bu da 4 / 3 ≈ 1.33px eder.

Yazı tipine göre birimler: em, rem ve diğerleri

Yazı tipine göreceli birimler, değeri etkin yazı tipinin bir boyutuna göre tanımlar. MDN, özellikle em ve rem birimlerinin, kullanıcı yazı tipi boyutunu değiştirdiğinde bile sayfanın dikey ritmini koruyan ölçeklenebilir düzenler için sıkça kullanıldığını belirtir.

em: öğenin kendi yazı tipi boyutu

em, kullanıldığı öğenin hesaplanan font-size değerini temsil eder. Bir istisnası vardır: font-size özelliğinin kendisinde kullanıldığında öğenin kalıtılan yazı tipi boyutunu, yani ebeveynin boyutunu temsil eder. Bu sayede aynı birim, bir bileşenin iç boşluklarını kendi metin boyutuyla orantılı tutmak için kullanılabilir.

:root {
  font-size: 16px;
}
.dugme {
  font-size: 1.25rem;   /* 1.25 × 16 = 20px */
  padding: 0.5em 1em;   /* em burada öğenin kendi boyutu: 10px 20px */
}

Hesabı adım adım yapalım. Kök boyut 16px olduğu için düğmenin yazı tipi 1.25 × 16 = 20px olur. padding bir font-size bildirimi olmadığından buradaki em düğmenin kendi yazı tipi boyutunu, yani 20px'i ifade eder: dikey boşluk 0.5 × 20 = 10px, yatay boşluk 1 × 20 = 20px. Düğmenin metnini büyüttüğünüzde iç boşluklar da aynı oranda büyür.

MDN, istediğiniz piksel değerine karşılık gelen em değerini bulmak için basit bir formül verir: istenen piksel değerini ebeveynin piksel cinsinden yazı tipi boyutuna bölün. Ebeveyn 16px ise 12px için 12 / 16 = 0.75em, 10px için 10 / 16 = 0.625em, 22px için 22 / 16 = 1.375em yazarsınız.

em değerlerinin birikmesi (compounding)

em ile yazılmış yazı tipi boyutları iç içe öğelerde birikir. MDN'in örneğinde hem dış hem iç span öğesine font-size: 1.6em verilir ve tarayıcının varsayılan boyutu 16px kabul edilir:

span {
  font-size: 1.6em;
}
/* <span>dış <span>iç</span></span>
   dış: 1.6 × 16    = 25.6px
   iç:  1.6 × 25.6  = 40.96px */

İçteki span öğesinin boyutu ebeveyninin boyutuna, ebeveyninki de kendi ebeveyninin boyutuna göre hesaplandığı için çarpanlar üst üste biner. Derin iç içe yapılarda (örneğin iç içe listelerde) bu durum metnin beklenmedik biçimde büyümesine ya da küçülmesine yol açar.

rem: birikmeyen göreceli birim

rem birimi tam olarak bu birikme sorununu önlemek için geliştirildi. Değer ebeveyne değil kök öğeye göre hesaplanır. Aynı örnekte birimi rem yaparsanız iki span da 1.6 × 16 = 25.6px boyutunda olur. Kök öğenin kendi font-size değerinde rem kullanılırsa özelliğin başlangıç değerini temsil eder. MDN, yaygın bir tarayıcı varsayılanının 16px olduğunu, ama kullanıcı tercihlerinin bunu değiştirebileceğini belirtir; bu yüzden rem ile yazılmış bir düzen kullanıcının seçtiği boyuta uyum sağlar.

Kalıtılan şey hesaplanmış değerdir

MDN önemli bir ayrıntıyı vurgular: çocuk öğeler ebeveynin yazdığı göreceli ifadeyi değil, hesaplanmış değerini kalıtır. Bunun en bilinen sonucu line-height özelliğinde görülür. line-height için birimsiz bir <number> verdiğinizde hesaplanan değer o sayının kendisi olarak kalır ve her öğe onu kendi yazı tipi boyutuyla çarpar. em verdiğinizde ise ebeveynde piksele çevrilmiş değer çocuklara aynen geçer.

.kutu {
  font-size: 16px;
  line-height: 1.2em;   /* hesaplanan: 1.2 × 16 = 19.2px */
}
.kutu h1 {
  font-size: 32px;      /* line-height 19.2px olarak kalıtılır:
                           satırlar üst üste binebilir */
}

.kutu-iyi {
  font-size: 16px;
  line-height: 1.2;     /* birimsiz: her öğe kendi boyutuyla çarpar */
}
.kutu-iyi h1 {
  font-size: 32px;      /* line-height: 1.2 × 32 = 38.4px */
}

MDN, çoğu durumda line-height değerini birimsiz sayı olarak vermeyi tercih edilen yol olarak gösterir ve em ile yüzde değerlerinin kalıtım nedeniyle beklenmedik sonuçlar doğurabileceğini not eder.

Viewport birimleri: vw, vh ve mobil varyantları

Viewport birimleri, uzunluğu ilk kapsayıcı bloğun (initial containing block) boyutunun yüzdesi olarak tanımlar; bu blok da viewport'un ya da sayfa alanının boyutuna dayanır. 1vw viewport genişliğinin, 1vh yüksekliğinin yüzde biridir. MDN'in örnekleriyle: viewport yüksekliği 300px ise 70vh değeri 0.70 × 300 = 210px, genişlik 800px ise 50vw değeri 0.50 × 800 = 400px olur.

Küçük, büyük ve dinamik viewport: svh, lvh, dvh

Mobil tarayıcılarda adres çubuğu gibi arayüz parçaları sayfa kaydırıldıkça gizlenip yeniden görünebilir. Bu yüzden "viewport yüksekliği" tek bir sayı değildir. CSS bu durum için dört viewport boyutu tanımlar ve her biri için ayrı bir önek kullanır:

• Küçük viewport (sv*): Tarayıcı arayüzü tamamen görünürken kalan alana göre hesaplanır. Öğe, arayüz açıkken içeriği örtülmeden ekranı doldurur; arayüz gizlendiğinde etrafında boşluk kalabilir. MDN bu birimleri genel olarak daha "güvenli" seçenek olarak tanımlar. Değerleri sabittir.
• Büyük viewport (lv*): Arayüz gizliyken oluşan en büyük alana göre hesaplanır. Arayüz yeniden göründüğünde içeriğin bir kısmı örtülebilir. Değerleri sabittir.
• Dinamik viewport (dv*): Arayüz açıldıkça ve kapandıkça yeniden hesaplanır, içerik her an görünür alana tam oturur. MDN, bunun kaydırma sırasında içeriğin yeniden boyutlanmasına, arayüz kalitesinin düşmesine ve performans kaybına yol açabileceği uyarısını yapar.
• Varsayılan viewport (vh, vw vb.): Tarayıcı tarafından tanımlanır. MDN, şu anda tüm varsayılan viewport birimlerinin büyük viewport karşılıklarına eşdeğer olduğunu, yani vh değerinin lvh gibi davrandığını belirtir.

.kahraman {
  min-height: 100vh;    /* yedek: svh tanınmazsa bu kalır */
  min-height: 100svh;   /* arayüz açıkken de tamamı görünür */
}

Bu örnekte iki bildirim yan yana yazılmıştır. svh birimini tanıyan tarayıcı ikinci bildirimi uygular; tanımayan tarayıcı onu geçersiz sayıp atar ve 100vh ile devam eder. Bu yedek tekniğinin nasıl çalıştığı CSS sözdizimi yazısının hata davranışı bölümünde anlatılıyor. Yeni viewport birimleri için tarayıcı desteğini MDN sayfasındaki uyumluluk tablosundan kontrol edin.

<percentage>: neyin yüzdesi?

Yüzde değerleri her zaman başka bir niceliğe göreceli çalışır ve bu nicelik özellikten özelliğe değişir. Yüzde kabul eden her özellik, yüzdenin neye göre hesaplanacağını kendisi tanımlar: aynı öğenin başka bir özelliği, bir atanın özelliği ya da kapsayıcı bloğun bir ölçüsü olabilir. Örneğin bir kutunun width değerini yüzdeyle verdiğinizde bu, ebeveynin hesaplanmış genişliğine göre hesaplanır; font-size için yüzde ise ebeveynin yazı tipi boyutuna göredir.

.ebeveyn {
  width: 600px;
  font-size: 18px;
}
.cocuk {
  width: 50%;        /* 0.50 × 600 = 300px */
  font-size: 200%;   /* 2.00 × 18  = 36px  */
}

Yüzdelerde de kalıtım kuralı geçerlidir: yalnızca hesaplanmış değerler kalıtılır. Ebeveynde yüzde kullanılsa bile çocuk, yüzdeyi değil, ondan hesaplanmış gerçek değeri (örneğin piksel cinsinden uzunluğu) alır.

Hangi birimi ne zaman kullanmalı?

Bu tablo kesin kurallar değil, belgelerdeki açıklamalardan çıkan pratik yönelimlerdir. Farklı birimleri birlikte kullanmanız gerektiğinde, örneğin "viewport'un yarısı eksi 2rem" gibi bir değer için, calc() fonksiyonunu kullanabilirsiniz.

Sık yapılan hatalar

• Sayı ile birim arasında boşluk: 10 px geçersizdir ve bildirim sessizce yok sayılır.
• Sıfır dışındaki değerde birimi unutmak: width: 300 geçersizdir; birimsiz sayıyı yalnızca line-height gibi <number> kabul eden özellikler alır.
• İç içe öğelerde em ile font-size vermek: Değerler birikir; sayfa genelindeki boyutlar için rem daha öngörülebilirdir.
• line-height için em kullanmak: Hesaplanmış piksel değeri çocuklara geçer ve büyük başlıklarda satırlar üst üste binebilir.
• Mobilde 100vh ile içeriğin örtülmesi: vh büyük viewport gibi davrandığı için arayüz açıkken içerik altta kalabilir; svh ya da dvh düşünün.
• font-size için px kullanmak: Kullanıcının tarayıcıdaki yazı tipi büyütme ayarı yok sayılabilir.

Sık Sorulan Sorular

1rem kaç pikseldir?

Kök öğenin yazı tipi boyutu kadardır. MDN'e göre yaygın tarayıcı varsayılanı 16px'tir, ama kullanıcı tercihleri bunu değiştirebilir; bu yüzden 1rem değerini sabit bir piksel sayısı olarak düşünmeyin.

px birimi ekrandaki bir fiziksel piksel midir?

Her zaman değil. CSS pikseli 1in / 96 olarak tanımlıdır. Yüksek çözünürlüklü ekranlarda ve yazıcılarda bir CSS pikseli birden fazla aygıt pikseline karşılık gelir.

vh ile dvh arasındaki fark nedir?

vh şu anda büyük viewport'a (lvh) eşdeğerdir ve tarayıcı arayüzü göründüğünde içeriğin bir kısmı örtülebilir. dvh ise arayüz açıldıkça ve kapandıkça yeniden hesaplanır.

Yüzde bir uzunluk mudur?

Hayır. <percentage> ayrı bir tiptir; bazı özellikler ikisini de kabul eder ve bu durum sözdiziminde <length-percentage> olarak gösterilir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · calc() ve clamp() · Yazı tipi özellikleri · Container queries · Mobil uyumluluk