Tasarım Jetonu Tepkiselliği

Arka Plan ve Genel Bakış

Yazarların genellikle bir bileşenin tasarımında bağlamsal değişiklikler yapması gerekir. Geçmişte yazarların bu tür değişiklikleri uygulamak için seçicileri kullanması gerekiyordu. Bu durum genellikle tasarım jetonlarının birçoğu özel özellikler olarak mevcut olabilirken, daha yüksek düzeydeki tasarım jetonlarının yalnızca bir seçici kalıbı (ör. bir sınıf adı veya özellik kuralı kullanarak) ya da bir JavaScript çerçevesinde props/context olarak kodlanabileceği anlamına geliyordu.

Kapsayıcı stil sorguları, yazarların öğeleri bir üst öğenin hesaplanan özel özellik değerine göre stillendirmesine olanak tanır. Bu sayede yazarlar, sunum için işaretleme veya JavaScript'e güvenmek yerine stil sayfalarına anlamlı tasarım jetonu değerleri yazabilir.

Nasıl uygulanır?

Kapsayıcı stil sorgusu kullanarak tepkisel tasarım jetonu uygulamak oldukça basittir:

1. Üst düzey tasarım jetonunu bir kapsayıcıda özel özellik olarak ayarlayın. Bunun kayıtlı bir özel nitelik olması gerekmez.
2. Bu özel niteliğin değerini sorgulamak için @container style() kuralını kullanın.
3. Kapsayıcı içindeki bir alt öğeye uygun stilleri uygulayın.

Unutulmaması gereken birkaç nokta:

• Stil sorgusuyla sorgulanan kapsayıcının container-type veya container-name kümesine sahip olması gerekmez ancak container-name daha spesifik sorgulamaya olanak tanıyabilir.
• Kapsayıcının kendisi, kapsayıcı stil sorgusu tarafından stillendirilemez.

Aşağıda, yukarıdaki uygulama adımlarının temel bir örneği verilmiştir.

<div class="features">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.features {
  --density: spacious;
}

.bugs {
  --density: compact;
}

@container style(--density: compact) {
  .card {
    padding: 8px;
  }
}

@container style(--density: spacious) {
  .card {
    padding: 24px;
  }
}

Yedek stratejiler

Kapsayıcı stil sorguları için Baseline desteği sunulana kadar, tüm tarayıcılarda kullanılabilmesi gereken temel özellikler için bu sorguların kullanılması ÖNERİLMEZ. Bunun nedeni, avantajlarından ödün vermeyen veya kendi sınırlamaları olan bir yedek oluşturmanın kolay olmamasıdır. Örneğin, kullanıcı arayüzü yoğunluğu kullanıcı tercihi, tüm deneyimlerde kullanılabilir olması gereken temel bir özellik olarak kabul edilmiyorsa kapsayıcı stil sorguları, özelliği yedek olmadan uygulamak için kullanılabilir.

Bunun yerine seçicileri kullanma

Temel özellikler için seçicileri kullanan alternatif bir yaklaşım kullanılmalıdır. Bu örnekte, yoğunluk tasarım jetonunu özel bir özellik olarak değil, işaretlemede kodlamak için data-density özelliği kullanılmaktadır:

<div class="features" data-density="spacious">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs" data-density="compact">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

/* This example uses `:where()` to avoid increasing specificity */
:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

Bu yedek yaklaşımın önemli bir sınırlaması, data-density özelliği ayarlanmış iç içe yerleştirme öğelerini desteklememesidir. Seçici özgüllüğü aynı olduğundan, stilleri belirlemek için görünüm sırası kullanılır (yani [data-density="spacious"] her zaman [data-density="compact"]'ye göre öncelikli olur).

Stil sorgularını progresif geliştirme olarak kullanma

ÖNERİLMESE DE, temel bir özellik için progresif geliştirme olarak stil sorgularını kullanmak istiyorsanız kopyalamayı önlemek için bazı özel özellikler oluşturabilir ve ardından stil sorgularını ekleyebilirsiniz. Özgüllüğü artırmamak için yedek yaklaşımın, kapsayıcı öğeleri seçerken :where() kullandığından emin olun.

.card {
  --card-padding-compact: 8px;
  --card-padding-spacious: 24px;
}

:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

/* Use style queries as a progressive enhancement: same specificity, so order of appearance is used */

@container style(--density: compact) {
  .card {
    padding: var(--card-padding-compact);
  }
}

@container style(--density: spacious) {
  .card {
    padding: var(--card-padding-spacious);
  }
}

Yalnızca CSS ile özellik kontrolü

Kapsayıcı stil sorgularını, bunlara dayalı bazı kullanıcı arayüzlerini koşullu olarak görüntülemek için özellik kontrolü yapmanız gerekiyorsa bunu yapmak için bir stil sorgusu kullanabilirsiniz:

:root {
  --style-queries-supported: check;
}

.density-toggle {
  display: none;
}

@container style(--style-queries-supported) {
  .density-toggle {
    display: revert;
  }
}

JavaScript ile özellik kontrolü

JavaScript ile özellik kontrolü yapmak biraz daha karmaşıktır. CSSContainerRule arayüzü, kapsayıcı stil sorguları eklenmeden önce de mevcut olduğundan bu amaç için güvenilir değildir. Bunun yerine, stil sorgusuyla ayarlanan bilinen bir özelliğin hesaplanan değerini kontrol etmeniz gerekir.

Bu örnekte, görsel bir etkisi olmayacağı için özel bir özellik kullanılmıştır:

:root {
  --style-queries-supported: check;
}

@container style(--style-queries-supported: check) {
  body {
    --style-queries-supported: yes;
  }
}

Ardından, JavaScript'te hesaplanan değeri şu şekilde kontrol edin:

if (getComputedStyle(document.body).getPropertyValue("--style-queries-supported") === "yes") {
  // Use container style queries
} else {
  // Use fallback strategy
}