Medya sorguları, belirli koşullar sağlandığında uygulanacak CSS kurallarını tanımlar. Bu, RWD'nin temel taşıdır.

Sözdizimi:

@media media-türü and (özellik: değer) {
  /* Koşul sağlandığında uygulanacak CSS kuralları */
  secici {
    ozellik: deger;
  }
}
                    

• @media: Medya sorgusu bloğunu başlatır.
• media-türü (isteğe bağlı): Kuralın hangi medya türü için geçerli olduğunu belirtir (all (varsayılan), print (yazdırma), screen (ekranlar), speech (ekran okuyucular)).
• and / not / only (isteğe bağlı): Mantıksal operatörlerle birden fazla koşul birleştirilebilir veya koşul tersine çevrilebilir. only eski tarayıcıların sorguyu yok saymasını sağlar.
• (özellik: değer): Asıl koşuldur. Parantez içinde belirtilir. En yaygın kullanılan özellikler:
  • width / height: Tarayıcı penceresinin (viewport) genişliği/yüksekliği.
  • min-width / max-width: Minimum/maksimum genişlik.
  • min-height / max-height: Minimum/maksimum yükseklik.
  • orientation: Cihazın yönlendirmesi (portrait (dikey) veya landscape (yatay)).
  • aspect-ratio / min-aspect-ratio / max-aspect-ratio: Görüntü alanının en/boy oranı.
  • resolution / min-resolution / max-resolution: Cihazın piksel yoğunluğu (örn: dpi, dpcm).

Yaklaşımlar:

• Desktop First: Önce masaüstü stilleri yazılır, ardından daha küçük ekranlar için max-width ile medya sorguları kullanılarak stiller uyarlanır.
• Mobile First: Önce mobil cihaz stilleri yazılır, ardından daha büyük ekranlar için min-width ile medya sorguları kullanılarak stiller genişletilir. Modern web geliştirmede genellikle Mobile First yaklaşımı tercih edilir çünkü daha basit stillerle başlayıp gerektiğinde karmaşıklık eklemeyi sağlar ve mobil kullanıcı deneyimini önceliklendirir.

/* Mobile First Yaklaşımı Örneği */

/* Varsayılan stiller (Mobil için) */
body {
  font-size: 16px;
}
.konteyner {
  width: 95%;
  margin: 0 auto;
}
.menu {
  /* Mobil menü stilleri (belki gizli, butonla açılır) */
  display: none;
}
.kolon {
  width: 100%; /* Kolonlar alt alta */
  margin-bottom: 15px;
}

/* Tablet Boyutu (Örn: 600px ve üzeri) */
@media screen and (min-width: 600px) {
  .konteyner {
    width: 90%;
  }
  .menu {
     display: block; /* Menüyü göster */
     /* Belki yatay menü stilleri */
  }
  .kolon {
     width: 48%; /* İki kolon yan yana */
     display: inline-block; /* Veya Flexbox/Grid kullanılır */
     margin-right: 4%;
  }
  .kolon:last-child {
      margin-right: 0;
  }
}

/* Masaüstü Boyutu (Örn: 992px ve üzeri) */
@media screen and (min-width: 992px) {
  body {
    font-size: 18px;
  }
  .konteyner {
    width: 80%;
    max-width: 1200px; /* Maksimum genişlik */
  }
   /* Belki 3 veya 4 kolonlu yapı */
  .kolon {
     width: 30%;
     margin-right: 5%;
   }
  .kolon:nth-child(3n) { /* Her 3. kolondan sonra sağ boşluğu kaldır */
      margin-right: 0;
  }
   .kolon:last-child { /* Eğer 3'ün katı değilse son elemanın boşluğunu ayarla */
       margin-right: 0; /* Veya duruma göre ayarlanır */
   }
}

/* Sadece Yazdırma İçin Stiller */
@media print {
  body {
    font-family: 'Times New Roman', serif;
    color: black;
    background-color: white;
  }
  a::after {
    content: " (" attr(href) ")"; /* Bağlantı URL'lerini göster */
  }
  .menu, .reklamlar, .footer-nav {
    display: none; /* Yazdırmada gereksiz elemanları gizle */
  }
}
                    

Unutmayın, RWD için HTML'de etiketinin bulunması kritik öneme sahiptir.

CSS geçişleri, bir CSS özelliğinin değeri değiştiğinde (örneğin :hover durumunda), bu değişikliğin ani olmak yerine belirli bir süre içinde yumuşak bir şekilde gerçekleşmesini sağlar. Basit animasyon efektleri oluşturmak için kullanılır.

Temel Özellikler:

• transition-property: Geçiş efekti uygulanacak CSS özelliğini (veya özelliklerini all ile) belirtir.
• transition-duration: Geçişin ne kadar süreceğini belirtir (örn: 0.5s, 300ms).
• transition-timing-function: Geçişin hız eğrisini belirler (nasıl başlayıp nasıl biteceği) (ease (varsayılan), linear, ease-in, ease-out, ease-in-out, cubic-bezier(...)).
• transition-delay: Geçişin başlamadan önce ne kadar bekleyeceğini belirtir.
• transition (Kısayol): Yukarıdaki dört özelliği sırayla tek bir satırda tanımlar. En sık kullanılan sıra: property duration timing-function delay.

.buton {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  /* Kısayol transition tanımı:
     Arka plan rengi 0.3 saniyede ease-out ile,
     transform 0.2 saniyede ease-in ile değişsin */
  transition: background-color 0.3s ease-out, transform 0.2s ease-in;

  /* Veya tüm özellikler için: */
  /* transition: all 0.3s ease; */
}

.buton:hover {
  background-color: darkblue;
  transform: scale(1.1); /* Butonu hafifçe büyüt */
}

.kutu {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    transition: width 2s linear, height 1s ease-in 1s, opacity 0.5s; /* Birden fazla özellik farklı süre/zamanlama/gecikme ile */
}

.kutu:hover {
    width: 200px;
    height: 150px;
    opacity: 0.5;
}
                    

CSS animasyonları, geçişlerden daha karmaşık ve kontrol edilebilir animasyonlar oluşturmayı sağlar. Animasyonlar, @keyframes kuralı ile tanımlanır ve ardından animation özellikleri ile bir elemana uygulanır.

@keyframes Kuralı: Animasyonun farklı aşamalarındaki (keyframe) stilleri tanımlar. Yüzdeler (0%'dan 100%'e) veya anahtar kelimeler (from (0% ile aynı), to (100% ile aynı)) kullanılır.

/* Basit bir renk değiştirme animasyonu */
@keyframes renkDegistir {
  from { background-color: red; }
  to { background-color: yellow; }
}

/* Daha karmaşık bir sallanma animasyonu */
@keyframes salla {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px) rotate(-5deg); }
  50% { transform: translateX(10px) rotate(5deg); }
  75% { transform: translateX(-5px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0); }
}
                    

animation Özellikleri:

• animation-name: Uygulanacak @keyframes kuralının adını belirtir.
• animation-duration: Animasyonun bir döngüsünün ne kadar süreceğini belirtir.
• animation-timing-function: Animasyonun hız eğrisini belirler (transition-timing-function ile aynı değerleri alır).
• animation-delay: Animasyonun başlamadan önce ne kadar bekleyeceğini belirtir.
• animation-iteration-count: Animasyonun kaç kez tekrarlanacağını belirtir (bir sayı veya infinite (sonsuz)).
• animation-direction: Animasyonun döngülerde tersine oynatılıp oynatılmayacağını belirler (normal (varsayılan), reverse, alternate (ileri-geri), alternate-reverse).
• animation-fill-mode: Animasyon başlamadan önce veya bittikten sonra elemanın hangi stilleri alacağını belirler (none (varsayılan), forwards (son keyframe stilini korur), backwards (ilk keyframe stilini başlangıçta uygular), both).
• animation-play-state: Animasyonun çalışıp (running - varsayılan) duraklatıldığını (paused) kontrol eder (genellikle JavaScript ile kullanılır).
• animation (Kısayol): Yukarıdaki özellikleri (play-state hariç) tek satırda tanımlar. Sıra genellikle: name duration timing-function delay iteration-count direction fill-mode.

.animasyonlu-kutu {
  width: 100px;
  height: 100px;
  background-color: red; /* 'from' ile aynı olmalı (eğer fill-mode: backwards isteniyorsa) */

  /* Kısayol animation tanımı */
  animation: renkDegistir 3s ease-in-out 1s infinite alternate;
  /* İsim: renkDegistir, Süre: 3s, Zamanlama: ease-in-out, Gecikme: 1s, Tekrar: sonsuz, Yön: ileri-geri */
}

.sallanan-ikon {
    display: inline-block;
    animation: salla 1s ease-in-out infinite;
}

/* Hover durumunda animasyonu duraklatma */
.animasyonlu-kutu:hover {
  animation-play-state: paused;
}
                    

CSS Değişkenleri (resmi adıyla Custom Properties for Cascading Variables), CSS içinde tekrar tekrar kullanılan değerleri (renkler, font boyutları, boşluklar vb.) tanımlamak ve yönetmek için güçlü bir mekanizmadır. Değişkenler, kod tekrarını azaltır, bakımı kolaylaştırır ve tema oluşturmayı basitleştirir.

Tanımlama: Değişkenler genellikle :root sözde sınıfı içinde (tüm belgeye uygulanması için) tanımlanır. İsimleri iki tire (--) ile başlar.

Kullanma: Değişken değeri, var() fonksiyonu kullanılarak çağrılır.

/* Değişkenleri :root içinde tanımlama */
:root {
  --ana-renk: #007bff;
  --ikincil-renk: #6c757d;
  --golge-rengi: rgba(0, 0, 0, 0.1);
  --ana-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --kenar-boslugu: 15px;
  --kutu-golgesi: 0 2px 5px var(--golge-rengi);
}

/* Değişkenleri kullanma */
body {
  font-family: var(--ana-font);
  color: var(--ikincil-renk);
}

.buton-birincil {
  background-color: var(--ana-renk);
  color: white;
  padding: var(--kenar-boslugu);
  border: none;
  box-shadow: var(--kutu-golgesi);
}

.kart {
  padding: var(--kenar-boslugu);
  margin-bottom: var(--kenar-boslugu);
  box-shadow: var(--kutu-golgesi);
  border-left: 5px solid var(--ana-renk);
}

/* Bir değişken için varsayılan (fallback) değer tanımlama */
.ozel-alan {
    color: var(--tanimsiz-degisken, black); /* Eğer --tanimsiz-degisken yoksa black kullanılır */
}

/* Değişkenler JavaScript ile değiştirilebilir (Tema değiştirme vb.) */
/* document.documentElement.style.setProperty('--ana-renk', 'darkred'); */
                    

CSS Değişkenleri, kademelenme ve kalıtım kurallarına uyar, yani belirli bir seçici içinde tanımlanarak sadece o kapsamdaki değeri geçersiz kılabilirler.

CSS ön işlemcileri, standart CSS'in yeteneklerini artıran, daha verimli ve yönetilebilir stil dosyaları yazmayı sağlayan betik dilleridir. Yazılan özel sözdizimi (değişkenler, iç içe kurallar, mixin'ler, fonksiyonlar, kalıtım vb. özellikler içerir) derlenerek tarayıcıların anlayabileceği standart CSS koduna dönüştürülür.

En popüler ön işlemciler:

• Sass (Syntactically Awesome Style Sheets): En yaygın kullanılanlardan biridir. İki farklı sözdizimi sunar: SCSS (CSS'e çok benzer, { } ve ; kullanır) ve SASS (girintiye dayalı, daha kısa).
• Less (Leaner Style Sheets): Sass'a benzer özellikler sunar, JavaScript tabanlıdır.
• Stylus: Çok esnek bir sözdizimine sahiptir (süslü parantez, iki nokta üst üste, noktalı virgül kullanımı isteğe bağlıdır).

Sağladığı Avantajlar:

• Değişkenler: Renkleri, fontları vb. merkezi olarak tanımlama (standart CSS değişkenlerinden önce popülerdi).
• İç İçe Kurallar (Nesting): HTML yapısını yansıtan, daha okunabilir CSS kuralları yazma.
• Mixin'ler: Tekrar kullanılabilir stil blokları oluşturma (parametre alabilirler).
• Kalıtım (Inheritance / Extend): Bir seçicinin stillerini başka bir seçiciye kopyalama.
• Fonksiyonlar: Değerleri hesaplamak veya dönüştürmek için özel fonksiyonlar tanımlama.
• Parçalar (Partials) ve İçe Aktarma (Import): CSS kodunu daha küçük, yönetilebilir dosyalara bölme ve bunları ana dosyada birleştirme.
• Operatörler: Matematiksel işlemler yapma.

Örnek SCSS Kodu:

$ana-renk: #3498db;
$kenarlik-rengi: darken($ana-renk, 10%);
$varsayilan-bosluk: 1rem;

@mixin kutu-stili($arka-plan: white, $kenarlik: 1px solid $kenarlik-rengi) {
  padding: $varsayilan-bosluk;
  background-color: $arka-plan;
  border: $kenarlik;
  border-radius: 4px;
}

.mesaj {
  @include kutu-stili;
  margin-bottom: $varsayilan-bosluk;
  color: #333;

  &.uyari { /* İç içe kural ve & (üst seçiciye referans) */
    border-left: 5px solid red;
    background-color: lighten(red, 40%);

    a { /* İç içe kural */
       color: darken(red, 10%);
       text-decoration: none;

       &:hover { /* İç içe kural */
           text-decoration: underline;
       }
    }
  }
}

.buton {
   @extend .mesaj; /* .mesaj stillerini miras al */
   display: inline-block;
   background-color: $ana-renk;
   color: white;
}
                    

Ön işlemciler, büyük projelerde CSS kodunu organize etmek ve yönetmek için oldukça faydalıdır, ancak bir derleme adımı gerektirirler.

• CSS'i Ayrı Dosyalarda Tutun: Harici stil şablonları (.css dosyaları) kullanın. Bu, içeriği sunumdan ayırır ve bakımı kolaylaştırır.
• Mantıksal Gruplama: CSS dosyanızı mantıksal bölümlere ayırın (örn: temel stiller, yerleşim, bileşenler, yardımcı sınıflar) ve yorumlarla bu bölümleri belirtin.
• İsimlendirme Kuralları (Naming Conventions): Tutarlı ve anlamlı sınıf isimleri kullanın. BEM (Block, Element, Modifier), SMACSS (Scalable and Modular Architecture for CSS) veya OOCSS (Object-Oriented CSS) gibi metodolojiler, büyük projelerde sınıf isimlerini organize etmek için faydalı olabilir.
  • BEM Örneği: .card__title--large (Blok: card, Eleman: title, Değiştirici: large)
• Ön İşlemci Kullanımı: Büyük projeler için Sass veya Less gibi ön işlemciler kullanarak değişkenler, mixin'ler ve iç içe kurallar gibi özelliklerden yararlanın.
• Kod Tekrarından Kaçının (DRY - Don't Repeat Yourself): Ortak stilleri tekrar tekrar yazmak yerine, bunları temel sınıflarda veya mixin'lerde tanımlayın ve gerektiğinde kullanın veya genişletin.
• Stil Rehberi (Style Guide): Projenin tasarım dilini (renk paleti, tipografi, boşluklar, bileşenler) belgeleyen bir stil rehberi oluşturmak tutarlılığı artırır.

• Seçici Verimliliği: Tarayıcılar seçicileri sağdan sola doğru okur. Aşırı karmaşık veya gereksiz yere özgül seçiciler (örn: body #main ul li a.aktif) performansı düşürebilir. Mümkün olduğunca basit ve doğrudan seçiciler (özellikle sınıflar) kullanın. ID seçiciler hızlıdır ancak yeniden kullanılabilirliği sınırlar. Evrensel seçici (*) veya nitelik seçicileri (özellikle karmaşık olanlar) dikkatli kullanılmalıdır.
• Dosya Boyutunu Küçültme (Minification): Üretim ortamına göndermeden önce CSS dosyalarındaki gereksiz boşlukları, yorumları ve satır sonlarını kaldırarak dosya boyutunu küçültün. Bunun için çeşitli online araçlar veya build araçları (Webpack, Gulp vb.) kullanılabilir.
• CSS Dosyalarını Birleştirme: Çok sayıda küçük CSS dosyası yerine, mantıksal olarak gruplanmış daha az sayıda CSS dosyası kullanmak HTTP istek sayısını azaltır. Build araçları bu birleştirmeyi otomatik yapabilir.
• Kritik CSS (Critical CSS): Sayfanın ilk yüklenmede görünen ("above the fold") bölümünü stilize etmek için gereken minimum CSS'i HTML içine (<style>) gömüp, geri kalan CSS'i asenkron olarak yüklemek ilk görüntülenme süresini (First Contentful Paint) iyileştirebilir. Bu genellikle otomatize edilmiş araçlarla yapılır.
• Kullanılmayan CSS'i Kaldırma: Projede artık kullanılmayan CSS kurallarını tespit edip (tarayıcı geliştirici araçları veya özel araçlarla) kaldırmak dosya boyutunu azaltır.
• @import Yerine Kullanın: CSS içinde @import kullanmak, dosyaların paralel olarak indirilmesini engelleyebilir ve performansı düşürebilir. Birden fazla CSS dosyasını HTML'deki etiketleri ile bağlamak daha iyidir (veya dosyaları birleştirmek).

• Renk Kontrastı: Metin rengi ile arka plan rengi arasında yeterli kontrast olduğundan emin olun (WCAG yönergelerine göre). Görme zorluğu yaşayan kullanıcılar için bu çok önemlidir. Kontrast kontrol araçları kullanın.
• Odak Stilleri (Focus Styles): Klavye ile gezinen kullanıcılar için hangi elemanın odaklanıldığını açıkça gösteren belirgin :focus stilleri sağlayın. Varsayılan odak stillerini tamamen kaldırmaktan (outline: none;) kaçının veya yerine daha belirgin özel bir stil ekleyin.
• İçeriği Gizlerken Dikkat Edin: Elemanları görsel olarak gizlemek için display: none; veya visibility: hidden; kullanmak, genellikle ekran okuyucuların da içeriğe erişmesini engeller. Eğer içerik ekran okuyucular tarafından okunmalı ama görsel olarak gizlenmeliyse, özel "visually-hidden" veya "sr-only" (screen reader only) CSS teknikleri kullanılmalıdır (örn: elemanı ekran dışına konumlandırma).
• CSS ile İçerik Eklemekten Kaçının: content özelliği ile (::before, ::after) önemli içerik veya işlevsellik eklemekten kaçının, çünkü bu içerik ekran okuyucular tarafından her zaman algılanmayabilir. Dekoratif amaçlar veya yardımcı ikonlar için daha uygundur.
• Font Boyutları ve Okunabilirlik: Okunabilir font boyutları kullanın ve kullanıcıların metni yakınlaştırmasını engellemeyin (user-scalable=no kullanmaktan kaçının). Göreceli birimler (em, rem) kullanmak, kullanıcıların tarayıcı ayarlarıyla font boyutunu değiştirmesine olanak tanır.
• Duyarlı Tasarım: Sayfanın farklı ekran boyutlarında kullanılabilir ve okunabilir olduğundan emin olun.

CSS, web tasarımının temelini oluşturan dinamik ve sürekli gelişen bir dildir. Bu rehber, temel kavramlardan modern tekniklere kadar geniş bir bakış sunmayı amaçlamıştır. Flexbox, Grid, CSS Değişkenleri, geçişler ve animasyonlar gibi modern özellikler, daha önce hiç olmadığı kadar esnek ve güçlü tasarımlar oluşturmamızı sağlıyor.

Ancak CSS dünyası sürekli yenileniyor. Yeni seçiciler, özellikler ve modüller ekleniyor. Bu nedenle, MDN Web Docs, CSS-Tricks, Smashing Magazine gibi güvenilir kaynakları takip etmek, yeni teknikleri denemek ve bolca pratik yapmak önemlidir. En iyi uygulamaları takip ederek, temiz, yönetilebilir, performanslı ve erişilebilir CSS kodları yazabilirsiniz.

Unutmayın, harika bir web sitesi sadece iyi bir yapıdan (HTML) ibaret değildir; aynı zamanda etkileyici bir sunum (CSS) ve akıcı bir davranış (JavaScript) gerektirir. Bu üç teknolojiyi uyum içinde kullanarak kullanıcılarınıza unutulmaz deneyimler sunabilirsiniz.