Semantik Bileşen Uyarlaması

Her bir bağlamı neyin oluşturduğunu veya her bir bağlama neyin tepki verdiğini sabit kodlamadan bağlamsal varyasyonları tetiklemek için stil sorgularını (@container style()) kullanın. Bu sayede tasarım sistemi eşleşmesi azalır, genişletilebilirlik ve bileşen kapsülleme iyileşir.

Örneğin, bir section.featured { --surface: featured } kuralı bir bağlamı işaretleyebilir ve bir açılış sayfası da main { --surface: featured } aracılığıyla varsayılan olarak bu bağlamı kullanabilir. Bileşenler daha sonra --surface: featured öğesine tepki vermeyi etkinleştirir: Bir kartta promosyon rozeti gösterilir, bir düğme varsayılan olarak doldurulmuş varyantına geçer vb.

Stil sorguları, her iki tarafın da birbirinden bağımsız kalmasını sağlar: Öne çıkan yüzeyler, kendilerine uyum sağlayan öğeleri hiçbir zaman adlandırmaz ve bileşenler, bağlamı neyin oluşturduğunu hiçbir zaman incelemez. Her iki taraf da diğerine dokunmadan bağımsız olarak genişletilebilir (yeni bileşenler, yeni özellikli yüzeyler). Alt öğe seçiciler (ör. .featured .button) bunun tam tersini zorunlu kılar: Seçici, ilişkinin her iki tarafını da kodlamalı ve taraflardan biri değiştiğinde değişmelidir.

Bu kılavuz ne zaman kullanılmalıdır?

Bu kılavuzda davranışsal değişiklikler ele alınmaktadır: Bir bileşen, bağlamına yanıt olarak neyi oluşturacağına, kendisini nasıl düzenleyeceğine veya hangi varyantı sunacağına karar verir. Örneğin, bir rozeti gizler veya gösterir, düzen yönünü değiştirir ya da bir düğme varyantını değiştirir.

Bunun yerine jeton düzeyinde değişiklikler yapmanız gerekiyorsa (ör. yoğunluk modları, temalar veya birçok bileşende dolgu ve renk gibi değerleri tek tip olarak değiştiren diğer üst düzey jetonlar) Tasarım Jetonu Tepki Verme Özelliği başlıklı makaleyi inceleyin.

Doğru aracı seçme

Bağlamsal bir ilişkinin her iki tarafı da bağımsız olarak değişebildiğinde stil sorgusunu kullanın. Yeni öğeler bağlamı oluşturmaya başlayabilir veya yeni bileşenler bağlama tepki vermeye başlayabilir. Dolaylılık, genişletilebilirlik ve kapsülleme açısından kendi kendini amorti eder. Stil sorguları, alt öğe seçicilerin geçemediği gölge DOM sınırlarını aşar. Bu esnekliğe ihtiyaç duyulmadığında daha basit olan aracı tercih edin:

• Alt öğe seçiciler (.toolbar .button): Yeniden kullanılamayan veya genişletilemeyen sabit, tek seferlik bir ilişki. YAGNI geçerlidir. Kullanmayacağınız dolaylılık eklemeyin.
• Boyut sorguları (@container (min-width: …)): Anlamsal durum değil, kullanılabilir alan tarafından yönlendirilen düzen ve yoğunluk değişiklikleri.
• Stil sorguları (@container style(…)): anlamsal durum (bir bileşenin belirli bir bağlamda neyi oluşturması, düzenlemesi veya sunması gerektiği).

Uygulama Yönergeleri

1. Bir kapsayıcıda CSS özel niteliği kullanarak anlamsal bağlam işareti tanımlayın.
2. Stil sorguları için container-type değerini AYARLAMAYIN. Bu sorgular, en yakın üst öğedeki devralınan özel özellikleri sorgular ve açık bir kapsayıcı bağlamı gerektirmez.
3. ZORUNLU: Alt öğelere koşullu stiller uygulamak için @container style(--property: value) kullanın. Stil sorguları, özelliğin ayarlandığı öğeyle eşleşemez. Yalnızca alt öğeleriyle eşleşebilir.
4. İlişkinin genişletilebilir kalması veya bileşen/gölge DOM sınırlarını aşması gerektiğinde alt seçiciler yerine stil sorgularını tercih EDİN (yukarıdaki Doğru aracı seçme bölümüne bakın). Ancak dolaylılığın hiçbir şey kazandırmadığı sabit, tek seferlik ilişkiler için alt seçicileri kullanmaya devam edin.

Uygulama Örneği

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

Yedek Stratejiler

Kapsayıcı stil sorguları yaygın olarak kullanılabilir hale gelene kadar bunları progresif geliştirme olarak katmanlar halinde uygulayın: Her yerde çalışan seçici tabanlı bir varsayılan değer gönderin ve desteklendiğinde stil sorgusunun bu değeri geçersiz kılmasına izin verin. Stil sorgusunun (aynı özgüllük, kaynak sırasına göre daha sonra) otomatik olarak kazanması için bağlam seçicide :where() kullanın.

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

Seçici yedek, bağlama dayalı stili bir sınıf adına bağlar. Bu da bileşeni DOM yerleşimine bağlar. Stil sorguları yaygın olarak desteklendiğinde :where() kuralı kaldırılabilir.