Stil Sorgularına Başlarken

Una Kravets

Üst öğenin satır içi boyutunu ve kapsayıcı sorgu birimi değerlerini sorgulama özelliği, kısa süre önce tüm modern tarayıcı motorlarında kararlı destek aldı.

Ancak kapsamlama spesifikasyonu yalnızca boyut sorgularından daha fazlasını içerir. Ayrıca bir üst öğenin stil değerlerini sorgulamayı da sağlar. Chromium 111'den itibaren, özel özellik değerleri için stil içerme uygulayabilecek ve özel bir özelliğin değeri için üst öğeyi sorgulayabileceksiniz.

Bu da CSS'deki stiller üzerinde daha fazla mantıksal kontrol gerçekleştirdiğimiz ve bir uygulamanın mantığı ile veri katmanının stillerinden daha iyi ayrılması anlamına gelir.

Boyut ve stil sorgularını kapsayan CSS Kapsayıcılık Modülü 3. Seviye spesifikasyonu, font-weight: 800 gibi özellik ve değer çiftleri dahil olmak üzere tüm stillerin bir üst öğeden sorgulanmasına olanak tanır. Ancak bu özelliğin kullanıma sunulduğu ilk aşamada stil sorguları yalnızca CSS özel mülk değerleriyle çalışmaktadır. Bu yöntem, stilleri birleştirmek ve verileri tasarımdan ayırmak için hâlâ çok kullanışlıdır. Stil sorgularını CSS özel özellikleriyle nasıl kullandığınıza göz atalım:

Stil sorgularını kullanmaya başlama

Aşağıdaki HTML'yi kullandığımızı varsayalım:

<ul class="card-list">
  <li class="card-container">
    <div class="card">
      ...
    </div>
  </li>
</ul>

Stil sorgularını kullanmak için önce bir kapsayıcı öğesi oluşturmanız gerekir. Bu, doğrudan veya dolaylı bir üst öğeyi sorguladığınıza bağlı olarak biraz farklı bir yaklaşım gerektirir.

Doğrudan ebeveynleri sorgulama

Stil sorgularının aksine, .card doğrudan üst öğesinin stillerini sorgulayabilmesi için .card-container öğesine container-type veya container özelliğini kullanarak kapsam uygulamanız gerekmez. Ancak stilleri (bu durumda özel mülk değerleri) bir kapsayıcıya (bu durumda .card-container) veya DOM'da stil uyguladığımız öğeyi içeren herhangi bir öğeye uygulamamız gerekir. Sonsuz döngülere neden olabileceği için, sorguladığımız stilleri bu sorguyu kullanarak biçimlendirdiğimiz doğrudan öğeye uygulayamayız.

Bir üst yayıncıyı doğrudan sorgulamak için şunları yazabilirsiniz:

/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown; 
    ...
  }
}

Stil sorgusunun sorguyu style() ile sarmalandığını fark etmiş olabilirsiniz. Böylece, beden değerlerini stillerden netleştirebilir. Örneğin, kapsayıcının genişliği için @container (min-width: 200px) { … } olarak bir sorgu yazabilirsiniz. Üst kapsayıcı en az 200 piksel genişliğindeyse bu stiller uygulanır. Ancak min-width bir CSS özelliği de olabilir ve stil sorgularını kullanarak min-width'ün CSS değerini sorgulayabilirsiniz. Bu nedenle, farkı netleştirmek için style() sarmalayıcısını kullanırsınız: @container style(min-width: 200px) { … }.

Doğrudan olmayan ebeveynlere stil uygulama

Doğrudan üst öğe olmayan bir öğenin stillerini sorgulamak istiyorsanız söz konusu öğeye bir container-name vermeniz gerekir. Örneğin, .card-list'a bir container-name atayarak ve stil sorgusunda ona referans vererek .card-list'un stillerine göre .card'e stil uygulayabiliriz.

/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
  .card {
    ...
  }
}

Genellikle, neyi sorguladığınızı netleştirmek ve bu kapsayıcılara daha kolay erişebilmek için kapsayıcılarınıza ad vermeniz önerilir. Bu özelliğin kullanışlı olduğu durumlardan biri, .card içindeki öğeleri doğrudan biçimlendirmek istediğinizde ortaya çıkar. .card-container üzerinde adlandırılmış bir kapsayıcı olmadan doğrudan sorgulayamazlar.

Ancak tüm bunlar pratikte çok daha mantıklı. Bazı örneklere göz atalım:

Stil sorgularının kullanımı

Stil sorguları, özellikle birden fazla varyantı olan yeniden kullanılabilir bir bileşeniniz olduğunda veya tüm stilleriniz üzerinde kontrol sahibi olmadığınız ancak belirli durumlarda değişiklik uygulamanız gerektiğinde yararlıdır. Bu örnekte, aynı kart bileşenini paylaşan bir dizi ürün kartı gösterilmektedir. Bazı ürün kartlarında, --detail adlı özel bir özellik tarafından tetiklenen "Yeni" veya "Düşük Stok" gibi ek ayrıntılar/notlar bulunur. Ayrıca, "Stokta Az" olan ürünlerin arka planı koyu kırmızı kenarlıklı olur. Bu tür bilgiler büyük olasılıkla sunucu tarafından oluşturulur ve aşağıdaki gibi satır içi stiller aracılığıyla kartlara uygulanabilir:

 <div class="product-list">
  <div class="product-card-container" style="--detail: new">
    <div class="product-card">
      <div class="media">
        <img .../>
      <div class="comment-block"></div>
    </div>
  </div>
  <div class="meta">
    ...
  </div>
  </div>
  <div class="product-card-container" style="--detail: low-stock">
    ...
  </div>
  <div class="product-card-container">
    ...
  </div>
  ...
</div>

Bu yapılandırılmış verileri kullanarak değerleri --detail öğesine iletebilir ve stilleri uygulamak için bu CSS özel özelliğini kullanabilirsiniz:

@container style(--detail: new) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'New';
    border: 1px solid currentColor;
    background: white;
    ...
  }
}

@container style(--detail: low-stock) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'Low Stock';
    border: 1px solid currentColor;
    background: white;
    ...
  }
  
  .media-img {
    border: 2px solid brickred;
  }
}

Yukarıdaki kod, --detail: low-stock ve --detail: new için bir çip uygulamamıza olanak tanır ancak kod bloğunda bazı gereksiz kodlar olduğunu fark etmiş olabilirsiniz. Şu anda --detail'ün @container style(--detail) ile birlikte varlığını sorgulamak mümkün değildir. Bu, stillerin daha iyi paylaşılmasına ve daha az tekrara olanak tanır. Bu özellik şu anda çalışma grubunda tartışma aşamasındadır.

Hava durumu kartları

Önceki örnekte, stilleri uygulamak için birden fazla olası değere sahip tek bir özel mülk kullanılmıştır. Ancak birden fazla özel mülkü kullanarak ve sorgulayarak da bu yöntemi çeşitlendirebilirsiniz. Şu hava durumu kartı örneğini ele alalım:

Bu kartların arka plan gradyanlarını ve simgelerini biçimlendirmek için "bulutlu", "yağmurlu" veya "güneşli" gibi hava durumu özelliklerini arayın:

@container style(--sunny: true) {
  .weather-card {
    background: linear-gradient(-30deg, yellow, orange);
  }
  
  .weather-card:after {
    content: url(<data-uri-for-demo-brevity>);
    background: gold;
  }
}

Böylece her kartı benzersiz özelliklerine göre biçimlendirebilirsiniz. Ancak and birleştiriciyi medya sorgularında olduğu gibi kullanarak özellik (özel özellik) kombinasyonları için de stil uygulayabilirsiniz. Örneğin, hem bulutlu hem de güneşli bir gün şu şekilde görünür:

@container style(--sunny: true) and style(--cloudy: true) {
    .weather-card {
      background: linear-gradient(24deg, pink, violet);
    }
  
  .weather-card:after {
      content: url(<data-uri-for-demo-brevity>);
      background: violet;
  }
}

Verileri tasarımdan ayırma

Bu iki demoda da veri katmanını (sayfada oluşturulacak DOM) uygulanan stillerden ayırmanın yapısal bir avantajı vardır. Stiller, bileşen stilinde bulunan olası varyantlar olarak yazılır. Bir uç nokta ise bileşene stil uygulamak için kullanacağı verileri gönderebilir. İlk durumda --detail değerini güncelleme gibi tek bir değer veya ikinci örnekte olduğu gibi birden çok değişken kullanabilirsiniz (--rainy, --cloudy ya da --sunny şeklinde ayarlanır). En iyi yanı da bu değerleri birleştirebilmenizdir. Hem --sunny hem de --cloudy'ün kısmen bulutlu bir stil gösterebileceğini kontrol edebilirsiniz.

Özel mülk değerlerini JavaScript aracılığıyla güncellemek, DOM modelini ayarlarken (ör. bileşeni bir çerçevede oluştururken) sorunsuz bir şekilde yapılabilir veya <parentElem>.style.setProperty('--myProperty’, <value>) kullanılarak dilediğiniz zaman güncellenebilir. I

Aşağıdaki demoda, birkaç satır kodla bir düğmenin --theme özelliğini güncelleyip stil sorgularını ve bu özel özelliği (--theme) kullanarak stilleri uygulayabilirsiniz:

Stil sorguları kullanarak kartı biçimlendirin. Özel özellik değerlerini güncellemek için kullanılan JavaScript şu şekildedir:

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})

Bu makalede ayrıntılı olarak açıklanan özellikler yalnızca başlangıçtır. Kapsayıcı sorguları, dinamik ve duyarlı arayüzler oluşturmanıza yardımcı olacak daha fazla özellik sunar. Özellikle stil sorgularına gelince, hâlâ birkaç açık sorun vardır. Bunlardan biri, özel özelliklerin ötesinde CSS stilleri için stil sorgularının uygulanmasıdır. Bu özellik, mevcut spesifikasyon düzeyinin bir parçasıdır ancak henüz hiçbir tarayıcıda uygulanmamıştır. Çözülmemiş sorun giderildiğinde mantıksal bağlam değerlendirmesinin mevcut spesifikasyon düzeyine eklenmesi beklenirken aralık sorgulamanın spesifikasyonun bir sonraki düzeyi için planlanması planlanmaktadır.