Initial Observed ( ?! )

?! işaretçisi bir selector'ı initial observed moda alır. Sayfa açılışındaki DOM snapshot'ına bakar; sonradan eklenen elemanları izlemez.

Davranış

ilk derlemede DOM'da varsa → üretilir
ilk derlemede DOM'da yoksa → üretilmez
sonradan DOM'a eklenirse → üretilmez
sonradan DOM'dan kaldırılırsa → üretilen CSS aktif 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.

.col-4?!      { grid-column: span 4; }
.span-2?!     { grid-column: span 2; }
.btn:focus?!  { outline: 2px solid #2060ff; }

/* yanlış */
.btn?!:focus  { outline: 2px solid #2060ff; }
.col-4 ?!     { grid-column: span 4; }

&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

@for(i, [1-12]) {
  .col-${i}?! {
    grid-column: span ${i};
  }
}

Sayfa açıldığında DOM'da hangi .col-* selector'ları varsa yalnızca onlar üretilir. Sonradan gelen yeni .col-* elemanları için CSS üretilmez.

Hangi Durumlarda Kullanılmalı?

Durum	Kullanım	Neden	Örnek
Sayfa açılışında sabit olan grid sınıfları	`?!` kullan	İlk snapshot yeterlidir, sonradan izleme gerekmez	`.col-4?! { grid-column: span 4; }`
Büyük utility setlerinin sadece kullanılan kısmını üretmek	`?!` kullan	Açılıştaki gerçek kullanım kadar CSS üretir	`.mt-4?! { margin-top: 16px; }`
SSR veya server render ile baştan gelen sabit kart varyantları	`?!` kullan	DOM ilk yüklemede hazırdır, sonradan ekleme beklenmez	`.card-compact?! { padding: 8px; }`
Tema / palette utility sınıflarının açılışta görünen kısmı	`?!` kullan	Gözlenen ilk kullanım kadar emit edilir	`.text-primary?! { color: var(--colors.primary); }`
Sonradan açılan toast, modal, drawer	`?` tercih et	İlk snapshot dışında DOM'a eklenecekleri için `?!` yetersiz kalır	`.toast? { background: #333; }`
Her zaman üretilmesi gereken temel layout kuralları	Observed kullanma	Snapshot filtresi istemiyorsan normal selector kullan	`.container { max-width: 1200px; }`

Kısa yorum:

Açılış DOM snapshot'ı yeterliyse ?!
Sonradan DOM'a eklenecek selector varsa ?
Her durumda gerekli statik CSS için observed kullanma

Kullanım Senaryoları

Grid Sistemi

@for(i, [1-12]) {
  .col-${i}?! {
    grid-column: span ${i};
  }
}

@for(i, [1-6]) {
  .row-${i}?! {
    grid-row: span ${i};
  }
}

Palette ve Utility Setleri

--palette: [primary, secondary, success, warning, danger];

@for(color, var(--palette)) {
  .text-${color}?!   { color: var(--colors.${color}); }
  .bg-${color}?!     { background: var(--colors.${color}); }
  .border-${color}?! { border-color: var(--colors.${color}); }
}

`@for` ile Spacing Utility

@for(i, [0-12]) {
  .mt-${i}?! { margin-top:    ${i * 4}px; }
  .mb-${i}?! { margin-bottom: ${i * 4}px; }
  .p-${i}?!  { padding:       ${i * 4}px; }
}

`@if` ile Koşullu Initial Observed

--layout: compact;

@if(var(--layout) === 'compact') {
  .card-compact?! { padding: 8px; }
}
else {
  .card-compact?! { padding: 16px; }
}

Yalnızca doğru dal üretilir; üretilen selector da yalnızca açılış snapshot'ında karşılığı varsa CSS'e girer.

`lazy` ile Kullanım

lazy açıkken initial observed kurallarının ilk yükleme anındaki davranışı ayrıca önem kazanır. Ayrıntılı davranış tablosu için Performans sayfasına bakın.