Yan Menü Daralınca Kendini Toparlayan Yönetim Paneli: Container Query, cqw Birimleri ve Style Query ile Akıllı Widget'lar

FreakyMorex · Dün 13:12 da

Konu İçeriği — Hızlı Bakış ( cPanel / Web • ⏱ ~7 dk okuma • Kod: HTML)
01. 4. Adım: Widget'a Üç Farklı Görünüm Vermek ve Yazı Boyutunu cqw Birimiyle Kapsayıcıya Bağlamak
02. 7. Adım: Canlıya Almadan Önce Kontrol Listesi ve Pratik İpuçları

Yan menüyü açıp kapattığınızda başlıktaki düğmeleri, widget'ları ve yazı boyutlarını kendiliğinden uyduran bir yönetim paneli kuruyoruz

Yönetim paneli yaptığınızı düşünün: solda açılıp kapanan bir yan menü, üstte "Ara" ve "Filtre" düğmeleri, altta istatistik kutuları var. Yan menüyü kapattınız, içerik alanı genişledi, ama düğmelerin yazıları hâlâ gizli. Çünkü yazıları gizleyen kural pencere genişliğine bakan bir media query. Pencere değişmedi, yalnızca içeriğin bulunduğu alan değişti ve media query bunu göremiyor.

Bu konuda aynı paneli container query ile baştan kuruyoruz. Bileşenler pencereye değil, içinde durdukları kutunun genişliğine bakacak. Aynı yolda container birimlerini (cqw), style query'yi ve en sık düşülen üç tuzağı da göreceğiz.

1. Adım: Panelin HTML İskeletini Hazırlamak ve Yan Menü ile İçerik Alanını Birer Kapsayıcı Olarak Tanımlamak

Önce iskelet. Yan menüde bir daraltma düğmesi, başlıkta iki eylem düğmesi, altında da widget'lar var. Her ikonun yanındaki yazıyı ayrı bir span içine koyuyoruz ki CSS ile ayrı ayrı yönetebilelim.

HTML:

<div class="panel">
  <aside class="yan-menu" id="yanMenu">
    <button type="button" id="menuDugme" aria-expanded="true">Menü</button>
    <a href="#" class="menu-ogesi"><span class="ikon">P</span><span class="etiket">Panel</span></a>
    <a href="#" class="menu-ogesi"><span class="ikon">S</span><span class="etiket">Siparişler</span></a>
  </aside>
  <main class="icerik">
    <header class="ust-bar">
      <h1>Sipariş #2301</h1>
      <button type="button" class="eylem"><span class="ikon">A</span><span class="eylem-etiket">Ara</span></button>
      <button type="button" class="eylem"><span class="ikon">F</span><span class="eylem-etiket">Filtre</span></button>
    </header>
    <section class="sutun">
      <article class="widget">
        <span class="ikon">₺</span>
        <div><p class="aciklama">Toplam satış</p><strong class="deger">405</strong></div>
      </article>
    </section>
  </main>
</div>

Şimdi kapsayıcıları tanımlıyoruz. container kısaltması ad ve türü tek satırda veriyor. Tür olarak inline-size seçiyoruz, çünkü yalnızca genişliğe bakacağız.

CSS:

.panel { display: flex; min-height: 100vh; }

.yan-menu {
  container: menu / inline-size;
  width: 220px;
  transition: width 0.3s;
}
.yan-menu.dar { width: 56px; }

.icerik {
  container: icerik / inline-size;
  flex: 1;
  min-width: 0; /* flex çocuğu küçülebilsin */
}

Yan menünün genişliği açıkça verilmiş, içerik alanının genişliği ise flex'ten geliyor. Bu ayrıntı ileride lazım olacak. min-width: 0 satırı da önemli, bu olmadan flex çocuğu içeriğinden küçülmeyebilir.

2. Adım: Başlıktaki Arama ve Filtre Düğmelerinin Yazılarını Pencereye Değil İçerik Alanının Genişliğine Göre Göstermek

Varsayılan durumda yalnızca ikon görünsün, yer varsa yazı da çıksın. @container bloğunda kapsayıcının adını yazıyoruz; böylece iç içe birden fazla kapsayıcı olsa bile doğru olanı sorgulamış oluyoruz.

CSS:

.eylem-etiket { display: none; }
.eylem { padding: 6px; }

@container icerik (min-width: 560px) {
  .eylem-etiket { display: inline; }
  .eylem { padding: 6px 14px; }
}

Yan menü kapanıp .icerik 560px'i geçtiği anda yazılar kendiliğinden belirir. Pencere genişliği hiç değişmemiş olsa bile.

3. Adım: Daralt Düğmesini addEventListener ile Bağlamak ve Menü Etiketlerini Menünün Kendi Genişliğine Göre Saklamak

Menü etiketleri için ayrı bir sorgu yazmaya gerek yok. Menü zaten kapsayıcı olduğundan etiketi onun genişliğine bağlıyoruz. JavaScript yalnızca bir sınıfı açıp kapatıyor.

JavaScript:

const menu = document.querySelector('#yanMenu');
const dugme = document.querySelector('#menuDugme');

function menuDegistir() {
  const dar = menu.classList.toggle('dar');
  dugme.setAttribute('aria-expanded', String(!dar));
}

dugme.addEventListener('click', menuDegistir);

CSS:

.menu-ogesi .etiket {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s;
}

@container menu (min-width: 120px) {
  .menu-ogesi .etiket { opacity: 1; width: auto; }
}

Menü 56px'e inince etiketler kayboluyor, 120px'in üstünde geri geliyor. Geçiş animasyonu sırasında genişlik eşiği geçtiğinde sorgu devreye giriyor, ekstra bir hesap yok.

4. Adım: Widget'a Üç Farklı Görünüm Vermek ve Yazı Boyutunu cqw Birimiyle Kapsayıcıya Bağlamak

Widget'lar bir sütunun içinde duruyor. Sütun dar olabilir, geniş olabilir; kullanıcı panelde sütun sayısını değiştirebiliyor diye düşünün. Sütunu kapsayıcı yapıp widget'ı iki eşikle üç görünüme ayırıyoruz.

CSS:

.sutun { container: sutun / inline-size; display: grid; gap: 0.75rem; }

.widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* cqw: kapsayıcı genişliğinin %1'i */
.deger { font-size: clamp(1rem, 0.6rem + 4cqw, 1.75rem); }

@container sutun (inline-size < 150px) {
  .widget { flex-direction: column; text-align: center; }
  .aciklama { display: none; }
}

@container sutun (inline-size > 280px) {
  .widget { padding: 1rem; background: #fff; border-radius: 8px; }
  .aciklama { font-size: 1.1rem; }
}

cqw en yakın üst kapsayıcının genişliğinin yüzde birine eşit. Yani .deger sütun genişledikçe büyüyor, clamp() ile de alt ve üst sınırı var. Aynı mantıkla boşluklar için de kullanabilirsiniz. cqh, cqi, cqb, cqmin ve cqmax birimleri de var.

5. Adım: Style Query ile Widget Sayısı Çoğaldığında Geniş Görünümü Kapatmak has() ve Özel Değişken Birlikte)

Geniş görünüm tek widget için güzel, ama sütunda beş ya da daha fazla widget olursa kalabalık görünüyor. Bunu sayıya göre ayarlamak için :has() ile bir özel değişken set edip style query ile okuyoruz.

CSS:

.sutun { --yogun: false; }

/* Beş ve üzeri widget varsa işaretle */
.sutun:has(.widget:nth-last-child(n + 5)) { --yogun: true; }

@container sutun (inline-size > 430px) and style(--yogun: false) {
  .widget {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }
}

Size ve style koşulları and ile birleşiyor. Style query özel değişkeni kapsayıcının kendisinde okur, sonuç da altındaki elemanlara uygulanır. Bu yüzden değişkeni .sutun üzerinde tutup .widget'ı stilledik.

6. Adım: Container Query'de En Sık Düşülen Üç Tuzak: Sıfıra Çöken Kapsayıcı, Kendini Sorgulama ve Seçicisiz Kural

Birincisi: inline-size kapsayıcılar genişliği içeriğinden alamaz. Başlıktaki bir menüyü kapsayıcı yaptıysanız ve genişliği içeriğe bırakırsanız sıfıra çöker. Çözüm, alanı doldurmasını söylemek.

İkincisi: Bir eleman kendi kapsayıcı sorgusuyla stillenemez. Sorgu her zaman bir üst kapsayıcıya bakar, bu yüzden kapsayıcı ile stillenen eleman farklı olmalı.

CSS:

/* Çöker: genişliği içerikten gelemez */
.nav { container: nav / inline-size; display: flex; }
/* Düzeltme: alanı kendisi doldursun */
.nav { flex: 1; }

/* ÇALIŞMAZ: kapsayıcı kendini stilleyemez */
.ust-bar { container: ust / inline-size; }
@container ust (min-width: 700px) {
  .ust-bar { background: #fefefe; }
}

/* ÇALIŞIR: ek sarmalayıcı kapsayıcı olur */
.ust-sarma { container: ust / inline-size; }
@container ust (min-width: 700px) {
  .ust-bar { background: #fefefe; }
}

Üçüncüsü: Bazı örneklerde @container bloğunun içine seçici yazmadan doğrudan background-color gibi bildirimler yazıldığını görebilirsiniz. Bu çalışmaz; bildirimler her zaman bir seçicinin içinde olmalı. Aynı şekilde bir style query ile "ben şu değişkeni açıyorum" demek, kapsayıcının kendisinde işe yaramaz; değişkeni altındaki bir elemanda tanımlamanız gerekir.

7. Adım: Canlıya Almadan Önce Kontrol Listesi ve Pratik İpuçları

Size container query'leri güncel tüm tarayıcılarda çalışıyor. Style query ise daha yeni; yayına almadan önce hedeflediğiniz tarayıcılarda desteğini kontrol edin. Desteklenmeyen tarayıcıda kural sessizce uygulanmaz, bu yüzden varsayılan stil tek başına kabul edilebilir görünmeli.
Kapsayıcılara mutlaka ad verin. Sonradan iç içe bir kapsayıcı eklerseniz sorgular yanlış elemana bakmaz.
container-type: inline-size bir kapsayıcı için layout ve style containment da getirir. İçindeki position: fixed açılır menüler ve tooltip'ler beklediğinizden farklı konumlanabilir, bunları kapsayıcının dışına almak gerekebilir.
Sayfanın genel iskeleti (örneğin mobilde yan menüyü tamamen gizlemek) için media query kullanmaya devam edin. Container query bileşen içi uyum içindir.
Chrome DevTools elemanın kapsayıcı olduğunu rozetle gösteriyor; sorgu çalışmıyorsa önce buraya bakın.
Eşikleri tahmin etmeyin: bileşeni gerçekten bozulduğu genişliğe kadar daraltıp o değeri yazın.
Yan menü animasyonu sırasında düzenin zıplamaması için etiketlerin genişliğini ve opaklığını geçişli tutun, display değiştirmeyin.

Kendi panelinizde hangi bileşenin pencere yerine alana göre davranması gerektiğini bulup bu yapıya taşıyın. Takıldığınız yer olursa kodunuzu konunun altına yazın, birlikte bakalım.

Sıkça Sorulan Sorular (SSS)

Soru 1: Yan Menü Daralınca Kendini Toparlayan Yönetim Paneli: Container Query, cqw Birimleri ve Style Query ile Akıllı Widget'lar neden önemlidir?
Doğru yapılandırma ve güncel standartların uygulanması hem sistem kararlılığını artırır hem de olası hataları ve zaman kaybını en baştan engeller.

Soru 2: Uygulama adımlarında sorun yaşarsam ne yapmalıyım?
Konu içerisindeki adımları ve yapılandırma detaylarını sırasıyla kontrol edebilir, takıldığınız noktaları bu konunun altına yorum olarak yazarak destek alabilirsiniz.

Yan Menü Daralınca Kendini Toparlayan Yönetim Paneli: Container Query, cqw Birimleri ve Style Query ile Akıllı Widget'lar

FreakyMorex

Benzer konular

🛡️ HAKKIMIZDA

🎮 KATEGORİLER

🔗 HIZLI ERİŞİM