Yükleniyor...
CSS Birimleri Tam Referans Rehberi
Bu rehber, CSS’de kullanılan tüm birimleri kapsayan kapsamlı bir referans kaynağıdır. Geliştiriciler, bu rehberi kullanarak sayfa tasarımlarında doğru birimleri hızlıca seçebilir, responsive ve erişilebilir tasarımlar oluşturabilir. Rehber, mutlak ve göreli uzunluk birimleri, viewport birimleri, konteyner sorgu birimleri, yüzde birimleri, açı birimleri, zaman ve frekans birimleri, çözünürlük, renk birimleri, fonksiyon birimleri ve Grid birimleri gibi kategorilerle organize edilmiştir. Her bir birim açıklaması, dönüşümü, örnek kullanımı ve tarayıcı desteği ile birlikte sunularak hızlı ve etkili bir başvuru olanağı sağlar.
📊 Mutlak Uzunluk Birimleri
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Piksel - cihaz pikseli | 1px = 1/96 inç | width: 300px | Ekran düzenleri, kenarlıklar, gölgeler | Tüm tarayıcılar |
| cm | Santimetre | 1cm = 37.8px | margin: 2cm | Basılı belgeler, fiziksel ölçümler | Tüm tarayıcılar |
| mm | Milimetre | 1mm = 3.78px | border: 1mm solid | Hassas ölçümler, basılı materyal | Tüm tarayıcılar |
| in | İnç | 1in = 96px | page-break-after: 2in | Baskı düzenleri, büyük ölçümler | Tüm tarayıcılar |
| pt | Point | 1pt = 1.33px | font-size: 12pt | Tipografi, basılı medya | Tüm tarayıcılar |
| pc | Pica | 1pc = 16px | line-height: 1.5pc | Basılı tipografi, sütun genişlikleri | Tüm tarayıcılar |
| Q | Çeyrek milimetre | 1Q = 0.25mm | margin: 4Q | Basılı tasarımlar, çok hassas ölçümler | Modern tarayıcılar |
📊 Göreli Uzunluk Birimleri
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Em birimi | Üst öğenin font boyutu | font-size: 1.2em | Tipografi, metne göre esnek boşluk | Tüm tarayıcılar |
| rem | Root em | Kök öğenin font boyutu | margin: 2rem | Tutarlı boşluk, ölçeklenebilir düzenler | IE9+ |
| ex | X-yüksekliği | Geçerli fonttaki küçük 'x' harfi yüksekliği | line-height: 2ex | Tipografi, dikey hizalama | Tüm tarayıcılar |
| ch | Karakter genişliği | Geçerli fontta '0' karakter genişliği | width: 40ch | Metin konteynerleri, monospace düzenler | IE9+ |
| cap | Büyük harf yüksekliği | Geçerli fontta büyük harf yüksekliği | margin-top: 1cap | Tipografi, dikey boşluk | Modern tarayıcılar |
| ic | İdeografik karakter | CJK ideografik karakter genişliği | width: 20ic | Doğu Asya tipografisi | Modern tarayıcılar |
| lh | Satır yüksekliği | Öğe satır yüksekliği | margin: 1lh | Dikey ritim, boşluk | Modern tarayıcılar |
| rlh | Kök satır yüksekliği | Kök öğe satır yüksekliği | padding: 0.5rlh | Tutarlı dikey boşluk | Modern tarayıcılar |
📊 Viewport Birimleri
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Viewport genişliği | Viewport genişliğinin %1'i | width: 50vw | Tam genişlik düzenleri, responsive tasarım | IE9+ |
| vh | Viewport yüksekliği | Viewport yüksekliğinin %1'i | height: 100vh | Tam yüksek bölümler, hero alanları | IE9+ |
| vmin | Viewport minimum | Küçük viewport boyutunun %1'i | font-size: 4vmin | Kare elemanlar, responsive tipografi | IE9+ |
| vmax | Viewport maksimum | Büyük viewport boyutunun %1'i | width: 50vmax | Responsive düzenler, adaptif tasarım | IE9+ |
| vi | Viewport inline | Inline yönde viewport %1'i | padding: 2vi | Mantıksal özellikler, uluslararası düzenler | Modern tarayıcılar |
| vb | Viewport block | Block yönde viewport %1'i | margin: 3vb | Yazım modlarına uygun tasarım | Modern tarayıcılar |
| dvw | Dinamik viewport genişliği | Dinamik viewport genişliğinin %1'i | width: 100dvw | Mobil düzenler, adres çubuğu yönetimi | Modern tarayıcılar |
| dvh | Dinamik viewport yüksekliği | Dinamik viewport yüksekliğinin %1'i | height: 100dvh | Mobil tam ekran, dinamik UI | Modern tarayıcılar |
| lvw | Büyük viewport genişliği | Büyük viewport genişliğinin %1'i | max-width: 90lvw | Mobil düzenler, UI görünür | Modern tarayıcılar |
| lvh | Büyük viewport yüksekliği | Büyük viewport yüksekliğinin %1'i | min-height: 100lvh | Mobil düzenler, maksimum viewport | Modern tarayıcılar |
| svw | Küçük viewport genişliği | Küçük viewport genişliğinin %1'i | width: 100svw | Mobil düzenler, UI gizli | Modern tarayıcılar |
| svh | Küçük viewport yüksekliği | Küçük viewport yüksekliğinin %1'i | height: 100svh | Mobil düzenler, minimum viewport | Modern tarayıcılar |
📊 Container Query Birimleri
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Konteyner genişliği | Konteyner genişliğinin %1'i | width: 50cqw | Konteyner tabanlı responsive tasarım | Modern tarayıcılar |
| cqh | Konteyner yüksekliği | Konteyner yüksekliğinin %1'i | height: 80cqh | Konteyner tabanlı düzenler | Modern tarayıcılar |
| cqi | Konteyner inline | Konteyner inline boyutunun %1'i | padding: 2cqi | Mantıksal konteyner düzenleri | Modern tarayıcılar |
| cqb | Konteyner block | Konteyner block boyutunun %1'i | margin: 1cqb | Block yönü konteyner boyutlandırma | Modern tarayıcılar |
| cqmin | Konteyner minimum | Küçük konteyner boyutunun %1'i | font-size: 3cqmin | Konteyner tabanlı tipografi | Modern tarayıcılar |
| cqmax | Konteyner maksimum | Büyük konteyner boyutunun %1'i | border-radius: 2cqmax | Konteyner tabanlı stil | Modern tarayıcılar |
📊 Yüzde Birimleri
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Yüzde | Üst öğenin ilgili özelliği | width: 50% | Esnek düzenler, responsive tasarım | Tüm tarayıcılar |
📊 Açısal Birimler
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Derece | 360deg = tam tur | transform: rotate(45deg) | Rotasyonlar, gradientler | Tüm tarayıcılar |
| grad | Gradyan | 400grad = tam tur | transform: rotate(100grad) | Matematiksel hesaplar, gradientler | Tüm tarayıcılar |
| rad | Radyan | 2π rad = tam tur | transform: rotate(1.57rad) | Matematiksel dönüşümler | Tüm tarayıcılar |
| turn | Tur | 1turn = tam tur | transform: rotate(0.25turn) | Sezgisel rotasyonlar, animasyonlar | IE9+ |
📊 Zaman Birimleri
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Saniye | 1s = 1000ms | transition-duration: 2s | Animasyonlar, geçişler | Tüm tarayıcılar |
| ms | Milisaniye | 1000ms = 1s | animation-delay: 500ms | Hassas zamanlama, hızlı animasyonlar | Tüm tarayıcılar |
📊 Frekans Birimleri
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Hertz | 1Hz = 1 döngü/saniye | CSS'de yaygın değil | Sesle ilgili özellikler (gelecek) | Sınırlı |
| kHz | Kilohertz | 1kHz = 1000Hz | CSS'de yaygın değil | Sesle ilgili özellikler (gelecek) | Sınırlı |
📊 Çözünürlük Birimleri
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Inç başına nokta | Fiziksel nokta yoğunluğu | @media (min-resolution: 300dpi) | Yüksek DPI ekranlar, baskı | IE9+ |
| dpcm | Santimetre başına nokta | Fiziksel nokta/cm | @media (min-resolution: 118dpcm) | Baskı, metrik ölçümler | IE9+ |
| dppx | CSS piksel başına cihaz pikseli | Cihaz pikseli / CSS piksel | @media (min-resolution: 2dppx) | Retina ekranlar, DPR | IE9+ |
| x | dppx alias | dppx ile aynı | @media (min-resolution: 2x) | Retina ekranlar | Modern tarayıcılar |
📊 Renk Birimleri
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hexadecimal | #RRGGBB veya #RGB | color: #ff0000 | Standart renk notasyonu | Tüm tarayıcılar |
| rgb() | RGB fonksiyonu | rgb(r,g,b) | color: rgb(255,0,0) | Hassas renk kontrolü | Tüm tarayıcılar |
| rgba() | RGB alpha | rgba(r,g,b,a) | background: rgba(255,0,0,0.5) | Şeffaf renkler | IE9+ |
| hsl() | HSL fonksiyonu | hsl(h,s%,l%) | color: hsl(0,100%,50%) | Sezgisel renk seçimi | IE9+ |
| hsla() | HSL alpha | hsla(h,s%,l%,a) | background: hsla(0,100%,50%,0.5) | Şeffaf HSL renkler | IE9+ |
| hwb() | HWB fonksiyonu | hwb(h w% b%) | color: hwb(0 0% 0%) | Alternatif renk modeli | Modern tarayıcılar |
| lab() | Lab fonksiyonu | lab(l a b) | color: lab(50% 20 -30) | Algısal renk uzayı | Modern tarayıcılar |
| lch() | LCH fonksiyonu | lch(l c h) | color: lch(50% 40 180) | Silindirik Lab renk uzayı | Modern tarayıcılar |
| oklab() | OKLab fonksiyonu | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Geliştirilmiş Lab uzayı | Modern tarayıcılar |
| oklch() | OKLCH fonksiyonu | oklch(l c h) | color: oklch(0.5 0.4 180) | Geliştirilmiş LCH uzayı | Modern tarayıcılar |
| color() | Color fonksiyonu | color(space r g b) | color: color(display-p3 1 0 0) | Geniş renk gamutu | Modern tarayıcılar |
📊 Fonksiyon Birimleri
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Matematiksel hesaplama | Farklı birimleri birleştirir | width: calc(100% - 20px) | Karışık birim hesaplamaları | IE9+ |
| min() | Minimum değer | En küçük değeri döndürür | width: min(100px,50%) | Responsive kısıtlamalar | Modern tarayıcılar |
| clamp() | Clamp fonksiyonu | clamp(min, preferred, max) | font-size: clamp(1rem,4vw,2rem) | Limitsiz responsive tipografi | Modern tarayıcılar |
| attr() | HTML attribute | HTML attribute değerini kullanır | width: attr(data-width px) | Dinamik HTML değerleri | Sınırlı destek |
| var() | CSS değişkeni | Custom property değerini kullanır | color: var(--main-color) | CSS değişkenleri | IE11+ (parçalı), Modern tarayıcılar |
📊 Grid Birimleri
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | Fraksiyon birimi | Mevcut alanın bir fraksiyonu | grid-template-columns: 1fr 2fr | CSS Grid, esnek kolonlar | IE10+ (-ms-) |
Code Example 15
css
CSS Code
/* Mutlak ve göreli birimleri karıştırma */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Clamp ile responsive tipografi */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Viewport birimleri ile full-screen layout */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container query birimleri ile component stil */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid fr birimi kullanımı */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}- Ölçeklenebilir ve erişilebilir tasarımlar için rem, em ve % gibi göreli birimleri kullanın.
- Tutarlı boşluklar için em yerine rem tercih edin.
- Viewport birimlerini (vw, vh) kullanırken scroll bar etkilerini göz önünde bulundurun.
- Clamp() ile uyumlu responsive tipografi sağlayın.
- Karışık birimler için calc() ile stratejik kombinasyon yapın.
- Kenarlık, gölge ve dekoratif öğelerde px kullanın.
- Container query birimlerini destekleyen tarayıcılarda test edin.
- CSS Grid’de fr birimleri ile esnek ve sezgisel düzenler oluşturun.
- dvh, lvh, svh gibi yeni birimlerin tarayıcı desteğini kontrol edin.
- Uluslararası tasarımlar için vi, vb gibi mantıksal birimler düşünün.
- HSL/HSB renk birimlerini renk manipülasyonu ve tema yönetimi için kullanın.
- Yeni birimler için eski tarayıcılar ile uyumlu fallback sağlayın.
- Farklı cihaz ve ekran boyutlarında birim kombinasyonlarını test edin.
🧠 Bilginizi Test Edin
Başlamaya Hazır
CSS Birimleri Bilgi Kontrolü
CSS birimlerini ve kullanımını test edin.
3
Sorular
70%
Geçmek İçin
∞
Süre
∞
Deneme
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek