🚀 Modern & Responsive CSS

Son gün! Modern CSS’in 2026’ya yaraşan özelliklerine bakıyoruz. Custom properties, container queries, dark mode… eski CSS’le yeniyi ayıran her şey.

1. CSS Değişkenleri (Custom Properties)

Tek bir yerden değer değiştirip tüm siteyi etkilemek? CSS değişkenleri:

:root {
    --bg: #000;
    --text: #ededed;
    --accent: #a6e22e;
    --radius: 8px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
}

.card {
    background: var(--bg);
    color: var(--text);
    padding: var(--space-md);
    border-radius: var(--radius);
}

.btn {
    background: var(--accent);
    border-radius: var(--radius);
}

Fallback Değer

Değişken tanımlanmamışsa fallback:

.box {
    color: var(--text-color, #333);  /* yoksa #333 kullan */
}

Scope (Kapsam)

Custom properties scoped — bir elementte tanımlı, alt elementlerde geçerli:

.theme-dark {
    --bg: #000;
    --text: #ededed;
}

.theme-light {
    --bg: #fff;
    --text: #1a1a1a;
}

.card {
    background: var(--bg);  /* parent tema'ya göre değişir */
    color: var(--text);
}

JavaScript ile Erişim

// Oku
const accent = getComputedStyle(document.documentElement)
    .getPropertyValue('--accent');

// Yaz
document.documentElement.style.setProperty('--accent', '#7C9CFF');

Tema geçişi, dinamik özelleştirme — bu yöntemle.

2. Media Query Stratejileri

Mobile-First

Önce mobil, sonra büyük ekran için override. Modern best practice:

/* Mobile (default) */
.container { padding: 16px; }
.nav-links { display: none; }

/* Tablet */
@media (min-width: 768px) {
    .container { padding: 32px; }
    .nav-links { display: flex; }
}

/* Desktop */
@media (min-width: 1280px) {
    .container { padding: 48px; }
}

Neden mobile-first?

• Mobile kullanıcı kullanıcı tabanının çoğu
• Performans (mobile için minimum CSS yüklenir, fazlası override eder)
• Kavramsal olarak basit (eklemek > çıkarmak)

Yatay/Dikey Yönelim

@media (orientation: portrait) { /* dikey */ }
@media (orientation: landscape) { /* yatay */ }

Renk Şeması & Tema

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000;
        --text: #ededed;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #fff;
        --text: #1a1a1a;
    }
}

Hareket Tercihi

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

3. Container Queries — Yeni Çağ

Media query viewport boyutuna bakar. Container query ise parent container’ın boyutuna. Component-relative responsive!

.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card {
        display: flex;
        gap: 16px;
    }
}

Aynı .card component’i:

• 300px genişlikte bir sidebar’da → dikey
• 800px genişlikte main content’te → yatay

Tek bir component, iki farklı yerde kullanıldığında kendi boyutuna göre davranır. Reusable component’ler için devrim.

4. Dark Mode Stratejisi

Otomatik (Sistem Tercihi)

:root {
    color-scheme: light dark;  /* tarayıcı UI'ı (scrollbar vs) de değişir */
    --bg: #fff;
    --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000;
        --text: #ededed;
    }
}

Manuel Toggle (Kullanıcı Kontrolü)

HTML’de data-theme attribute kullan:

:root,
[data-theme="light"] {
    --bg: #fff;
    --text: #1a1a1a;
}

[data-theme="dark"] {
    --bg: #000;
    --text: #ededed;
}

// Toggle
const toggle = () => {
    const current = document.documentElement.dataset.theme;
    document.documentElement.dataset.theme = current === 'dark' ? 'light' : 'dark';
    localStorage.setItem('theme', document.documentElement.dataset.theme);
};

// İlk yükleme
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'dark';

5. Modern CSS Özellikleri

aspect-ratio

Boyut oranını direkt tanımla — padding-bottom hack’i tarihe karıştı:

.video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.avatar {
    aspect-ratio: 1 / 1;
    width: 64px;
    border-radius: 50%;
}

clamp(min, ideal, max)

Responsive değer tek satırda:

.hero h1 {
    font-size: clamp(32px, 5vw, 64px);
    /* en az 32px, ideal 5vw, en fazla 64px */
}

.container {
    width: clamp(300px, 90%, 1200px);
}

Bu, fluid typography ve responsive layout’un büyük kısmını çözer.

color-mix()

Renkleri CSS’ten karıştır:

.btn-soft {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    /* %12 accent + %88 şeffaf */
}

.btn:hover {
    background: color-mix(in srgb, var(--accent) 80%, black);
}

:has() — Parent Selector

CSS tarihinin en beklediği özelliği: parent’ı child’a göre seç.

/* İçinde img olan kart farklı padding */
.card:has(img) {
    padding: 0;
}

/* Hover'da olan menüye sahip nav */
.nav:has(.dropdown:hover) {
    z-index: 100;
}

/* Form'da hata varsa border */
form:has(input:invalid) {
    border-color: red;
}

scroll-behavior

html {
    scroll-behavior: smooth;  /* anchor link'ler smooth */
}

.section {
    scroll-margin-top: 80px;  /* sticky header için offset */
}

backdrop-filter

Frosted glass / buğulu arka plan:

.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

gap (Flexbox + Grid)

Eskiden sadece Grid’de vardı, artık Flexbox’ta da çalışıyor:

.row {
    display: flex;
    gap: 16px;  /* artık desteklenir */
}

Mini Proje: Tam Responsive Landing Page

<header class="nav">
    <a href="/" class="brand">Logo</a>
    <nav class="nav-links">
        <a href="#">Home</a>
        <a href="#">Blog</a>
        <a href="#">About</a>
    </nav>
</header>

<section class="hero">
    <h1>Modern CSS ile inşa edildi</h1>
    <p>Container queries, custom properties, ve clamp() ile.</p>
    <a href="#" class="btn">Başla</a>
</section>

<section class="features">
    <article class="feature">…</article>
    <article class="feature">…</article>
    <article class="feature">…</article>
</section>

:root {
    color-scheme: dark;
    --bg: #000;
    --surface: #0a0a0a;
    --text: #ededed;
    --text-dim: #888;
    --accent: #a6e22e;
    --border: #1a1a1a;
    --radius: 8px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) clamp(16px, 5vw, 48px);
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
}

.nav-links {
    display: flex;
    gap: var(--space-md);
}

.nav-links a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.nav-links a:hover { color: var(--accent); }

.hero {
    padding: clamp(48px, 10vw, 120px) clamp(16px, 5vw, 48px);
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    margin: 0 0 var(--space-md);
}

.hero p {
    font-size: clamp(16px, 2vw, 20px);
    color: var(--text-dim);
    margin: 0 0 var(--space-lg);
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #000;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
    padding: var(--space-xl) clamp(16px, 5vw, 48px);
    max-width: 1200px;
    margin: 0 auto;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    transition: border-color 0.2s, transform 0.2s;
}

.feature:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; }
}

Sıfır media query, otomatik responsive, dark mode hazır, accessibility’ye saygılı. Modern CSS bu kadar temiz.

Pratik Sorular

Soru 1: Bir başlığın font-size’ı mobilde 24px, ideal 5vw, max 48px olsun. Tek satırda?

h1 { font-size: clamp(24px, 5vw, 48px); }

Soru 2: İçinde resim olan kartlara hiç padding, olmayan kartlara 24px padding. Tek selector ile.

.card { padding: 24px; }
.card:has(img) { padding: 0; }

Soru 3: Bir tema toggle’ı — kullanıcının tercihini hatırla, sayfa yenilense de tema kalsın.

const root = document.documentElement;
const stored = localStorage.getItem('theme');
root.dataset.theme = stored || (
    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
);

document.getElementById('toggle').addEventListener('click', () => {
    const newTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
    root.dataset.theme = newTheme;
    localStorage.setItem('theme', newTheme);
});

🎉 Tebrikler!

5 günlük CSS3 BootCamp’ini başarıyla tamamladın!

Artık:

• Temel sözdiziminden modern özelliklere kadar her şeyi biliyorsun
• Flexbox ve Grid ile her layout’u çözebilirsin
• Animasyon ve transition ile sayfalara hayat katabilirsin
• Custom properties, clamp, container queries ile modern responsive CSS yazıyorsun
• Dark mode ve erişilebilirlik standartlarına saygı duyuyorsun

Sonraki Adımlar

• CSS framework’leri ile pratik: Tailwind CSS, UnoCSS
• CSS-in-JS veya CSS Modules ile component-scoped styling
• Animation libraries: GSAP, Framer Motion
• Design systems: Radix UI, shadcn/ui kaynak kodlarını inceleme
• Real proje: Kendi tasarım sistemini sıfırdan inşa et

Modern CSS, sürekli evrilen bir alan. Yeni özellikleri takip et, denemekten korkma. Mutlu kodlamalar! 🎨