CSS3 İleri Düzey Eğitimi

1. Modern CSS ve CSS Evrimi

• CSS3'ten modern CSS'e geçiş
• Güncel CSS standartları ve tarayıcı uygulaması
• CSS spesifikasyonunu ve tarayıcı desteğini anlama
• Artımsal geliştirme (Progressive enhancement)
• Özellik algılama ve zarif çöküş (graceful degradation)
• Modern CSS ekosistemini anlama

2. İleri Düzey Seçiciler (Selectors)

• İleri düzey özellik seçiciler (attribute selectors)
• Yapısal sözde sınıflar (structural pseudo-classes)
• :is()
• :where()
• :not()
• :has() ve ilişkisel seçiciler
• Seçici özgüllüğü (specificity)
• Büyük projelerde özgüllüğü yönetme
• Modern seçici en iyi uygulamaları

3. Modern Renkler ve Görsel Efektler

• RGB, HSL ve modern renk işlevleri
• color(), lab(), lch(), oklab() ve oklch()
• Göreceli renkler
• Şeffaflık ve alfa kanalları
• İleri düzey degradeler (gradients)
• Doğrusal, dairesel ve konik degradeler
• color-mix()
• Renk içler arası geçiş (interpolation)
• CSS filtreleri ve görsel efektler
• Modern temalaştırma ve renk sistemleri

4. CSS Özel Özellikleri (Custom Properties) ve Tasarım Sistemleri

• CSS değişkenleri / özel özellikler
• Değişkenler ve yedek (fallback) değerler
• Dinamik temalaştırma
• Bileşen düzeyinde özelleştirme
• CSS ile tasarım token'ları (design tokens)
• Açık ve koyu temalar oluşturma
• var(), @property ve tipli özel özelliklerin kullanımı
• Bakımı kolay CSS tasarım sistemleri kurma

5. CSS İç İçe Yerleştirme (Nesting) ve Kademelendirme (Cascade) Yönetimi

• Doğal (native) CSS iç içe yerleştirme
• İç içe yerleştirme sözdizimi ve en iyi uygulamalar
• CSS iç içe yerleştirme vs. ön işleyiciler
• Kademelendirme (Cascade) ve kalıtım (inheritance)
• @layer ile kademelendirme katmanları (cascade layers)
• Üçüncü taraf CSS'yi yönetme
• @scope ve kapsamlı stil kavramları
• Tahmin edilebilir CSS mimarileri kurma

6. Flexbox ile İleri Düzey Yerleşim (Layout)

• Flexbox temelleri tekrarı
• Ana eksen ve çapraz eksen
• İleri düzey hizalama
• Esnek boyutlandırma
• gap
• Sarma ve sıralama
• İç içe Flexbox yerleşimleri
• Yaygın Flexbox kalıpları
• Flexbox kullanarak duyarlı bileşenler

7. İleri Düzey CSS Grid

• Grid temelleri tekrarı
• Açık ve gizli grid'ler
• İleri düzey iz boyutlandırma (track sizing)
• minmax()
• auto-fit ve auto-fill
• min(), max() ve clamp()
• Grid alanları
• Duyarlı Grid yerleşimleri
• Karmaşık sayfa yerleşimleri
• CSS Subgrid
• Hizalı bileşen yerleşimleri için Subgrid kullanımı

8. Konteyner Sorguları ve Bileşen Tabanlı Duyarlılık

• Neden her zaman viewport medya sorguları yeterli değildir
• Konteyner sorgusu kavramları
• container-type
• @container
• Konteyner sorgusu uzunluk birimleri
• Bileşen odaklı duyarlı tasarım
• Konteyner sorgusu stil sorguları
• Yeniden kullanılabilir duyarlı bileşenler tasarlama
• Konteyner sorguları vs. medya sorguları

9. Modern Duyarlı Tasarım

• Önce mobil (mobile-first) tasarım
• Duyarlı kırılma noktaları (breakpoints)
• Akışkan tipografi
• Akışkan aralıklar (spacing)
• clamp()
• Modern viewport birimleri:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Dinamik viewport dikkatleri
• Konteyner göreli birimler
• Duyarlı görseller ve medya
• Gereksiz medya sorgularını azaltma

10. Mantıksal Özellikler ve Uluslararasılaştırma

• Mantıksal vs. fiziksel CSS özellikleri
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Mantıksal boyutlandırma
• Yazım modları (writing modes)
• Sağdan soldan (RTL) yerleşimler
• Uluslararası uyumlu arayüzler oluşturma

11. Modern Tipografi

• Duyarlı tipografi
• Değişken fontlar (variable fonts)
• Font yükleme hususları
• font-size-adjust
• Akışkan tip ölçekleri
• Metin sarma ve taşma
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Modern tipografi en iyi uygulamaları

12. Dönüşümler (Transforms), Geçişler ve Animasyonlar

• 2B ve 3B dönüşümler
• Geçişler (Transitions)
• Keyframe animasyonları
• Zamanlama fonksiyonları (timing functions)
• Animasyon bileştirme (composition)
• Dönüşüm performansı
• Kaydırmaya dayalı animasyonlar (scroll-driven animations)
• animation-timeline
• Görünürlük zaman çizelgesi (view-timeline) kavramları
• Hareket erişilebilirliği
• prefers-reduced-motion
• Performans hususları

13. Modern CSS UI Özellikleri

• Doğal CSS diyaloğu ve pop-over'lar
• Etkileşimli UI durumlarını stilize etme
• :popover-open
• :modal
• :focus-visible
• :target
• Form durum stilizasyonu
• accent-color
• appearance
• field-sizing
• Modern form denetimleri
• Erişilebilir yalnızca CSS etkileşimleri oluşturma

14. İleri Düzey CSS Fonksiyonları

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Göreceli renk fonksiyonları
• Akışkan yerleşimler için fonksiyonların birleştirilmesi
• Pratik duyarlı tasarım kalıpları

15. CSS Ön İşleyicileri (Pre-processors)

• CSS ön işleyicileri genel bakış
• LESS
• Değişkenler ve karışımlar (mixins)
• İç içe stiller
• Fonksiyonlar ve işlemler
• LESS vs. modern doğal CSS
• Bir ön işleyicinin hâlâ faydalı olduğu durumlar
• Ön işleyici özelliklerini doğal CSS'e taşıma

16. Tasarım ve Erişilebilirlik Hususları

• Modern CSS en iyi uygulamaları
• Erişilebilirlik öncelikli stilizasyon
• Klavye odağı durumları (focus states)
• :focus-visible
• Azaltılmış hareket (reduced motion)
• Kontrast ve renk hususları
• Duyarlı metin ve içerik
• Görsellerin üzerinde metin
• Erişilebilir duyarlı bileşenler
• Artımsal geliştirme

17. CSS Performansı ve Bakım Kolaylığı

• CSS karmaşıklığını azaltma
• Gereksiz özgüllükten kaçınma
• Bakım kolaylığı için kademelendirme katmanları
• Yeniden kullanılabilir yardımcı (utility) ve bileşen kalıpları
• CSS kapsama (containment) kavramları
• content-visibility
• Render etme ve yerleşim performansı
• Yerleşim kaymalarını (layout shifts) azaltma
• Büyük CSS kod tabanlarını düzenleme
• Modern tarayıcı geliştirici araçlarıyla CSS hata ayıklama

18. Pratik Modern CSS Projesi

Katılımcılar aşağıdakileri içeren duyarlı modern bir web arayüzü geliştirir:

• CSS Grid
• Flexbox
• Subgrid
• Konteyner sorguları
• CSS iç içe yerleştirme
• Özel özellikler
• Kademelendirme katmanları
• Modern seçiciler
• Akışkan tipografi
• Modern viewport birimleri
• Duyarlı tasarım
• Modern renkler ve degradeler
• Animasyonlar ve geçişler
• Erişilebilirlik hususları
• Performans en iyi uygulamaları