CSS'de % (Yüzde) Birimi

Entry posted by Doğuhan ELMA in Units Kasım 17

39 views

https://www.herseyibul.com/entry/16-cssde-y%C3%BCzde-birimi/

Yüzde birimi CSS'in en eski ve en esnek birimlerinden biri. CSS’in ilk günlerinden beri vardır. Ancak neye göre yüzde olduğu her property'de farklı! Detaylı açıklayayım.

Responsive tasarım için idealdir.
Parent boyutuna göre otomatik uyum sağlar.
Tarayıcı yeniden boyutlandığında değerler otomatik güncellenir → reflow tetiklenir.

1. % Birimi Temel Mantığı

% her zaman bir referans değere göre hesaplanır.

.child {
  width: 50%; /* Neyin %50'si? */
}

Cevap: Parent container'ın ilgili özelliğinin %50'si

Ama dikkat: Her CSS property'de farklı referans noktası var!

2. Width ve Height için %

Width - En Basit Kullanım

.parent {
  width: 1000px;
}

.child {
  width: 50%; /* 1000px × 0.5 = 500px */
}

Referans: Parent'ın width değeri

Height - Karmaşık Durum

/* ❌ ÇALIŞMAZ - Parent'ın height'ı auto */
.parent {
  /* height tanımlanmamış, içeriğe göre auto */
}

.child {
  height: 50%; /* Neyin %50'si? Parent auto ise hesaplanamaz! */
}

/* ✅ ÇALIŞIR - Parent'ın explicit height'ı var */
.parent {
  height: 600px;
}

.child {
  height: 50%; /* 600px × 0.5 = 300px */
}

Önemli Kural: height: % çalışması için parent'ın kesin bir height'ı olmalı!. Çünkü height özelliği kalıtsal değildir.

Modern Çözüm: Viewport Units

/* Eski yöntem - sorunlu */
html, body {
  height: 100%; /* Chain oluştur */
}

.container {
  height: 100%;
}

/* Modern yöntem - çok daha iyi */
.container {
  height: 100vh; /* Viewport height'ının %100'ü */
  min-height: 100dvh; /* Dynamic viewport - mobil için */
}

3. Margin ve Padding için %

Sürpriz: Her Zaman Width'e Göre Hesaplanır!

.box {
  width: 400px;
  height: 600px;
}

.child {
  margin-top: 10%;    /* 400px × 0.1 = 40px (width'e göre!) */
  margin-left: 10%;   /* 400px × 0.1 = 40px */
  padding-top: 10%;   /* 400px × 0.1 = 40px (height değil!) */
  padding-bottom: 10%; /* 400px × 0.1 = 40px */
}

Kritik: margin-top, margin-bottom, padding-top, padding-bottom bile parent'ın width'ine göre hesaplanır!

Neden? Aspect Ratio Trickler İçin

/* Eski aspect ratio trick (modern aspect-ratio property'den önce) */
.video-wrapper {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio = 9/16 = 0.5625 */
  position: relative;
  background: black;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Mantık: Padding-bottom width'e göre olduğu için, genişlik değiştikçe yükseklik de orantılı değişir.

Modern Alternatif: aspect-ratio

/* Modern yöntem - çok daha temiz */
.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: black;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

4. Font-Size için %

Referans: Parent'ın font-size'ı

body {
  font-size: 16px;
}

.parent {
  font-size: 150%; /* 16px × 1.5 = 24px */
}

.child {
  font-size: 50%; /* 24px × 0.5 = 12px */
}

Root için % - Kullanıcı Tercihlerine Saygı

/* ✅ EN İYİ PRATİK */
html {
  font-size: 100%; /* Tarayıcı varsayılanı (genelde 16px) */
  /* Kullanıcı ayarlarını değiştirmişse ona uyar */
}

body {
  font-size: 1rem; /* Root'un font-size'ı */
}

Neden 100%?

Kullanıcı tarayıcısında "Large fonts" seçmişse → 100% = 20px olur. Chrome tarayıcısnda Ayarlar > Görünüm
Kullanıcı "Small fonts" seçmişse → 100% = 14px olur
Erişilebilirlik için kritik!

% vs REM vs EM

/* % - Parent'a göre */
.parent { font-size: 16px; }
.child { font-size: 150%; } /* 24px */

/* EM - Parent'a göre (aynı) */
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* 24px */

/* REM - Root'a göre */
html { font-size: 16px; }
.anywhere { font-size: 1.5rem; } /* Her zaman 24px */

Modern Tercih: REM (compound effect yok, öngörülebilir)

5. Position için % (Top, Right, Bottom, Left)

Referans: Parent'ın İlgili Boyutu

.parent {
  width: 400px;
  height: 600px;
  position: relative;
}

.child {
  position: absolute;
  top: 50%;    /* Parent height'ının %50'si = 300px */
  left: 25%;   /* Parent width'ının %25'i = 100px */
  width: 50%;  /* Parent width'ının %50'si = 200px */
  height: 30%; /* Parent height'ının %30'u = 180px */
}

Merkezleme Trick (Transform ile)

/* Klasik absolute merkezleme */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 
    top/left: Parent'a göre %50
    transform: Kendi boyutuna göre %-50
  */
}

Dikkat: transform: translate() içindeki % elementin kendi boyutuna göre!

.box {
  width: 200px;
  height: 100px;
  transform: translateX(50%); /* 200px × 0.5 = 100px sağa */
  transform: translateY(-50%); /* 100px × 0.5 = 50px yukarı */
}

6. Background-Position için %

Sürpriz Davranış!

.box {
  width: 400px;
  height: 300px;
  background-image: url('image.jpg'); /* 800×600px */
  background-size: contain;
  background-position: 50% 50%;
}

% Hesaplaması:

X pozisyonu = (container width - image width) × %

Y pozisyonu = (container height - image height) × %

/* Örnekler */
background-position: 0% 0%;     /* Sol üst */
background-position: 100% 100%; /* Sağ alt */
background-position: 50% 50%;   /* Tam orta */

/* 0% ve 100% özel durumlar */
background-position: 0% 0%;     /* Resmin sol üstü, container'ın sol üstünde */
background-position: 100% 100%; /* Resmin sağ altı, container'ın sağ altında */

Background-Size için %

.box {
  width: 400px;
  height: 300px;
  background-size: 50% 50%; 
  /* Genişlik: 400px × 0.5 = 200px
     Yükseklik: 300px × 0.5 = 150px */
}

/* Tek değer - orantılı */
background-size: 50%; /* Genişlik %50, yükseklik auto (orantılı) */

/* Modern alternatif */
background-size: cover;  /* Tüm alanı kapla */
background-size: contain; /* İçine sığdır */

7. Modern Web Tasarımda % Kullanım Alanları

1. Fluid Layouts (Akışkan Düzenler)

/* ✅ Responsive Container */
.container {
  width: 90%;  /* Ekranın %90'ı */
  max-width: 1200px; /* Ama maximum 1200px */
  margin: 0 auto; /* Ortala */
}

/* ✅ Fluid Grid */
.grid {
  display: grid;
  grid-template-columns: 30% 70%; /* Sol sidebar, sağ content */
  gap: 2%;
}

/* ❌ Artık bunu yapma - modern alternatif var */
.old-grid {
  float: left;
  width: 25%;
  margin-right: 5%;
}

Modern Alternatif - Flexbox/Grid:

/* Flexbox ile daha iyi */
.flex-container {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 300px; /* Sabit genişlik */
}

.content {
  flex: 1; /* Kalan alanı al */
}

/* Grid ile en iyi */
.grid-container {
  display: grid;
  grid-template-columns: 300px 1fr; /* Sabit + esnek */
  gap: 2rem;
}

2. Responsive Images

/* ✅ Temel responsive image */
img {
  max-width: 100%; /* Parent'tan taşma */
  height: auto;    /* Oranı koru */
}

/* ✅ Fluid image container */
.image-wrapper {
  width: 100%;
  max-width: 600px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
}

3. Aspect Ratio Boxes (Eski Yöntem)

/* ❌ Eski yöntem - padding trick */
.aspect-box {
  width: 100%;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  position: relative;
  background: #f0f0f0;
}

.aspect-box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ✅ Modern yöntem - aspect-ratio property */
.aspect-box-modern {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f0f0f0;
}

4. Typography - Line Height

/* ✅ Line-height için % kullanımı */
p {
  font-size: 1rem; /* 16px */
  line-height: 150%; /* 16px × 1.5 = 24px */
}

/* ❌ Ama unitless daha iyi! */
p {
  font-size: 1rem;
  line-height: 1.5; /* Daha esnek, compound effect yok */
}

Fark:

/* % ile */
.parent {
  font-size: 16px;
  line-height: 150%; /* 24px hesaplanır ve sabitleşir */
}

.child {
  font-size: 20px;
  /* line-height hala 24px - küçük kalır! */
}

/* Unitless ile */
.parent {
  font-size: 16px;
  line-height: 1.5; /* Oran olarak kalır */
}

.child {
  font-size: 20px;
  line-height: 1.5; /* 20px × 1.5 = 30px - orantılı! */
}

5. Opacity ve Colors

/* % modern CSS'te bazı yerlerde kullanılıyor */
.element {
  opacity: 50%; /* 0.5 ile aynı */
  background: rgb(255 0 0 / 50%); /* Alpha %50 */
}

/* Ama geleneksel 0-1 arası daha yaygın */
.element {
  opacity: 0.5;
  background: rgba(255, 0, 0, 0.5);
}

8. % vs Diğer Birimler - Ne Zaman Hangisi?

Width/Height İçin

/* % - Parent'a göre responsive */
.sidebar {
  width: 25%; /* Parent değişince değişir */
}

/* vw/vh - Viewport'a göre */
.hero {
  height: 100vh; /* Her zaman viewport height'ı */
}

/* px - Sabit boyut */
.icon {
  width: 24px; /* Her zaman aynı */
}

/* fr (Grid için) - Kalan alanı böl */
.grid {
  grid-template-columns: 200px 1fr 2fr;
  /* 200px sabit, kalan alan 1:2 oranında bölünür */
}

Font-Size İçin

/* % - Parent'a göre (eski) */
html { font-size: 100%; }
h1 { font-size: 200%; }

/* REM - Root'a göre (modern tercih) */
html { font-size: 100%; }
h1 { font-size: 2rem; }

/* EM - Parent'a göre (spacing için iyi) */
.button {
  font-size: 1rem;
  padding: 0.5em 1em; /* Font-size değişince padding da değişir */
}

/* clamp() - Fluid (en modern) */
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

Spacing İçin

/* REM - Consistent spacing */
.section {
  padding: 2rem; /* Root font-size'a göre */
}

/* EM - Component-based spacing */
.button {
  padding: 0.5em 1em; /* Butonun font-size'ına göre */
}

/* % - Container'a göre (nadiren) */
.centered {
  margin: 0 10%; /* Sol/sağ %10 margin */
}

/* vh/vw - Viewport'a göre */
.hero {
  padding: 10vh 5vw; /* Viewport boyutuna göre */
}

9. Modern Web'de % Best Practices

✅ KULLAN

/* 1. Root font-size için */
html {
  font-size: 100%; /* Kullanıcı tercihlerine saygı */
}

/* 2. Fluid container genişlikleri */
.container {
  width: 90%;
  max-width: 1400px;
}

/* 3. Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* 4. Grid column'ları (basit durumlar) */
.two-column {
  display: grid;
  grid-template-columns: 60% 40%;
}

/* 5. Transform translate */
.centered {
  transform: translate(-50%, -50%);
}

⚠️ DİKKATLİ KULLAN

/* 1. Height için (parent'ın height'ı kesin olmalı) */
.child {
  height: 80%; /* Parent'ın height'ı explicit mi? */
}

/* 2. Padding/margin için (width'e göre hesaplandığını unutma) */
.box {
  padding-top: 10%; /* Height değil, width'e göre! */
}

/* 3. Font-size için (REM daha iyi) */
.text {
  font-size: 125%; /* REM daha öngörülebilir */
}

❌ KULLANMA

/* 1. Complex layouts (Flexbox/Grid daha iyi) */
.old-layout {
  float: left;
  width: 33.33%;
  margin-right: 2%;
}
/* Bunun yerine Grid kullan */

/* 2. Aspect ratios (modern property var) */
.old-ratio {
  padding-bottom: 56.25%;
}
/* Bunun yerine aspect-ratio kullan */

/* 3. Type scale (REM + clamp daha iyi) */
h1 { font-size: 250%; }
/* Bunun yerine fluid typography */

10. Gerçek Dünya Örnekleri

Örnek 1: Modern Card Component

/* ❌ Eski yöntem - % her yerde */
.card {
  width: 30%;
  margin: 1.5%;
  padding: 3%;
  float: left;
}

/* ✅ Modern yöntem - doğru birimleri kullan */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  padding: 1.5rem;
  /* % yerine rem/em - daha tutarlı */
}

Örnek 2: Responsive Hero Section

/* ✅ Modern yaklaşım - birimi amacına göre kullan */
.hero {
  /* Viewport units - tam ekran */
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport - mobil için */
  
  /* % - responsive spacing */
  padding: 5vh 5%;
  
  /* max-width ile sınırla */
  max-width: 1400px;
  margin: 0 auto;
}

.hero-title {
  /* Fluid typography - % değil */
  font-size: clamp(2rem, 5vw + 1rem, 5rem);
  
  /* Unitless line-height */
  line-height: 1.2;
  
  /* EM - font-size'a göre margin */
  margin-bottom: 0.5em;
}

.hero-content {
  /* % - parent'a göre width */
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

Örnek 3: Responsive Image Gallery

/* ✅ Modern grid + % kombinasyonu */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

.gallery-item {
  /* aspect-ratio modern, padding-bottom trick değil */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery-item img {
  /* % - responsive image */
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Hover effect - transform scale */
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1); /* %110 boyut */
}

Modern Web'de % Felsefesi:

Root font-size: 100% kullan (erişilebilirlik)
Container width: % + max-width kombinasyonu
Images: max-width: 100% responsive için
Layouts: Flexbox/Grid tercih et (% yerine)
Spacing: REM/EM kullan (% yerine)
Typography: REM + clamp() (% yerine)

% hala güçlü bir araç, ama artık "her şey için %" dönemi bitti. Her birimi amacına göre kullanmak modern yaklaşım!

Hata : Height Yüzdesi Çalışmıyor

/* ÇALIŞMAZ */
html, body {
  /* height: auto (default) *//* içerik kadar yükseklik */
}

.full-height {
  height: 100%; /* Çalışmaz */
}

/* ÇALIŞIR */
html, body {
  height: 100%; /* Burda parent(viewport) yükseklik(vh) devreye girer.*/
}

.full-height {
  height: 100%; /* Şimdi çalışır. chain oluşacağı için tercih edilmez.  */
}

html elementinin parent’ı yoktur, ama rendering açısından tarayıcı onu viewport ile ilişkilendirir.
Bu yüzden html { height: 100%; } → viewport yüksekliği(vh) kadar olur.
Ardından body { height: 100%; } → html elementinin yüksekliği kadar olur → yani yine viewport yüksekliği.

Eğer html’in height değeri tanımlı değilse, body { height: 100%; } işe yaramaz çünkü % birimi parent’a bağlıdır.

Not: height olarak vh birimini kullanmak netlik sağlar ve belirsizliği giderir.

width: 100%: % parent elementin iç genişliği → scrollbar hariçtir.

Sign In

CSS