FSD FRONT-END DEVELOPMENT: ADVANCED CSS BROWSER FEATURES EĞİTİMİ

Tarayıcının en yeni CSS gücünü kullanın

Cascade layers, :has, container query, subgrid, oklch ve scroll animasyonlarıyla modern CSS

FSD Front-end Development: Advanced CSS Browser Features Eğitimi, tarayıcıların son yıllarda getirdiği güncel CSS özelliklerini derinlemesine ele alır.

4 gün İleri Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Modern CSS mimarisinden subgrid'e, yeni renk uzaylarından scroll ve view transition'a akış

FSD Front-end Development: Advanced CSS Browser Features Eğitimi, tarayıcıların son yıllarda getirdiği güncel CSS özelliklerini derinlemesine ele alır. Katılımcılar cascade layers, :has ve :is gibi modern seçicileri, CSS nesting ve logical properties'i, container query ve subgrid ile ileri yerleşimi öğrenir. Program oklch ve color-mix gibi yeni renk fonksiyonlarını, scroll-driven animasyonları, view transition API'sini ve anchor positioning ile popover özelliklerini kapsar.

Süre ve Format

4 Gün. Her gün dört modül; güncel CSS özellikleri gerçek arayüz bileşenleri üzerinde uygulanıp tarayıcı desteğiyle birlikte değerlendirilir.

Seviye

İleri Seviye — Cascade layers, :has, container query, subgrid, modern renk ve scroll animasyonlarıyla güncel CSS

Öğrenme Metodu

Her modülde yeni CSS özelliği canlı bir bileşen üzerinde uygulanır; tarayıcı desteği ve zarif bozulma örneklerle denetlenir.

Neden Bu Eğitim?

🧱Modern mimari

Cascade layers, custom properties ve logical properties ile büyüyen projelerde sürdürülebilir ve öngörülebilir CSS mimarisi kurarsınız.

🎨Yeni renk gücü

oklch, color-mix ve relative color ile daha geniş ve tutarlı renk uzaylarında erişilebilir tema sistemleri tasarlarsınız.

✨JavaScript'siz hareket

Scroll-driven animasyonlar ve view transition API'siyle çoğu geçişi ve efekti JavaScript'e ihtiyaç duymadan CSS ile kurarsınız.

Anahtar Konular

ileri css eğitimimodern css eğitimicontainer query eğitimicss grid subgrid eğitimicss has seçicioklch renk eğitimiscroll driven animasyoncascade layers eğitimiön yüz geliştirme eğitimiview transition api
“Modern CSS, eskiden JavaScript gerektiren işleri doğrudan tarayıcıya devrediyor; bu özellikleri bilen geliştirici hep bir adım önde olur.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam

1
Sağlam CSS

Seçiciler, kutu modeli, Flexbox ve Grid'e hakimiyet beklenir; eğitim bunların ileri özelliklerine odaklanır.

2
Özgüllük bilgisi

Cascade, özgüllük ve kalıtım kavramlarını bilmek cascade layers ve :has konularından verim için gereklidir.

3
Geliştirici araçları

Tarayıcı geliştirici araçlarıyla stil denetimi ve özellik desteğini inceleme örneklerde sıkça kullanılır.

4
Güncel tarayıcı

Yeni özellikleri denemek için güncel bir tarayıcı ve VS Code gibi bir editör gereklidir; canlı önizleme kullanılır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı CSS custom properties ile tema kurar, cascade layers ile özgüllüğü yönetir, :has ve :is gibi modern seçicileri ve logical properties ile yön bağımsız stili kullanır.
Modül 1
CSS Custom Properties
  • Değişken tanımı ve var fonksiyonuyla kullanımı
  • Kapsam ve kalıtım yoluyla değer çözümleme
  • Varsayılan değer ve geri dönüş parametresi
  • JavaScript ile değişkeni okuma ve değiştirme
  • Tema ve tasarım tokenlarının değişkenle kurulması
  • calc içinde değişkenle dinamik hesaplama
Modül 2
Cascade Layers Mimarisi
  • @layer ile katman tanımlama ve sıralama
  • Katmanların özgüllüğü nasıl etkilediği
  • Reset, temel ve bileşen katmanı düzeni
  • import ile katmana stil yükleme
  • Katmansız stilin önceliği ve davranışı
  • Büyük projede katmanlı mimari stratejisi
Modül 3
Modern Seçiciler
  • :has ile ebeveyn ve ilişki tabanlı seçim
  • :is ile seçici gruplarını sadeleştirme
  • :where ile sıfır özgüllüklü gruplama
  • :not ile gelişmiş dışlama desenleri
  • :has ile form ve bileşen durum stilleri
  • Seçici özgüllüğünün bilinçli yönetimi
Modül 4
Nesting ve Logical Properties
  • Yerel CSS nesting ile iç içe kural yazımı
  • & referansıyla ebeveyn seçiciye bağlanma
  • margin-inline ve padding-block mantığı
  • inset ve logical konumlandırma özellikleri
  • Yazım yönüne göre uyarlanan yön bağımsız stil
  • Çok dilli arayüzlerde logical property avantajı
Günün hedefiKatılımcı subgrid ile iç içe ızgaraları hizalar, container query ile bileşen bazlı tasarım kurar, aspect-ratio ve modern Grid özellikleriyle esnek ve hizalı yerleşimler üretir.
Modül 1
Subgrid ve İç İçe Izgara
  • subgrid ile ebeveyn ızgara hatlarını miras alma
  • İç ve dış ızgaranın hat hizasını koruma
  • Kart içeriğinin sütunlar arası hizalanması
  • Satır ve sütunda subgrid kullanımı
  • subgrid ile karmaşık form düzeni kurma
  • subgrid ve klasik Grid arasındaki fark
Modül 2
Container Query Kullanımı
  • container-type ve container-name tanımı
  • Konteyner boyutuna göre bileşen uyarlama
  • Media query ile container query farkı
  • cqw, cqi ve cqb konteyner birimleri
  • Yeniden kullanılabilir responsive bileşen deseni
  • Style container query ile duruma tepki
Modül 3
Oran ve Esnek Boyut
  • aspect-ratio ile görsel ve kutu oranı
  • min, max ve clamp ile akışkan boyut
  • minmax ve fit-content ile esnek sütun
  • auto-fit ve auto-fill ile dinamik ızgara
  • Intrinsic boyutlandırma ve içerik uyumu
  • Oran koruyan medya ve yer tutucu düzeni
Modül 4
İleri Grid ve Hizalama
  • Hat isimleri ve isimli ızgara alanları
  • grid-auto-flow ile yoğun yerleşim
  • place-content ve place-items kısaltmaları
  • gap ve satır boşluğunun yönetimi
  • Grid ve Flexbox'ın birlikte kullanımı
  • Masonry benzeri düzenlere güncel yaklaşım
Günün hedefiKatılımcı oklch ve lch gibi modern renk uzaylarını, color-mix ve relative color'ı, variable fonts'u ve backdrop-filter, clip-path, blend mode gibi görsel efektleri uygular.
Modül 1
Modern Renk Uzayları
  • oklch ve lch ile algısal tutarlı renk
  • Geniş gamut ve display-p3 renk desteği
  • hsl ve rgb ile modern uzayların farkı
  • Renk tonu, parlaklık ve kroma ayrımı
  • Erişilebilir kontrast için parlaklık kontrolü
  • color-scheme ile açık ve koyu tema uyumu
Modül 2
color-mix ve Relative Color
  • color-mix ile iki rengi oranla karıştırma
  • Relative color sözdizimiyle renk türetme
  • Tek ana renkten palet üretme deseni
  • Hover ve durum renklerini dinamik hesaplama
  • Değişkenlerle tema renk sistemi kurma
  • Şeffaflık ve alfa kanalı yönetimi
Modül 3
Variable Fonts ve Tipografi
  • Variable font ekseni ve font-variation-settings
  • font-weight ve genişliğin akışkan ayarı
  • Akışkan tipografi için clamp ile ölçek
  • text-wrap balance ve pretty ile satır dengesi
  • font-display ile yükleme davranışı
  • Modüler ölçekle başlık hiyerarşisi
Modül 4
Filtreler ve Görsel Efektler
  • backdrop-filter ile cam efekti ve bulanıklık
  • clip-path ile özel şekil kırpma
  • mask ile görsele maske uygulama
  • mix-blend-mode ve background-blend-mode
  • filter ile parlaklık, kontrast ve gölge
  • Efektlerin performans maliyetini değerlendirme
Günün hedefiKatılımcı scroll-driven animasyonlarla kaydırmaya bağlı efektler kurar, view transition API ile sayfa geçişleri yapar, @property ile tiplenmiş değişken ve anchor positioning ile popover tasarlar.
Modül 1
Scroll-Driven Animasyonlar
  • animation-timeline ile kaydırma zaman çizelgesi
  • scroll ve view progress timeline farkı
  • Öğe görünürlüğüne bağlı animasyon tetikleme
  • İlerleme çubuğu ve paralaks efekti kurma
  • @keyframes ile kaydırma tabanlı geçiş
  • JavaScript'siz scroll efektinin avantajı
Modül 2
View Transition API
  • view-transition-name ile öğe eşleştirme
  • Aynı sayfada durum geçişi animasyonu
  • Çok sayfalı geçiş için tarayıcı desteği
  • ::view-transition sözde öğeleriyle stil
  • Geçişi JavaScript ile tetikleme
  • Zarif bozulma ile desteksiz tarayıcı
Modül 3
Tiplenmiş Değişken ve Geçiş
  • @property ile custom property tipini tanımlama
  • syntax, inherits ve initial-value alanları
  • Gradyan ve açı değişkenlerini animasyonlama
  • transition ile ara değer hesaplanması
  • Interpolasyon için tiplenmiş değişken gereği
  • Dinamik tema geçişlerinde kullanım
Modül 4
Anchor Positioning ve Popover
  • anchor-name ile bağlanma noktası tanımı
  • position-anchor ile öğeyi konumlandırma
  • anchor fonksiyonuyla kenar hizalaması
  • popover niteliğiyle açılır içerik kurma
  • Üst katman ve z-index'siz yığılma
  • Tooltip ve menünün modern kurulumu

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Cascade layers

@layer ile stil katmanlarını sıralar, özgüllüğü öngörülebilir biçimde yönetir ve büyük projelerde sürdürülebilir CSS mimarisi kurarsınız.

✅
Modern seçiciler

:has, :is ve :where ile ilişki tabanlı ve sadeleştirilmiş seçimler yapar, özgüllüğü bilinçli kontrol ederek temiz kurallar yazarsınız.

✅
Subgrid düzeni

Subgrid ile iç içe ızgaraların hatlarını hizalar, kart ve form içeriklerini sütunlar arasında tutarlı biçimde yerleştirirsiniz.

✅
Container query

Container query ile bir bileşeni içinde bulunduğu konteynerin boyutuna göre uyarlayan, gerçekten yeniden kullanılabilir bileşenler kurarsınız.

✅
Modern renk

oklch, color-mix ve relative color ile algısal tutarlı, geniş gamutlu ve erişilebilir renk ve tema sistemleri tasarlarsınız.

✅
Görsel efektler

backdrop-filter, clip-path, mask ve blend mode ile performansı gözeterek etkileyici görsel efektler ve cam arayüzler üretirsiniz.

✅
Scroll animasyon

Scroll-driven animasyonlar ve view transition API ile kaydırmaya bağlı efektleri ve sayfa geçişlerini JavaScript'siz kurarsınız.

✅
Modern etkileşim

@property, anchor positioning ve popover ile tiplenmiş değişkenler, akıllı konumlandırma ve üst katman arayüzleri geliştirirsiniz.

Kimler İçin Uygundur?

  • CSS temelini sağlam bilen
  • tarayıcıların getirdiği güncel özellikleri üretimde kullanmak isteyen ileri düzey ön yüz geliştiriciler
  • modern CSS mimarisini kurmak isteyen arayüz ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
CSS temelini sağlam bilen, Flexbox ve Grid'e hakim olan ve tarayıcıların getirdiği güncel özellikleri üretimde kullanmak isteyen ileri düzey ön yüz geliştiriciler için uygundur. Modern CSS mimarisi kurmak isteyen arayüz ekipleri de hedef kitledir.
Bu eğitim responsive tasarım eğitiminden farklı mı?
Evet. Bu eğitim responsive temelleri değil, tarayıcıların son dönemde getirdiği ileri özellikleri konu alır: cascade layers, :has, subgrid, container query, modern renk uzayları, scroll-driven animasyonlar ve view transition gibi güncel yetenekler. Sağlam bir CSS temeli ön koşuldur.
Bu özelliklerin tarayıcı desteği yeterli mi?
Eğitimde her özellik güncel tarayıcı desteğiyle birlikte ele alınır ve @supports ile zarif bozulma, yani desteklemeyen tarayıcıda makul bir geri dönüş sağlama yaklaşımı uygulanır. Böylece yeni özellikleri üretimde güvenle kullanmayı öğrenirsiniz.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Güncel CSS özellikleri gerçek arayüz bileşenleri üzerinde uygulanır. Yüz yüze veya online yapılabilir; içerik kurumun tasarım sistemine ve kullandığı tarayıcı yelpazesine göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek bileşenleri belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. FSD Front-end Development: Advanced CSS Browser Features Eği Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
Seviyeİleri Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSCSS Responsive Web Design Training Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Responsive Web Design Training Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Saf CSS ile duyarlı web tasarımı eğitimi. Mobil öncelik, media query, Flexbox, CSS Grid, srcset, clamp ve container query uygulamalı anlatılır.

Detayları Gör →
HTML ve CSSDatabases, Bootstrap, & jQuery in Web Design Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Databases, Bootstrap, & jQuery in Web Design Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Bootstrap ızgarası ve bileşenleri, jQuery ile DOM ve AJAX, ilişkisel veritabanı ve SQL ile dinamik web sayfası kurmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSDefensive Coding for JavaScript and HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Defensive Coding for JavaScript and HTML Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Girdi doğrulama, güvenli DOM, XSS önleme ve dayanıklı hata yönetimiyle savunmacı JavaScript ve HTML kodu yazmayı öğreten uygulamalı eğitim.

Detayları Gör →
HTML ve CSSDefensive Coding Fundamentals for JavaScript and HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Defensive Coding Fundamentals for JavaScript and HTML Eğitimi

3 günTemelOnline / Yüz Yüze / Hibrit

Katı mod, basit girdi kontrolü, temel hata yakalama ve güvenli DOM alışkanlıklarıyla savunmacı programlamaya giriş yapan temel seviye eğitim.

Detayları Gör →
HTML ve CSSError Handling for JavaScript and HTML Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Error Handling for JavaScript and HTML Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

try/catch, özel hatalar, Promise ve async/await hata yönetimi, global yakalama ve izleme ile dayanıklı JavaScript yazmayı öğreten eğitim.

Detayları Gör →
HTML ve CSSExtending CSS with Less Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Extending CSS with Less Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Less değişkenleri, mixin, iç içe yazım, guard, fonksiyon ve derleme hattıyla ölçeklenebilir ve sürdürülebilir CSS yazmayı öğreten uygulamalı eğitim.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn