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ı.
Bununla birlikte, sınırlama spesifikasyonu sadece boyut sorgularından ibaret değildir; aynı zamanda bir üst öğenin stil değerlerinin sorgulanmasını 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 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, stilleri birleştirmek ve verileri tasarımdan ayırmak açısından yine de çok yararlıdır. Stil sorgularını CSS özel özellikleriyle nasıl kullandığınıza bakalı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 doğrudan üst öğesinin stillerini sorgulayabilmesi için .card-container öğesine container-type veya container özelliğini kullanarak kapsam 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. 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 sarmaladığını fark etmiş olabilirsiniz. Böylece, beden değerlerini stillerden netleştirebilir. Örneğin, @container (min-width: 200px) { … } olarak kapsayıcının genişliği için 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 yüzden farkı netleştirmek için style() sarmalayıcıyı 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 {
...
}
}
Sorguladığınız şeyleri netleştirmek ve bu kapsayıcılara daha kolay erişme olanağının kilidini açmak için kapsayıcılarınıza ad vermek genellikle en iyi uygulamadır. 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ı, birden çok varyasyon içeren yeniden kullanılabilir bir bileşeniniz olduğunda veya stillerinizin tümü üzerinde kontrolünüz olmadığı halde belirli durumlarda değişiklikler uygulamanız gerektiğinde özellikle 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 "Düşük Stok"ta 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 kartlara aşağıdakiler gibi satır içi stillerle 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 çip uygulamamıza olanak tanır, ancak kod bloğunda bazı gereksizler fark etmiş olabilirsiniz. Şu anda @container style(--detail) ile yalnızca --detail özelliğinin varlığını sorgulamanın bir yolu yoktur. Bu sayede stilleri daha iyi paylaşabilir ve tekrarı daha az görüntüleyebilirsiniz. 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 özellik kullanarak ve sorgulayarak da bunları karıştırabilirsiniz. Şu hava durumu kartı örneğini ele alalım:
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 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şenin stilini belirlemek 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). İşin en iyi yanı da bu değerleri birleştirebilmenizdir. Hem --sunny hem de --cloudy değerlerini kontrol ederek parçalı bulutlu bir stil görebilirsiniz.
Ö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. İ
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 açıklanan özellikler sadece 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, mevcut spesifikasyon düzeyinin bir parçasıdır, ancak henüz hiçbir tarayıcıda uygulanmamıştır. Boole bağlam değerlendirmesinin, bekleyen sorun çözüldüğünde geçerli spesifikasyon düzeyine eklenmesi beklenirken spesifikasyonun bir sonraki düzeyi için aralık sorgulamasının yapılması planlanmaktadır.