Duyarlı ve Uyarlanabilir Düzen

Önceki iki dersin hesapları tek bir kapsayıcı genişliğine dayanıyordu. Izgara dersi bu varsayımın sınırını da göstermişti: 768 piksellik kapsayıcıda hiçbir sütun bölünmesi içerik ölçütlerini karşılamıyordu. Yoğunluk dersi ise tek bir görüntü alanı yüksekliği varsaymıştı.

Her iki bulgu aynı soruya çıkıyor: kapsayıcının genişliği tasarımcının seçtiği bir sayı değil, kullanım anında belirlenen bir değişkense düzen ne yapar? Bu ders soruya iki farklı yanıt veren yaklaşımı ayırır ve geçiş noktalarının nereden türetileceğini hesaplar.

Sürekli Düzen ve Ayrık Düzen

Duyarlı düzen (responsive layout), kapsayıcı genişliğinin sürekli bir değişken olarak ele alındığı yaklaşımdır. Ölçüler oranlarla ve en az/en çok sınırlarıyla verilir; düzen her ara genişlikte tanımlıdır.

Uyarlanabilir düzen (adaptive layout), önceden belirlenmiş birkaç genişlik için ayrı ayrı düzenlerin tasarlandığı yaklaşımdır. Ara genişlikler en yakın düzene yuvarlanır; düzen sonlu sayıda durumdan birinde bulunur.

Fark bir gerçekleştirim ayrıntısı değildir, tasarım sözleşmesinin kendisidir. Duyarlı yaklaşımda tasarımcı kuralları tasarlar ve her ara genişliğin sonucunu kurala bırakır. Uyarlanabilir yaklaşımda tasarımcı durumları tasarlar ve her durumun görünüşünü doğrudan denetler.

Bundan iki asimetri doğar. Duyarlı yaklaşım daha az iş gerektirir ama daha az denetim verir: hiç bakılmamış bir genişlikte düzen yine de tanımlıdır, doğru olduğu ise garanti değildir. Uyarlanabilir yaklaşım daha çok iş gerektirir ama denetimi tam tutar: her durum tek tek tasarlanmıştır, tasarlanmamış bir durum yoktur.

Kesme Noktası İçerikten Türetilir

Her iki yaklaşımda da bir noktada düzenin biçim değiştirmesi gerekir. Bu geçiş genişliğine kesme noktası (breakpoint) denir.

Kesme noktalarının yaygın seçilme biçimi aygıt genişlikleri listesidir. Bu yöntem beş yıl dayanmaz ve zaten yanlış soruyu sorar: sorun aygıtın ne kadar geniş olduğu değil, içeriğin ne kadar genişliğe ihtiyaç duyduğudur. Katalog arayüzünün iki ölçütü ızgara dersinde konmuştu: süzgeç paneli en az 240 piksel, sonuç listesi en az 480 piksel.

Aşağıdaki program bu iki ölçütü sağlayan en küçük kapsayıcı genişliğini arar, ardından sürekli bir kart ızgarasının sütun sayısını genişlikten türetir ve sütun sayısının değiştiği tam genişlikleri bulur.

// 09-duyarli.mjs — kesme noktasinin icerikten turetilmesi ve surekli sutun sayisi

const KENAR = 24;
const OLUK = 24;
const SUTUN_SAYISI = 12;

const SUZGEC_ENAZ = 240; // suzgec etiketleri sarmadan sigsin
const LISTE_ENAZ = 480; // kayit basliklari okunur uzunlukta kalsin

function sutunGenisligi(kapsayici) {
  return (kapsayici - 2 * KENAR - (SUTUN_SAYISI - 1) * OLUK) / SUTUN_SAYISI;
}
function acilim(n, sutun) {
  return n * sutun + (n - 1) * OLUK;
}

// 1) Iki sutunlu duzenin ayakta kalabildigi en kucuk kapsayici genisligi.
let enKucuk = null;
let enKucukBolunme = null;
for (let k = 600; k <= 1200; k++) {
  const s = sutunGenisligi(k);
  for (let sol = 2; sol <= 6; sol++) {
    if (acilim(sol, s) >= SUZGEC_ENAZ && acilim(SUTUN_SAYISI - sol, s) >= LISTE_ENAZ) {
      enKucuk = k;
      enKucukBolunme = [sol, SUTUN_SAYISI - sol];
      break;
    }
  }
  if (enKucuk !== null) break;
}
console.log("1) iki sutunlu duzenin esigi");
console.log(`   olcutler: suzgec >= ${SUZGEC_ENAZ}px, liste >= ${LISTE_ENAZ}px`);
console.log(`   en kucuk kapsayici: ${enKucuk}px   bolunme: ${enKucukBolunme.join("+")} sutun`);
const s0 = sutunGenisligi(enKucuk);
console.log(
  `   bu genislikte: suzgec ${acilim(enKucukBolunme[0], s0).toFixed(1)}px, ` +
    `liste ${acilim(enKucukBolunme[1], s0).toFixed(1)}px`
);
console.log(`   aygit listesinden gelen 768px bu esigin ${enKucuk - 768}px altinda`);

// 2) Surekli sutun sayisi: kart izgarasinin en az genisligi 220px, aralik 24px.
const KART_ENAZ = 220;
const ARALIK = 24;
function kartSayisi(kapsayici) {
  return Math.max(1, Math.floor((kapsayici + ARALIK) / (KART_ENAZ + ARALIK)));
}
console.log("");
console.log("2) kart izgarasi: en az kart genisligi 220px, aralik 24px");
console.log("   kapsayici  kart sayisi  kart genisligi");
for (const k of [360, 480, 720, 960, 1200, 1440]) {
  const n = kartSayisi(k);
  const genislik = (k - (n - 1) * ARALIK) / n;
  console.log(
    `   ${String(k).padStart(9)}  ${String(n).padStart(11)}  ${genislik.toFixed(1).padStart(14)}px`
  );
}

// 3) Sutun sayisinin degistigi tam genislikler: W + aralik = n * (enaz + aralik)
console.log("");
console.log("3) sutun sayisinin degistigi genislikler (sinanacak degerler)");
for (let n = 2; n <= 6; n++) {
  const esik = n * (KART_ENAZ + ARALIK) - ARALIK;
  console.log(`   ${n} sutuna gecis: ${esik}px  (dogrulama: ${kartSayisi(esik - 1)} -> ${kartSayisi(esik)})`);
}
console.log(`   320-1440 arasindaki tam sayi genislik sayisi: ${1440 - 320 + 1}`);
console.log("   sinanmasi gereken genislik sayisi: 5 gecis + 2 uc = 7");

1) iki sutunlu duzenin esigi
   olcutler: suzgec >= 240px, liste >= 480px
   en kucuk kapsayici: 816px   bolunme: 4+8 sutun
   bu genislikte: suzgec 240.0px, liste 504.0px
   aygit listesinden gelen 768px bu esigin 48px altinda

2) kart izgarasi: en az kart genisligi 220px, aralik 24px
   kapsayici  kart sayisi  kart genisligi
         360            1           360.0px
         480            2           228.0px
         720            3           224.0px
         960            4           222.0px
        1200            5           220.8px
        1440            6           220.0px

3) sutun sayisinin degistigi genislikler (sinanacak degerler)
   2 sutuna gecis: 464px  (dogrulama: 1 -> 2)
   3 sutuna gecis: 708px  (dogrulama: 2 -> 3)
   4 sutuna gecis: 952px  (dogrulama: 3 -> 4)
   5 sutuna gecis: 1196px  (dogrulama: 4 -> 5)
   6 sutuna gecis: 1440px  (dogrulama: 5 -> 6)
   320-1440 arasindaki tam sayi genislik sayisi: 1121
   sinanmasi gereken genislik sayisi: 5 gecis + 2 uc = 7

İlk blok kesme noktasını veriyor: 816 piksel. Bu sayı seçilmedi, iki içerik ölçütünden ve ızgara aritmetiğinden çıktı. Aygıt listelerinde sık geçen 768 piksel bu eşiğin 48 piksel altındadır; o genişlikte iki sütunlu düzen kurulursa süzgeç paneli ya da sonuç listesi kendi en az genişliğinin altına iner.

Türetilmiş kesme noktasının bir üstünlüğü daha vardır: içerik değiştiğinde kesme noktası da değişir. Süzgeç etiketleri uzarsa en az genişlik büyür, hesap yeniden çalıştırılır ve yeni eşik bulunur. Aygıt listesinden alınan bir sayı, içerik değiştiğinde sessizce yanlış hâle gelir.

Kesme noktası bulunduğunda düzen tek bir kuralla ifade edilebilir:

/* Katalog sonuc sayfasi: iki sutunlu duzen yalniz esigin ustunde kurulur. */
.katalog {
  display: grid;
  gap: 24px;
  padding: 0 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 816px) {
  .katalog {
    grid-template-columns: minmax(240px, 1fr) minmax(480px, 2fr);
  }
}

Bildirimdeki 240 ve 480 değerleri, kesme noktasını üreten ölçütlerin ta kendisidir; 1fr ve 2fr oranı ise 4+8 sütun bölünmesinden gelir. Eşiğin altında tek sütun kurulur ve süzgeç paneli listenin üstüne düşer.

Sürekli Düzen Kesme Noktası Gerektirmeyebilir

İkinci blok başka bir yol gösteriyor. Kart biçimindeki bir sonuç listesinde sütun sayısı kesme noktalarıyla değil, doğrudan genişlikten türetilebilir. Kurala göre kapsayıcıya sığabilecek en çok kart sayısı hesaplanır ve kalan yer kartlar arasında paylaştırılır.

Çıktının ikinci bloğunda kart genişlikleri 360, 228, 224, 222, 220.8 ve 220 pikseldir. Genişlik arttıkça kart sayısı artar, kart genişliği ise en az değere doğru yaklaşır. Bu, sürekli düzenin karakteristik davranışıdır: hiçbir genişlikte tanımsız kalmaz ve hiçbir genişlikte ölçütü ihlal etmez.

Buradaki kural üç sayıya bağlıdır — en az kart genişliği, aralık ve kapsayıcı — ve tasarımcı yalnız ilk ikisini seçer. Kesme noktası kararı ortadan kalkar. Bu her zaman mümkün değildir: kart ızgarası gibi aynı türden ögelerin yinelendiği düzenlerde işler, süzgeç paneli ile sonuç listesi gibi farklı türden ögelerin yan yana durduğu düzenlerde işlemez, çünkü ikisinin en az genişliği ayrıdır ve biri diğerinin yerine geçemez.

Sürekli Düzen Sonsuz Sınama Gerektirmez

Sürekli düzene yöneltilen yaygın itiraz sınama maliyetidir: her genişlikte tanımlı olan bir düzen, her genişlikte sınanmalı gibi görünür. 320 ile 1440 piksel arasında 1121 tam sayı genişlik vardır.

Üçüncü blok bu itirazın yanlış olduğunu gösteriyor. Sütun sayısı yalnız beş genişlikte değişir: 464, 708, 952, 1196 ve 1440 piksel. Bu değerler kural gereği kesindir; program her birinin bir piksel altında ve tam üstünde sütun sayısını hesaplayarak geçişi doğruluyor. İki geçiş arasındaki genişliklerde düzenin yapısı aynı kalır, yalnız kart genişliği sürekli olarak değişir.

Sınanması gereken genişlik kümesi bu yüzden yedi elemanlıdır: beş geçiş noktası ve iki uç değer. Sürekli düzen, sonsuz durumu sonlu sayıda geçişle tanımlar; sınama bu geçişlere yapılır. Uyarlanabilir yaklaşımda ise sınanacak durum sayısı tasarlanan düzen sayısına eşittir ve düzen sayısı arttıkça sınama yükü doğrusal büyür.

Hangisi Ne Zaman

İki yaklaşım rakip değildir; ölçüt, genişlik değiştiğinde neyin değiştiğidir.

Değişen yalnızca diziliş ise — aynı ögeler, başka bir sırada — duyarlı yaklaşım yeterlidir ve daha ucuzdur. Kart ızgarasının üç sütundan iki sütuna inmesi böyledir; hiçbir öge eklenmez ya da çıkarılmaz.

Değişen içerik ise uyarlanabilir yaklaşım gerekir. Dar bir görüntü alanında süzgeç paneli listenin üstüne düşmez, bir açılır panele taşınır; ödünç alma eylemi kayıt satırından çıkarılıp ayrıntı görünümüne bırakılır. Bunlar oranla ifade edilemez, çünkü öge kümesi farklıdır.

Pratikte ikisi birlikte kullanılır: iki ya da üç ayrık durum tanımlanır, her durumun kendi içinde ölçüler sürekli hesaplanır. Katalog arayüzü bu biçimdedir — 816 piksel eşiğinde bir ayrık geçiş, eşiğin iki yanında sürekli davranış.

Özet

• Duyarlı düzen genişliği sürekli bir değişken olarak ele alır ve kurallar tasarlar; uyarlanabilir düzen sonlu sayıda durum tanımlar ve her durumu doğrudan tasarlar.
• Kesme noktası aygıt genişliklerinden değil, içeriğin en az genişlik gereksinimlerinden türetilir; katalog arayüzünün eşiği hesapla 816 piksel çıkar ve yaygın 768 değeri bu eşiğin 48 piksel altındadır.
• Türetilmiş kesme noktası içerik değiştiğinde yeniden hesaplanabilir; listeden alınan kesme noktası içerik değiştiğinde sessizce yanlışlanır.
• Aynı türden ögelerin yinelendiği ızgaralarda sütun sayısı doğrudan genişlikten türetilebilir ve kesme noktası kararı ortadan kalkar.
• Sürekli düzen sonsuz sınama gerektirmez: yapı yalnız sütun sayısının değiştiği genişliklerde değişir, ölçülen örnekte 1121 genişlik yerine 7 değer sınanır.
• Genişlik değiştiğinde değişen yalnız diziliş ise duyarlı yaklaşım yeterlidir; öge kümesi değişiyorsa uyarlanabilir yaklaşım gerekir ve ikisi çoğu zaman birlikte kullanılır.

Sonraki Adım

Bu ders genişliği tek değişken olarak ele aldı. Oysa dar bir görüntü alanı yalnız dar değildir: çoğu zaman girdi türü de değişir, dokunma imlecin yerini alır ve hedeflerin ölçüsü yeniden tanımlanır. Yoğunluk dersinde 33 piksellik satırın en düşük eşiği geçtiği ama gelişmiş eşiğin altında kaldığı görülmüştü. Sonraki ders bu eşikleri ölçüt numaralarıyla hesaplar, katalog araç çubuğundaki simge düğmelerini hedef boyutu ve aralık istisnası ölçütleriyle sınar ve imlece bağlı etkileşimlerin dokunmada nasıl karşılıksız kaldığını gösterir.