Modern Web Tasarımında Yeni Standartlar

Modern web projelerinde gereksiz build araçları ve JS bağımlılıklarını kaldırın. Dijital ajans iş akışlarında native CSS özellikleri performans ve bakım kolaylığı sağlar. 2024 ve sonrası CSS trendleri tarayıcı içinde yerleşik çözümler sunar.

Adım 1: Native CSS Nesting Uygulama

Sass/SCSS derleyici ihtiyacını bitirin. Tarayıcı native iç içe yazımı destekler.

Uygulama:

Ana seçici içine alt seçicileri doğrudan yerleştirin. Sözde sınıflar (pseudo-classes) için & kullanın.

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

  & h3 {
    font-size: 1.25rem;
    margin: 0;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

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

Media query viewport izler; container query elemanın kendi genişliğini izler. Bileşen bağımsız çalışır.

Uygulama:

Kapsayıcıyı tanımlayın, ardından bileşeni kapsayıcı boyutuna göre stillendirin.

/* 1. Kapsayıcıyı belirle */
.card-wrapper {
  container-type: inline-size;
  container-name: card-box;
}

/* 2. Kapsayıcı boyutuna göre kural yaz */
@container card-box (min-width: 450px) {
  .card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
  }
}

Adım 3: CSS Subgrid ile İç Elemanları Eşit Hizalama

Farklı metin uzunluğuna sahip kartlarda başlık, açıklama ve butonları aynı satır hizasında tutar. JS ölçümlerini gereksiz kılar.

Uygulama:

Ebeveyn grid sisteminin satır yapısını çocuk elemanlara aktarın.

/* Ebeveyn Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: auto 1fr auto;
  gap: 1.5rem;
}

/* Alt Eleman - Subgrid */
.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Performans ve Uygulama İpuçları

Sıfır Build Yükü: Native nesting ile Sass konfigürasyonlarını projeden silin.
Bileşen Yeniden Kullanılabilirliği: Container queries ile aynı kart bileşenini sidebar veya ana içerik alanında sorunsuz kullanın.
Daha Az JS: Subgrid ile dinamik yükseklik hesaplayan JS kütüphanelerini kaldırın.

Modern web standartları native çözümlere odaklanır. Dijital ajans projelerinde daha az bağımlılık, daha hızlı sayfa yüklemesi demektir.