Metin okunabilirliği, kullanıcıların metni ne kadar kolay okuyabildiği ve anladığıyla ilgilidir. Bu, tipografi, spacing, kontrast ve layout kararlarının birleşimidir.
1. Temel Okunabilirlik Faktörleri
a) Satır Uzunluğu (Line Length / Measure)
Optimal: 45-75 karakter (İngilizce için), 50-80 karakter (Türkçe için)
/* Kötü - çok geniş satırlar */
.article {
max-width: 100%;
/* 120+ karakter - gözler satır sonunu bulamaz */
}
/* İyi - optimal satır uzunluğu */
.article {
max
CSS'teki line-height (satır yüksekliği) özelliğinin değeri, modern web tasarımında metin okunabilirliğini ve dikey ritmi sağlamak için kritik öneme sahiptir. CSS'in en kritik tipografi özelliklerinden biridir. Duyarlı (responsive) tasarımlarda okunabilirliği artırmak temel hedeftir.
line-height temel olarak, bir metin satırının yukarısındaki ve aşağısındaki görünmez boşluğu (leading) belirler. Bu boşluk, satırın kendisinin yüksekliğini oluşturur ve metin boyutuyla (font-size) ilişkilidir.
CSS'te bazı özellikler birim gerektirmeyen saf sayı değerleri kabul eder. Bu "unitless numbers" kavramı, CSS'in temel mekaniklerinden biridir.
Özellik
Unitless kabul eder mi?
Örnek
Açıklama
line-height
✔
line-height: 1.4;
Font yüksekliği ile çarpılan oran.
z-index
✔
z-index: 10;
Katman sırası.
opacity
✔
calc() fonksiyonu, CSS'te matematiksel hesaplamalar yapmamızı sağlayar. calc() CSS fonksiyonu, modern web tasarımında en çok duyarlı (responsive), esnek (flexible) ve hassas (precise) düzenler oluşturmak amacıyla kullanılır.
Sabit birimler (px, pt, cm gibi) → viewport değişse bile değişmez. Örneğin calc(100px + 50px) her zaman 150px olur.
Göreceli birimler (%, vw, vh, em, rem gibi) → viewport veya parent(mesela javascript ile) element boyutu değiştiğinde yeniden hesapl
Modern CSS'in en güçlü araçlarından ikisi olan min() ve max() fonksiyonları, responsive tasarımda dinamik değerler oluşturmamızı sağlıyor.
Temel Mantık
min() fonksiyonu: Verilen değerlerden en küçüğünü seçer max() fonksiyonu: Verilen değerlerden en büyüğünü seçer
/* min() - en küçük değeri kullanır */
width: min(500px, 100%);
/* Ekran 500px'den küçükse 100% kullanır, büyükse 500px kullanır */
/* max() - en büyük değeri kullanır */
width: max(300px, 50%);
/* 50% değeri 300px'den küç
Pixel, CSS'in en eski ve en tartışmalı birimidir. "Absolute unit" olarak sınıflandırılsa da, aslında durum biraz daha karmaşık. Detaylı açıklayayım.
1. PX Nedir? (Teknik Gerçek)
CSS Pixel ≠ Fiziksel Pixel
CSS Pixel (Reference Pixel)
↓
Device Independent Pixel (DIP)
↓
Physical Pixel (gerçek ekran pikselleri)
Önemli: 1px CSS'de her zaman aynı fiziksel boyut DEĞİLDİR!
Pixel Density (DPR - Device
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
font-size, CSS’te bir metnin yazı tipi boyutunu belirleyen özelliktir. Yani sayfadaki bir yazının ne kadar büyük veya küçük görüneceğini kontrol edersin.
Modern web geliştirmede font-size konusu ciddi bir evrim geçirdi. Detaylı açıklayayım.
1. Birimler ve Temel Kavramlar
Absolute (Mutlak) Birimler
/* PX - Pixel */
p { font-size: 16px; }
❌ Tarayıcı ayarlarına duyarlı değil
❌ Kullanıcı font tercihlerini görmezde
clamp() fonksiyonu, modern CSS'in en güçlü ve kullanışlı araçlarından biri. Responsive tasarımda "fluid but constrained" (akışkan ama sınırlı) değerler oluşturmanıza olanak tanır.
clamp() Nedir?
clamp() üç parametre alır ve ortadaki değeri, minimum ve maksimum sınırlar arasında tutar:
clamp(MIN, PREFERRED, MAX)
Mantık:
Eğer PREFERRED < MIN ise → MIN kullanılır
Eğer PREFERRED > MAX ise → MAX kullanılır
Eğer MIN ≤ PREFERRED ≤ MAX ise → PREFERRED kullanıl
Viewport Nedir?
Viewport, tarayıcıda web sayfasının görünen alanıdır. Basitçe söylemek gerekirse, kullanıcının ekranında gördüğü sayfa bölgesidir. Dolayısıyla pencereyi küçültüp büyüttükçe bu değerler dinamik olarak yeniden hesaplanır.
Viewport değişince CSS’te:
vw, vh, vmin, vmax, svh, lvh, dvh gibi birimler yeniden hesaplanır.
Media queries tetiklenir.
Container queries yeniden değerlendirilir.
Safe-area env variables güncellen
Relative units, bir öğenin boyutunu başka bir değere göre belirleyen birimlerdir. Sabit (absolute) birimlerden farklı olarak, responsive tasarım için çok daha uygun ve esnek çözümler sunarlar.
Ana Relative Units
rem (root em)
Root element'in (html) font-size'ına göre hesaplanır
1rem = html'in font-size değeri (genelde 16px)
En çok kullanılan ve önerilen birim
html {
font-size: 16px; /* 1rem = 16px */
}
.container {
padding: 2rem; /* 32px */
margin-bott
BEM (Block Element Modifier), Yandex tarafından geliştirilen bir CSS isimlendirme ve mimari metodolojisidir. Amacı, kodun okunabilir, yeniden kullanılabilir ve ölçeklenebilir olmasını sağlamaktır.
BEM'in Üç Bileşeni
1. Block (Blok)
Bağımsız, kendi başına anlamlı bir bileşendir.
.card { }
.menu { }
.header { }
.button { }
.search-form { }
Özellikler:
Tekrar kullanılabilir
Bağımsız çalışabilir
İç içe yerleştirilebilir
Kebab-case ile yazılır
Bir CSS Rule (kural), bir veya daha fazla HTML elementine stil vermek için yazılan tam bir CSS ifadesidir.
ANATOMY (Anatomisi)
selector {
property: value;
}
Detaylı Anatomi:
/* ┌─ SELECTOR (Seçici)
│
▼ */
h1 { /* ← Opening brace (Açılış süslü parantezi) */
color: blue; /* ← Declaration (Bildirim) */
font-size: 24px; /* ← Başka bir declaration */
} /* ← Closing brace (Kapanış süslü parantezi) */
Bileşenler:
Critical Rendering Path (Kritik İşleme Yolu), bir tarayıcının yazdığınız HTML, CSS ve JavaScript kodunu alıp kullanıcının ekranında görebileceği piksellere dönüştürme sürecindeki adımların tamamıdır.
Bu yolun hızlı olması, web sitenizin performansını ve kullanıcı deneyimini (özellikle LCP - Largest Contentful Paint gibi Core Web Vitals metriklerini) doğrudan etkiler.
1. HTML'i Oku → DOM Ağacı Oluştur
Tarayıcı HTML'i satır satır okur ve bir ağaç yapısı oluşturur.
<div&
Networking Aşaması
Tarayıcının bir URL'den HTML içeriğini alması sürecidir.
1. URL Parsing (URL Ayrıştırma)
Kullanıcı bir URL girdiğinde veya link tıkladığında, tarayıcı önce URL'i parçalarına ayırır:
https://herseyibul.com:443/path/page.html?id=123#section
└─┬─┘ └────┬────────┘└┬┘└─────┬───────┘ └──┬──┘└──┬──┘
Protocol Host Port Path Query Fragment
2. DNS Lookup (DNS Sorgusu)
DNS Resolution Süreci:
Domain adı(host) IP adresine çevrilir. Tarayıcı
"Cascade" (Çağlayan veya Basamaklanma), CSS'in "C" harfini oluşturan temel ve en önemli kavramdır. Bir HTML elemanına birden fazla stil kuralı uygulanmaya çalıştığında, hangi kuralın "kazanacağını" ve son sözü söyleyeceğini belirleyen algoritmadır.
Resim Kaynağı: https://css-tricks.com/css-cascade-layers/
Çağlayanın Temel Amacı: Hangi Stil Kazanacak?
Bir p etiketimiz olduğunu düşünün. Bu etikete stil veren kurallar şunlar olabilir:
Tarayıcının kendi
