Modern CSS Rehberi: Subgrid, Nesting ve Container Queries

Modern Web ve CSS Trendleri: Yerel Çözümler

Pre-processor ve harici JavaScript paketleri gereksiz kod yükü yaratır. Modern web standartları, bu ihtiyaçları yerel CSS API seviyesine indirdi. Dijital ajans projelerinde performans ve bakım kolaylığı sağlayan üç temel özellik:

• Native CSS Nesting: Sass/Less olmadan iç içe kurallar.
• Container Queries: Viewport yerine kapsayıcı boyutuna bağlı duyarlı tasarım.
• CSS Subgrid: İç içe ızgaralarda üst ızgara hatlarını doğrudan miras alma.

Adım 1: Native CSS Nesting ile Sade Stil Dosyaları

PostCSS veya Sass derleyicisi olmadan hiyerarşik yapı kurma adımı. Tarayıcı desteği tam.

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

  & .title {
    font-size: 1.25rem;
  }

  &:hover {
    border-color: #000;
  }
}

İpucu: Doğrudan öğe seçicilerinde & kullanmak selector karmaşıklığını ve parse hatalarını önler.

Adım 2: Container Queries (@container) ile Bileşen Tasarımı

Viewport bağımlılığını kaldır. Bileşeni bulunduğu alanın genişliğine göre yeniden boyutlandır.

.card-container {
  container-type: inline-size;
  container-name: sidebar-card;
}

@container sidebar-card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
  }
}

Konteyner tanımla: container-type: inline-size. Kuralı yaz: @container (min-width: ...). JS ResizeObserver yerine tarayıcı optimizasyonu kullan.

Adım 3: CSS Subgrid ile Kart Hizalama

Farklı uzunluktaki dinamik içerikleri aynı hizada tutmak için alt grid tanımla.

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

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

Ana grid satırlarını alt elemana aktarır. Başlık, gövde metni ve butonlar satır bazında kusursuz hizalanır.

Dijital Ajanslar İçin En İyi Pratikler

• Derleyici bağımlılıklarını kaldır, CSS boyutunu azalt.
• Media queries yerine bileşen düzeyinde Container Queries tercih et.
• Eski tarayıcı desteği için @supports (grid-template-rows: subgrid) ile kademeli geliştirme (progressive enhancement) uygula.