Modern CSS Rehberi: Subgrid, CSS Nesting ve Container Queries Kullanımı

Modern Web İçin Yerel CSS Gücü

CSS hızla gelişti. Preprocessor ve JavaScript tabanlı layout hesaplama ihtiyacı bitti. Modern web standartları, native araçlarla daha az kod ve yüksek performans sağlar. Bu rehber, dijital ajans projelerinde production-ready modern CSS özelliklerini uygulama adımlarını içerir.

1. Adım: Native CSS Nesting Kurulumu

SASS/SCSS derleyicisi olmadan hiyerarşik seçici yazımı. DOM ağacı ile stil dosyası senkron kalır, gereksiz CSS sınıfları elenir.

Kullanım:

.card {
  background: #fff;
  padding: 1.5rem;

  & .card-title {
    font-size: 1.25rem;
    color: #111;
  }

  &:hover {
    border-color: #0066cc;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

İpucu: & seçicisi iç içe geçmiş sözdizimini ana elemana bağlar. Ekstra derleme adımı gerektirmez.

2. Adım: Container Queries ile Bileşen Bazlı Duyarlılık

Viewport yerine ana kapsayıcı genişliğine göre stil tanımlama. Bileşen sidebar içine de konsa, ana ızgaraya da konsa kendi alanına göre şekil alır.

Uygulama:

/* 1. Kapsayıcıyı tanımla */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 2. Kapsayıcı boyutuna göre alt elemanı biçimlendir */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
}

Ekran genişliğine bağımlılık kalkar; tam modüler dijital ajans bileşen kütüphanesi kurulur.

3. Adım: CSS Subgrid ile İçerik Hizalama

Farklı kartlardaki başlık veya butonların aynı satır çizgisine oturması sorunu. Standart Grid alt elemanları bağımsızdır; Subgrid ise ebeveyn grid çizgilerini miras alır.

Uygulama:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

/* Tüm kart başlıkları, içerikleri ve butonları otomatik hizalanır */
.card h3 { margin: 0; }
.card p { margin: 0; }
.card button { align-self: end; }

Modern Web Trendleri: Performans ve Uyumluluk Notları

• JS Bağımlılığını Azalt: ResizeObserver yerine Container Queries kullanın.
• Temiz Kod: SASS bağımlılıklarını kaldırıp native Nesting'e geçin.
• Baseline Kontrolü: Üç özellik de tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) tam desteklenir.