Dynamic Observed ( ? )

? işaretçisi bir selector'ı dynamic observed moda alır.

---

Davranış

• ilk derlemede DOM'da varsa → üretilir
• ilk derlemede DOM'da yoksa → DOM'u dinler
• sonradan DOM'a eklenirse → üretilir
• sonradan DOM'dan kaldırılırsa → kural devre dışı kalır

---

Yazım Kuralı

? işaretçisi selector parçasının en sonuna, boşluksuz yazılır. Pseudo varsa pseudo'dan sonra gelir.

.toast?        { background: #333; }
#modal?        { display: flex; }
.btn:hover?    { background: #1a50e0; }

/* yanlış */
.btn?:hover    { background: #1a50e0; }
.toast ?       { background: #333; }

&var(...) ile gelen composition sonrasında da aynı kural geçerlidir:

--hovercard: :hover { transform: translateY(-2px); };
--active: .is-active { box-shadow: 0 10px 26px rgba(22, 61, 120, 0.18); };

.card &var(--hovercard)? { opacity: 0.85; }
.card &var(--active)?    { opacity: 0.85; }

Bu örnekler sırasıyla .card:hover? ve .card.is-active? olarak değerlendirilir.

---

Tipik Kullanım

.toast? {
  background: #1a1a2e;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
}

Sayfa açılırken .toast DOM'da yoksa bu kural üretilmez. JavaScript ile sonradan .toast eklenirse kural o anda üretilir.

---

Hangi Durumlarda Kullanılmalı?

Durum	Kullanım	Neden	Örnek
JavaScript ile sonradan eklenecek bileşen	? kullan	İlk açılışta DOM'da olmayabilir ama daha sonra gelebilir	.toast? { background: #333; }
Ajax / client-side render ile açılan modal	? kullan	Modal veya overlay sonradan DOM'a eklenebilir	.modal? { display: flex; }
Duruma göre gelen bildirim sınıfları	? kullan	Hangi varyantın geleceği önceden kesin değildir	.toast-success? { ... }
Sonsuz scroll / filtreleme ile sonradan çoğalan kartlar	? kullan	Liste elemanları zaman içinde artabilir	.product-card? { border: 1px solid #ddd; }
Sayfa açılışında sabit olan utility/grid sınıfları	?! tercih et	Dynamic izleme gereksiz maliyet oluşturur	.col-4?! { grid-column: span 4; }
Her zaman DOM'da olan statik header/footer	Observed kullanma	Normal selector daha doğru ve daha ucuzdur	header { background: #fff; }

Kısa yorum:

• Sonradan DOM'a eklenme ihtimali varsa ?
• Yalnız ilk snapshot önemliyse ?!
• Her zaman mevcut statik selector için observed kullanma

---

Kullanım Senaryoları

Toast ve Bildirim

.notification?  { background: #2060ff; color: #fff; padding: 12px 16px; }
.toast-error?   { background: #991b1b; color: #fff; padding: 8px 12px; }
.toast-success? { background: #065f46; color: #fff; padding: 8px 12px; }

Modal ve Overlay

.modal? {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay? {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

@for ile Dynamic Sınıf Üretimi

--variants: [info, success, warning, danger];

@for(v, var(--variants)) {
  .alert-${v}? {
    border-left: 4px solid var(--colors.${v});
    padding: 12px 16px;
    border-radius: 4px;
  }
}

Bu yapı, sonradan DOM'a eklenebilecek varyant bileşenleri için uygundur.

@if ile Koşullu Dynamic Observed

--mode: wide;

@if(var(--mode) === 'wide') {
  #panel? { display: block; }
}
else {
  #panel? { display: none; }
}

Koşul derleme zamanında çözülür; yalnızca doğru dal runtime'a taşınır.

---

lazy ile Kullanım

lazy açıkken dynamic observed kurallarının ne zaman derlendiği ve ne zaman aktive olduğu değişebilir. Ayrıntılı davranış tablosu için Performans sayfasına bakın.

---