Modern Web ve CSS Trendleri

Pre-processor ve JS tabanlı responsive hack devri bitti. Tarayıcı desteği tam. Dijital ajans projelerinde hız ve kod sadeliği sağlar. Bu rehber üç temel özelliği adım adım inceler.

Adım 1: CSS Nesting ile Native Hiyerarşi Kurma

Sass/SCSS derleyici gerekmez. Native nesting CSS dosyalarını küçültür, CSSOM hızlandırır.

Sözdizimi ve Kullanım

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

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

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

Kural: & seçicisi üst sınıfı bağlar.
Avantaj: Ek build aracı gereksiz. Doğrudan tarayıcı işler.

Adım 2: Container Queries (@container) ile Bileşen Odaklı Duyarlılık

Viewport (@media) tabanlı tasarım bileşeni kısıtlar. Container Queries, bileşeni ana kapsayıcısının genişliğine göre boyutlandırır.

Uygulama Adımları

1. Kapsayıcıyı container olarak tanımla:

.sidebar, .main-content {
  container-type: inline-size;
  container-name: card-wrapper;
}

2. Boyut kuralını bileşene uygula:

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

Modern web mimarisinde bileşen her yere taşınabilir olmalıdır. Container Queries bu esnekliği sağlar.

Adım 3: CSS Subgrid ile İç İçe Grid Hizalama

Geleneksel CSS Grid, iç elemanları (child elements) dış grid çizgilerine hizalayamaz. Subgrid üst grid çizgilerini alt grid elemanlarına aktarır.

Eşit Kart Yükseklikleri İçin Subgrid

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

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

Kart başlığı, içerik ve buton dinamik içerikte dahi aynı hizada kalır.

Dijital Ajans Projelerinde Fallback Stratejisi

Modern CSS özellikleri geriye dönük uyumluluk isterse @supports ile sarılır:

@supports (grid-template-rows: subgrid) {
  .card-item {
    grid-template-rows: subgrid;
  }
}

Özet

Üç özellik harici araç bağımlılığını yok eder. Az kod, hızlı render, kolay bakım sağlar.