Stil Sorgularına Başlarken

Una Kravets

Bir üst öğenin satır içi boyutunu ve kapsayıcı sorgu birimi değerlerini sorgulama olanağı kısa süre önce tüm modern tarayıcı motorlarında istikrarlı bir desteğe ulaştı.

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 mülk değerleri için stil kapsayıcılığı uygulayabilir ve bir özel mülkün değeri için üst öğeyi sorgulayabilirsiniz.

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 Kapsam Modülü Düzey 3 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 sunulmasında stil sorguları şu anda 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 faydalı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'ye sahip olduğumuzu varsayalım:

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

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

Doğrudan ebeveynlerle ilgili sorgular

Stil sorgularının aksine, .card'ın doğrudan üst öğesinin stillerini sorgulayabilmesi için .card-container'ye container-type veya container özelliğini kullanarak kapsayıcı uygulamanız gerekmez. Bununla birlikte, stilleri (bu örnekte özel özellik değerleri) bir kapsayıcıya (bu örnekte .card-container) veya DOM'de stilini oluşturmakta olduğumuz öğeyi içeren herhangi bir öğeye uygulamamız gerekir. Bu, sonsuz döngülere neden olabileceğinden, sorgulanan stilleri, bu sorguyu kullanarak stil uyguladığımız doğrudan öğeye uygulayamayız.

Bir ebeveyni 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 sarmaladığını fark etmiş olabilirsiniz. Bunun amacı, stillerdeki beden değerlerinin anlamını açıklığa kavuşturmaktır. Ö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 stiller uygulanır. Ancak min-width, bir CSS mülkü de olabilir ve stil sorguları kullanarak min-width öğesinin 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 ebeveynlerin stilini belirleme

Doğrudan üst öğe olmayan herhangi bir öğenin stillerini sorgulamak isterseniz bu öğeye bir container-name vermeniz gerekir. Örneğin, .card-list öğesine bir container-name verip stil sorgusunda bu ayarı referans alarak .card öğesine .card-list stillerine göre 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. Bunun pratik olduğu bir örnek olarak, doğrudan .card içindeki öğelerin stilini belirlemek istiyorsanız bunu yapabilirsiniz. .card-container üzerinde adlandırılmış bir kapsayıcı olmadan kapsayıcıyı doğrudan sorgulayamazlar.

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

Uygulama sırasında sorguların stilini belirleyin

Stil sorguları, özellikle birden çok varyasyon içeren yeniden kullanılabilir bir bileşeniniz olduğunda veya stillerinizin tümü üzerinde kontrol sahibi olmadığınız ancak belirli durumlarda değişiklikler uygulamanız gerektiğinde yararlı olur. 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 "Düşük Stok" durumunda olan ürünlerin arka planı koyu kırmızı 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 çok olası değere sahip tek bir özel mülk kullanılıyordu. Ancak birden fazla özel mülkü kullanarak ve sorgulayarak da bu yöntemi çeşitlendirebilirsiniz. Aşağıdaki hava durumu kartını inceleyin:

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;
  }
}

Bu şekilde, her bir kartı benzersiz özelliklerine göre biçimlendirebilirsiniz. Ancak, medya sorguları ile aynı şekilde and birleştiricisini kullanarak karakteristik (özel mülk) kombinasyonları için de stil belirleyebilirsiniz. Ö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

Her 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 olduğu gibi tek bir değer (--detail değerini güncelleme) veya ikinci durumda olduğu gibi birden fazla değişken (--rainy, --cloudy veya --sunny ayarlama) kullanabilirsiniz. En iyi yanı da bu değerleri birleştirebilmenizdir. Hem --sunny hem de --cloudy'nin kısmen bulutlu bir stil gösterebileceğini kontrol edebilirsiniz.

Özel özellik değerlerini JavaScript aracılığıyla güncelleme işlemi, DOM modeli ayarlanırken (ör. bir çerçevede bileşeni oluştururken) sorunsuz bir şekilde yapılabilir veya <parentElem>.style.setProperty('--myProperty’, <value>) kullanılarak her zaman güncellenebilir. I

Birkaç satır kodda bir düğmenin --theme özelliğini güncelleyen ve stil sorgularını ve bu özel mülkü (--theme) kullanarak stiller uygulayan bir demo aşağıda verilmiştir:

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 açıklanan özellikler sadece başlangıçtır. Dinamik ve duyarlı arayüzler oluşturmanıza yardımcı olmak için kapsayıcı sorgularından daha fazlasını bekleyebilirsiniz. Ö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, mevcut spesifikasyon düzeyinin bir parçasıdır, ancak henüz hiçbir tarayıcıda uygulanmamıştır. Çözülmemiş sorun çözüldüğünde mantıksal bağlam değerlendirmesinin mevcut spesifikasyon düzeyine eklenmesi beklenirken aralık sorgulamanın spesifikasyonun bir sonraki düzeyinde planlanması bekleniyor.