Stil Sorgularına Başlarken

Una Kravets

Bir üst öğenin satır içi boyutunu sorgulama ve kapsayıcı sorgusu birim değerlerini kullanma özelliği, kısa süre önce tüm modern tarayıcı motorlarında kararlı destek aşamasına ulaştı.

Ancak containment spec, yalnızca boyut sorgularını değil, üst öğenin stil değerlerinin sorgulanmasını da içerir. Chromium 111'den itibaren, özel özellik değerleri için stil kapsama uygulayabilecek ve üst öğeyi özel özellik değeri için sorgulayabileceksiniz.

Bu, CSS'deki stiller üzerinde daha da fazla mantıksal kontrol sahibi olduğumuz ve bir uygulamanın mantık ve veri katmanının stillerinden daha iyi ayrılmasını sağladığımız anlamına gelir.

Boyut ve stil sorgularını kapsayan CSS Containment Module Level 3 spesifikasyonu, font-weight: 800 gibi özellik ve değer çiftleri de dahil olmak üzere herhangi bir stilin üst öğeden sorgulanmasına olanak tanır. Ancak bu özelliğin kullanıma sunulması sırasında stil sorguları şu anda yalnızca CSS özel özellik değerleriyle çalışmaktadır. Bu özellik, stilleri birleştirmek ve verileri tasarımdan ayırmak için hâlâ çok kullanışlıdır. CSS özel özellikleriyle stil sorgularını nasıl kullandığınıza göz atalım:

Stil sorgularını kullanmaya başlama

Aşağıdaki HTML'nin olduğunu 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ı öğe ayarlamanız gerekir. Bu işlem, doğrudan veya dolaylı bir üst öğeyi sorgulamanıza bağlı olarak biraz farklı bir yaklaşım gerektirir.

Doğrudan üst öğeleri sorgulama

Stil sorgularının aksine, .card öğesinin doğrudan üst öğesinin stillerini sorgulayabilmesi için .card-container öğesine container-type veya container özelliğini kullanarak kapsama uygulamanız gerekmez. Ancak stilleri (bu örnekte özel özellik değerleri) bir kapsayıcıya (bu örnekte .card-container) veya DOM'da stilini oluşturduğumuz öğeyi içeren herhangi bir öğeye uygulamamız gerekir. Sorguladığımız stilleri, bu sorguyu kullanarak stil verdiğimiz doğrudan öğeye uygulayamayız. Aksi takdirde sonsuz döngüler oluşabilir.

Doğrudan bir üst öğeyi sorgulamak için şunu 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 sardığını fark etmiş olabilirsiniz. Bunun amacı, beden değerlerini stillerden ayırt etmektir. Örneğin, kapsayıcının genişliği için @container (min-width: 200px) { … } şeklinde bir sorgu yazabilirsiniz. Bu, üst kapsayıcı en az 200 piksel genişliğinde olduğunda stilleri uygular. Ancak min-width bir CSS özelliği de olabilir ve stil sorgularını 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 üst öğeleri stilize etme

Doğrudan üst öğe olmayan herhangi bir öğenin stillerini sorgulamak istiyorsanız bu öğeye container-name vermeniz gerekir. Örneğin, .card-list öğesine container-name verip stil sorgusunda buna referans vererek .card-list öğesinin stillerine göre .card öğesine stil uygulayabiliriz.

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

Genel olarak, sorguladığınız öğeleri 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 bir örnek, .card içindeki öğelere doğrudan stil uygulamak istediğiniz durumlardır. .card-container üzerinde adlandırılmış bir kapsayıcı olmadan doğrudan sorgulama yapamazlar.

Ancak tüm bunlar uygulamada çok daha anlamlıdır. Bazı örneklere göz atalım:

Stil sorgularının kullanımı

Stil sorguları, özellikle birden fazla varyasyonu 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 grup ürün kartı gösterilmektedir. Bazı ürün kartlarında, --detail adlı özel bir özellik tarafından tetiklenen "Yeni" veya "Stokta az" gibi ek ayrıntılar/notlar bulunur. Ayrıca, bir ürün "Stokta az" durumundaysa koyu kırmızı bir kenarlık arka planı alır. Bu tür bilgiler büyük olasılıkla sunucu tarafında oluşturulur ve satır içi stiller aracılığıyla kartlara aşağıdaki gibi 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ış veriler göz önüne alındığında, --detail öğesine değerler 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 çip uygulamamıza olanak tanır. Ancak kod bloğunda bazı gereksiz kısımlar olduğunu fark etmiş olabilirsiniz. Şu anda @container style(--detail) ile birlikte yalnızca --detail'nin varlığını sorgulamanın bir yolu yoktur. Bu, stillerin daha iyi paylaşılmasına ve daha az tekrara olanak tanır. Bu özellik şu anda çalışma grubunda tartışılmaktadır.

Hava durumu kartları

Önceki örnekte, stilleri uygulamak için birden fazla olası değeri olan tek bir özel özellik kullanılıyordu. Ancak birden fazla özel özellik kullanarak ve sorgulayarak da bu durumu değiştirebilirsiniz. Örneğin, aşağıdaki hava durumu kartı örneğini inceleyin:

Bu kartların arka plan gradyanlarını ve simgelerini şekillendirmek 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 kartı benzersiz özelliklerine göre stilize edebilirsiniz. Ancak and birleştiricisini medya sorgularında olduğu gibi kullanarak özellik (özel özellik) kombinasyonları için de stilize edebilirsiniz. Ö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ırken bir uç nokta, bileşeni stilize etmek için kullanacağı verileri gönderebilir. İlk örnekte olduğu gibi tek bir değer (--detail değerini güncelleme) veya ikinci örnekte olduğu gibi birden fazla değişken (--rainy, --cloudy veya --sunny değerini ayarlama) kullanabilirsiniz. En iyi yanı, bu değerleri birleştirebilmenizdir. Hem --sunny hem de --cloudy değerini kontrol etmek, kısmen bulutlu bir stil gösterebilir.

Özel özellik değerlerini JavaScript üzerinden güncelleme işlemi sorunsuz bir şekilde yapılabilir.Bu işlem, DOM modeli oluşturulurken (ör. bileşen bir çerçevede oluşturulurken) veya <parentElem>.style.setProperty('--myProperty’, <value>) kullanılarak herhangi bir zamanda güncellenebilir. I

Aşağıdaki demoda, birkaç satırlık kodla bir düğmenin --theme özelliği güncelleniyor ve stil sorguları ile özel özellik (--theme) kullanılarak stiller uygulanıyor:

Stil sorgularını kullanarak kartı stilize edin. Özel özellik değerlerini güncellemek için kullanılan JavaScript:

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. Dinamik ve duyarlı arayüzler oluşturmanıza yardımcı olacak kapsayıcı sorgularla ilgili daha fazla özellik sunulacak. Stil sorgularıyla ilgili olarak ise hâlâ birkaç açık sorun var. Bunlardan biri, özel özelliklerin ötesindeki CSS stilleri için stil sorgularının uygulanmasıdır. Bu özellik, mevcut spesifikasyon düzeyinin bir parçası olsa da henüz hiçbir tarayıcıda uygulanmamıştır. Bekleyen sorun çözüldüğünde boolean bağlam değerlendirmesinin mevcut spesifikasyon düzeyine eklenmesi beklenirken aralık sorgulama, spesifikasyonun bir sonraki düzeyi için planlanmaktadır.