Modern CSS

Buraya kadar CSS'in kurallarını ve yerleşimini gördün. Bu ders, son on yılda dile eklenen ve eskiden derleyici gerektiren işleri artık doğrudan yapabilen özellikleri topluyor: özel özellikler (CSS değişkenleri), tema altyapısı, geçişler ve animasyonlar, iç içe yazım ve kapsayıcı sorgularıyla birlikte gelen yeni yazım biçimi. Sonunda SCSS'e de bakacağız — neyi çözdüğünü ve bugün hangi kısmının hâlâ gerektiğini bilmek, "SCSS kullanıyor musun" sorusuna ezber değil karar üretmeni sağlar. Bu sitenin koyu/açık teması da tam olarak burada anlatılan yöntemle kuruludur.

01Ne öğreneceksin

02Özel özellikler (CSS değişkenleri)

:root {
  --vurgu: #2dd4bf;
  --zemin: #0f172a;
  --metin: #e2e8f0;
  --bosluk: 1rem;
  --gecis: 200ms ease;
}

.kart {
  background: var(--zemin);
  color: var(--metin);
  padding: var(--bosluk);
  border: 1px solid var(--vurgu);
}

Dört özelliği bilinmelidir:

• Kalıtılırlar. :root'ta tanımlanan bir değişkeni tüm belge görür. Bir ögede yeniden tanımlarsan yalnız o ögeyi ve altını etkiler — bu, bileşen bazlı varyant kurmanın en temiz yoludur.
• Yedek değer alırlar: var(--x, 8px). Değişken tanımlı değilse ikinci değer kullanılır; iç içe de yazılabilir.
• Büyük/küçük harfe duyarlıdır: --Vurgu ile --vurgu ayrı değişkenlerdir.
• Geçersiz değer farklı davranır. Normalde geçersiz bir bildirim atılır (7. ders); değişkenle gelen geçersiz değerde ise özellik unset olur — beklenmedik biçimde kalıtılmış ya da başlangıç değerine dönmüş görünür.

/* Bileşen düzeyinde varyant: tek değişkeni değiştir, tüm iç kurallar uysun */
.dugme          { background: var(--dugme-zemin, #334155); }
.dugme--tehlike { --dugme-zemin: #dc2626; }

/* Bu sitede de aynı yöntem: her hat sayfası kendi rengini bir değişkenle taşır */
<body style="--h: 45">      /* renk tonu (hue) — CSS içinde hsl(var(--h) …) olarak kullanılır */

JavaScript'ten okunabilir ve yazılabilir olmaları, sınıf değiştirmeden durum aktarmayı mümkün kılar:

const kok = document.documentElement;
getComputedStyle(kok).getPropertyValue("--vurgu").trim();   // oku
kok.style.setProperty("--vurgu", "#0f766e");                // yaz

/* Fare konumunu CSS'e taşımak: JS yalnız sayı yazar, görsel iş CSS'te kalır */
el.addEventListener("pointermove", (e) => {
  el.style.setProperty("--x", e.offsetX + "px");
});

03Tema kurmak

Doğru kurgu üç katmanlıdır: ham değerler → anlamsal belirteçler → kullanım.

:root {
  /* 1. ham palet */
  --slate-900: #0f172a;  --slate-100: #f1f5f9;
  --turkuaz-400: #2dd4bf; --turkuaz-700: #0f766e;

  /* 2. anlamsal belirteçler — bileşenler YALNIZ bunları kullanır */
  --renk-zemin: var(--slate-900);
  --renk-metin: var(--slate-100);
  --renk-vurgu: var(--turkuaz-400);
}

[data-tema="acik"] {
  --renk-zemin: var(--slate-100);
  --renk-metin: var(--slate-900);
  --renk-vurgu: var(--turkuaz-700);
}

/* Kullanıcı seçim yapmadıysa işletim sistemi tercihini izle */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="koyu"]) {
    --renk-zemin: var(--slate-100);
    --renk-metin: var(--slate-900);
    --renk-vurgu: var(--turkuaz-700);
  }
}

Anlamsal katmanın değeri şudur: bileşenlerde --slate-900 yazmazsın, --renk-zemin yazarsın. Tema değiştiğinde tek bir yerde eşleme değişir; yüzlerce kuralı düzenlemek gerekmez. Kontrast ölçütleri (6. ders) her iki tema için ayrı ayrı doğrulanır — koyu temada geçen bir renk çifti açık temada düşebilir.

Tema sıçraması (FOUC) ve çözümü

Tema tercihi localStorage'da tutuluyorsa ve JavaScript sayfa yüklendikten sonra çalışıyorsa, kullanıcı bir an yanlış temayı görür ve sonra ekran renk değiştirir. Çözüm, temayı belirleyen küçük betiği <head> içinde, senkron çalıştırmaktır:

<head>
  <script>
    document.documentElement.dataset.tema =
      localStorage.getItem("tema") ||
      (matchMedia("(prefers-color-scheme: light)").matches ? "acik" : "koyu");
  </script>
  <link rel="stylesheet" href="styles.css">
</head>

Bu, 1. derste "klasik betik ayrıştırmayı durdurur" diye kaçınmayı öğrendiğin davranışın bilinçli olarak kullanıldığı nadir yerlerden biridir: betik birkaç mikrosaniye sürer ve karşılığında görsel bir sıçrama önlenir. Bu ders sayfasının kaynak kodunda da aynı satır var — <head>'e bakabilirsin.

Modern renk araçları

/* Bir rengi başka bir renkle karıştır — ayrı bir "açık ton" değişkeni tutmaya gerek yok */
.dugme:hover { background: color-mix(in oklab, var(--renk-vurgu) 80%, white); }

/* Şeffaflık türetmek */
.golge { box-shadow: 0 4px 12px color-mix(in srgb, var(--renk-metin) 15%, transparent); }

/* oklch: algısal olarak eşit parlaklık — aynı L değeriyle üretilen renkler
   birbiriyle aynı "ağırlıkta" görünür; hsl'de bu garanti değildir */
--vurgu: oklch(75% 0.15 180);

/* currentColor: metin rengini takip eden kenarlık/simge */
.simge { fill: currentColor; }
.kutu  { border: 1px solid currentColor; }

currentColor eski ama az bilinen bir araçtır ve tema kurgusunu basitleştirir: bir bileşenin kenarlığı, simgesi ve alt çizgisi metin rengini izlerse, tema değiştiğinde tek bir değişkenin değişmesi yeter.

04Geçişler

.dugme {
  background: var(--renk-vurgu);
  transition: background-color 200ms ease, transform 150ms ease;
}
.dugme:hover  { background: color-mix(in oklab, var(--renk-vurgu) 85%, white); }
.dugme:active { transform: translateY(1px); }

Dört alt özelliği vardır: transition-property, -duration, -timing-function, -delay.

Süre kararı: arayüz geri bildirimi 100–200 ms, panel/menü açılışı 200–300 ms, sayfa düzeyinde geçiş 300–500 ms. Bunun üstü yavaş hissettirir ve 6. derste konuştuğun algılanan performansı düşürür. Animasyon süsleme değil, durum değişikliğini anlaşılır kılan bir araçtır.

Neyin animasyonlanabildiği önemlidir: sayısal ara değeri hesaplanabilen özellikler (renk, uzunluk, opacity, transform) geçiş yapar; display, height: auto gibi ayrık değerler klasik olarak yapmaz. "Yüksekliği auto'ya animasyonlayamama" sorununun bilinen çözümleri: max-height hilesi (kaba), transform: scaleY (içeriği ezer), Grid'de grid-template-rows: 0fr → 1fr (temiz) ve transition-behavior: allow-discrete + @starting-style (yeni ve doğru yol).

/* Yüksekliği içeriğe göre açmak — Grid hilesi */
.acilir { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms ease; }
.acilir[data-acik] { grid-template-rows: 1fr; }
.acilir > div { overflow: hidden; }

05Anahtar kare animasyonları

@keyframes belir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.uyari {
  animation: belir 250ms ease-out both;
  /*         ad     süre   eğri     fill-mode */
}

.iskelet { animation: nabiz 1.4s ease-in-out infinite; }

transition ile animation arasındaki karar: iki durum arasında geçiş varsa (normal ↔ üzerine gelme, kapalı ↔ açık) transition; durum değişikliği olmadan, kendi kendine ya da çok adımlı bir hareket gerekiyorsa (yükleme göstergesi, iskelet parıltısı, dikkat çekme) animation.

Performans ve hareket duyarlılığı

1. derste gördüğün tablo burada uygulanır: yalnız transform ve opacity yerleşim ve boyama olmadan, doğrudan birleştirme aşamasında çalışır. left, top, width, margin animasyonlamak her karede yeniden düzen tetikler ve düşük güçlü cihazlarda kare düşmesine yol açar.

/* KÖTÜ — her karede yeniden düzen */
.panel { transition: left 300ms; }        .panel.acik { left: 0; }

/* İYİ — yalnız birleştirme */
.panel { transform: translateX(-100%); transition: transform 300ms ease-out; }
.panel.acik { transform: none; }

/* will-change: tarayıcıya "bunu ayrı katmana al" der — ÖNCEDEN, kısa süreli.
   Kalıcı olarak yazmak bellek harcar ve tersine etki eder. */
.kart:hover { will-change: transform; }

Ve 6. dersteki erişilebilirlik ölçütü — her animasyonlu projede bulunmalıdır:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

Buradaki !important, 7. derste konuştuğumuz meşru istisnalardandır: her koşulda geçerli olması gereken tek amaçlı bir geçersiz kılmadır.

06Bugünün CSS'inde başka neler var

/* Yerleşik iç içe yazım — & üst seçiciyi temsil eder */
.kart {
  padding: var(--bosluk);

  &:hover { border-color: var(--renk-vurgu); }

  .baslik { font-weight: 600; }        /* → .kart .baslik  (özgüllük 0-2-0!) */

  @media (width >= 700px) { padding: calc(var(--bosluk) * 2); }
}

Dikkat: iç içe yazım özgüllüğü sessizce artırır. Yukarıdaki .baslik kuralı 0-2-0 olur ve dışarıdan tek sınıfla ezilemez. 7. derste konuştuğumuz disiplin burada da geçerli: iç içe yazımı iki seviyeyle sınırla, bileşen parçalarını &__baslik gibi tek sınıflı adlarla üret ya da varsayılanları :where() içine al.

07SCSS'e bakış

SCSS (Sass'ın CSS uyumlu sözdizimi), CSS'in yıllarca eksik olan yeteneklerini sağlayan bir ön işlemcidir. Yazdığın .scss dosyası bir derleyiciden geçirilir ve tarayıcının anlayacağı düz CSS üretilir. Bu, projeye bir derleme adımı ekler.

// SCSS
$aralik: 8px;

@mixin kutu($p: 1) {
  padding: $aralik * $p;
  border-radius: 4px;
}

.kart   { @include kutu(2); }
.uyari  { @include kutu(1); border-left: 3px solid; }

@each $ad, $renk in (basari: #16a34a, hata: #dc2626) {
  .rozet--#{$ad} { background: $renk; }
}

Karar: yeni bir projede SCSS'e varsayılan olarak uzanmak artık gerekmiyor; iç içe yazım, değişkenler ve renk hesapları CSS'te var. SCSS'i seçmek için somut bir gerekçe aranır — çok sayıda üretilmiş yardımcı sınıf, karmaşık palet üretimi, tekrar eden parametreli kural blokları ya da zaten SCSS kullanan bir kod tabanı. Gerekçe yoksa bedeli hatırla: derleme adımı, kaynak eşlemesi olmadan tarayıcıda satır numarası bulamama, ekibe ek araç ve derlenmiş çıktının kaynak koddan uzaklaşması.

Üçüncü bir seçenek de PostCSS'tir: CSS'i CSS'e dönüştüren eklenti tabanlı bir araçtır ve en yaygın kullanımı autoprefixer ile satıcı öneklerini otomatik eklemek ya da henüz yaygınlaşmamış CSS özelliklerini geriye dönük derlemektir. Bu sitede hiçbiri kullanılmıyor — kural gereği saf CSS yazılıyor ve modern CSS bunun için yeterli.

08Mini alıştırma — Tema ve hareket kur

09Kendini sına

CSS özel özellikleri ile SCSS değişkenleri arasındaki fark nedir?

SCSS değişkeni derleme anında yaşar: $renk derleyici tarafından değeriyle değiştirilir ve çıktı CSS'te hiç yer almaz. Dolayısıyla çalışma anında değiştirilemez, medya sorgusuyla ya da bir seçiciyle yeniden tanımlanamaz, JavaScript'ten okunamaz ve tarayıcıda görünmez. CSS özel özelliği (--renk) çalışma anında yaşar: normal bir CSS özelliği gibi kaskada girer ve kalıtılır, bir seçicide yeniden tanımlanınca yalnız o ögeyi ve altını etkiler, var(--x, yedek) ile yedek değer alır, getPropertyValue / setProperty ile JavaScript'ten okunup yazılır ve DevTools'ta görünür. Sonuç: koyu/açık tema, çalışma anında değişen vurgu rengi, bileşen varyantları ve JS'ten gelen dinamik değerler (fare konumu, ilerleme yüzdesi) ancak CSS değişkeniyle yapılabilir. SCSS değişkeni ise derleme anı hesapları için (palet üretmek, ölçek hesaplamak, döngüyle sınıf üretmek) hâlâ kullanışlıdır. Bir ayrıntı: geçersiz bir değer var() yoluyla geldiğinde özellik atılmaz, unset olur — bu, normal CSS'in "geçersiz bildirimi sessizce at" davranışından farklıdır.

Koyu/açık tema desteğini nasıl kurarsın? Tema sıçramasını nasıl önlersin?

Üç katmanlı kurgu: (1) ham palet değişkenleri; (2) anlamsal belirteçler (--renk-zemin, --renk-metin) — bileşenler yalnız bunları kullanır; (3) tema değiştiğinde tek yerde eşlemenin değişmesi. Tema seçimi <html> üzerinde bir data-tema özniteliğiyle taşınır; kullanıcı seçim yapmadıysa @media (prefers-color-scheme: light) ile işletim sistemi tercihi izlenir ve bu blok :root:not([data-tema="koyu"]) gibi bir seçiciyle yazılır ki kullanıcı seçimi sistem tercihini ezebilsin. Tercih localStorage'da saklanır. Tema sıçraması (kullanıcının bir an yanlış temayı görüp sonra ekranın renk değiştirmesi), tema betiği sayfa yüklendikten sonra çalıştığında oluşur; çözümü betiği <head> içinde, stil dosyasından önce ve senkron çalıştırmaktır. Bu, "klasik betik ayrıştırmayı durdurur" kuralının bilinçli olarak kullanıldığı nadir yerlerden biridir. Son olarak kontrast her iki temada ayrı ayrı doğrulanır — koyu temada 4,5:1'i geçen bir renk çifti açık temada geçmeyebilir.

Animasyonda neden transform ve opacity tercih edilir?

Çünkü bu iki özellik tarayıcının çizim hattında yalnız birleştirme (composite) aşamasını tetikler; yerleşim (layout) ve boyama (paint) aşamalarını atlarlar ve genellikle GPU'da, ana iş parçacığını meşgul etmeden çalışırlar. left, top, width, height, margin gibi özellikleri animasyonlamak ise her karede yeniden düzen hesaplattırır; 60 FPS için kare başına ~16 ms bütçen varken bu, düşük güçlü cihazlarda takılmaya yol açar. background-color ve box-shadow aradadır: yerleşimi tetiklemez ama yeniden boyama gerektirir. Pratik karşılığı: bir paneli left: -100% → 0 yerine transform: translateX(-100%) → none ile aç. will-change: transform tarayıcıya ögeyi önceden ayrı katmana almasını söyler, ama kalıcı olarak yazılmaz — her katman bellek harcar ve aşırı kullanımı tersine etki eder. Son olarak her animasyonlu projede @media (prefers-reduced-motion: reduce) bloğu bulunmalıdır: vestibüler rahatsızlığı olan kullanıcılar için bu bir erişilebilirlik gereğidir ve o blokta !important kullanmak meşru istisnalardandır.

SCSS bugün hâlâ gerekli mi? Hangi durumda kullanırsın?

Varsayılan olarak gerekli değil. SCSS'in en çok kullanılan iki özelliği artık CSS'te var: iç içe yazım yerleşik olarak geldi, değişkenler ise özel özellikler biçiminde ve SCSS'ten daha güçlü (çalışma anında değişir, kalıtılır, JS'ten okunur). Renk hesapları color-mix() ve oklch() ile, matematik calc()/min()/max()/clamp() ile karşılanıyor. SCSS'in hâlâ karşılığı olmayan yanları: @mixin (parametreli kural bloğu üretmek), @function ve döngüler (@each/@for ile yardımcı sınıf ya da palet üretmek) ve @use ile dosya bölme (CSS'te @import istekleri zincirlediği için). Dolayısıyla karar somut gerekçeye bağlanır: çok sayıda üretilmiş yardımcı sınıf, karmaşık palet üretimi, tekrar eden parametreli bloklar ya da zaten SCSS kullanan bir kod tabanı. Gerekçe yoksa bedeli hatırlanır: derleme adımı, ek araç bağımlılığı, kaynak eşlemesi olmadan tarayıcıda satır bulamama ve çıktının kaynaktan uzaklaşması. Bir de ortak tuzağı vardır: iç içe yazım özgüllüğü sessizce artırır — dört seviye yazmak farkında olmadan 0-4-0 seçiciler üretir ve sonradan ezilemez hâle gelir; bu risk yerleşik CSS iç içe yazımında da aynen geçerlidir.

10Sınav köşesi