Bir ü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ı desteğe ulaştı.
Bununla birlikte, kapsayıcı özellikleri boyut sorgularından daha fazlasını içerir; aynı zamanda bir üst öğenin stil değerlerinin sorgulanmasını da sağlar. Chromium 111'den itibaren, özel özellik değerleri için stil sınırlama uygulayabilecek ve bir üst öğeyi özel bir özelliğin değeri için sorgulayabileceksiniz.
Bu da CSS'de stiller için daha da mantıksal kontrole sahip olduğumuz ve bir uygulamanın mantığı ile veri katmanının, stillerinden daha iyi ayrılabilmesi anlamına geliyor.
Boyut ve stil sorgularını kapsayan CSS Kapsayıcı 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ı kapsamı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. 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 mevcut 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ı öğesi ayarlamanız gerekir. Bu, doğrudan veya dolaylı bir ebeveyni sorguladığınıza bağlı olarak biraz daha farklı bir yaklaşım gerektirir.
Doğrudan ebeveynleri sorgulama
Stil sorgularından farklı olarak, .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'de stilini ayarlamakta olduğumuz öğeyi içeren herhangi bir öğeye uygulamamız gerekir. Sonsuz döngülere neden olabileceğinden, sorguladığımız stilleri bu sorguyu kullanarak şekillendirdiğimiz doğrudan öğeye uygulayamıyoruz.
Bir üst öğesini doğrudan sorgulamak için aşağıdakileri 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ı, beden değerlerini stillerden netleştirmektir. Örneğin, kapsayıcının genişliği için @container (min-width: 200px) { … } şeklinde bir sorgu yazabilirsiniz. Bu ayar, üst kapsayıcının en az 200 piksel genişliğinde olması durumunda stiller uygulanır. Bununla birlikte, min-width bir CSS özelliği de olabilir ve stil sorguları kullanarak min-width CSS değerini sorgulayabilirsiniz. Bu nedenle farkı netleştirmek için style() sarmalayıcısını kullanmalısınız: @container style(min-width: 200px) { … }.
Doğrudan olmayan üst öğelerin stilini belirleme
Doğrudan üst olmayan herhangi bir öğe için stilleri sorgulamak isterseniz söz konusu öğeye container-name vermeniz gerekir. Örneğin, .card-list öğesine container-name vererek ve stil sorgusunda buna referans vererek .card-list stillerine dayalı olarak .card öğesine stiller uygulayabiliriz.
/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
.card {
...
}
}
Ne tür sorguladığınızı netleştirmek ve bu kapsayıcılara daha kolay erişmek için kapsayıcılarınıza ad vermeniz genellikle en iyi uygulamadır. Bunun faydalı olacağı yerlere örnek olarak, doğrudan .card içindeki öğelerin stilini belirlemek istediğinizi görebilirsiniz. .card-container üzerinde adlandırılmış bir kapsayıcı olmadan bu kapsayıcıyı doğrudan sorgulayamaz.
Ancak tüm bunlar uygulamada çok daha mantıklı geliyor. Bazı örneklere göz atalım:
Sorguların stilini ayarlama
Stil sorguları özellikle birden çok varyasyona sahip yeniden kullanılabilir bir bileşeniniz olduğunda veya stillerinizin tamamı üzerinde kontrole sahip olmadığınızda belirli durumlarda değişiklikleri uygulamanız gerektiğinde yararlıdır. Bu örnekte, aynı kart bileşenini paylaşan bir ürün kartı grubu gösterilmektedir. Bazı ürün kartlarında, --detail adlı özel mülk tarafından tetiklenen "Yeni" veya "Düşük Stok" gibi ek ayrıntılar/notlar yer alır. Ayrıca, bir ürün "Düşük Stok" durumundaysa koyu kırmızı kenarlık arka planıyla görüntülenir. Bu tür bilgiler genellikle sunucu tarafından oluşturulur ve aşağıdaki gibi satır içi stillerle 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ış veriler ışığında, 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 gereksiz öğeler olduğunu fark etmiş olabilirsiniz. Şu anda yalnızca @container style(--detail) içeren --detail varlığını sorgulamak mümkün değildir. Böylece stiller daha iyi paylaşılabilir ve daha az tekrar olur. Bu özellik şu anda çalışma grubunda müzakere edilmektedir.
Hava durumu kartları
Önceki örnekte, stilleri uygulamak için birden çok olası değere sahip tek bir özel özellik kullanılmıştır. Ancak, birden çok özel özellik kullanıp sorgulayarak da bu yöntemleri karıştırabilirsiniz. Şu hava durumu kartı örneğini ele alalım:
Bu kartlarda arka plan gradyanları ve simgelerinin stilini belirlemek için "bulutlu", "yağmurlu" veya "güneşli" gibi hava durumu özelliklerine bakı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 biçimlendirebilirsiniz. Ancak, and birleştiricisini medya sorguları ile aynı şekilde kullanarak karakteristik (özel mülk) kombinasyonları için de stil belirleyebilirsiniz. Örneğin, hem bulutlu hem de güneşli olan bir gün aşağıdaki gibi 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 demoların her ikisinde de veri katmanını (sayfada oluşturulacak DOM) uygulanan stillerden ayırmanın yapısal bir faydası vardır. Stiller, bileşen stilinde bulunan olası varyantlar olarak yazılır. Uç nokta, bileşenin stilini belirlemek için kullanacağı verileri gönderebilir. İlk örnekte --detail değerini güncelleme gibi tek bir değer veya ikinci örnekte olduğu gibi birden fazla değişken (--rainy veya --cloudy ya da --sunny ayarlayarak) kullanabilirsiniz. En iyi yanı, bu değerleri de birleştirebilmenizdir. Hem --sunny hem de --cloudy için kontrol, parçalı bulutlu bir stil gösterebilir.
Özel özellik değerlerini JavaScript aracılığıyla güncelleme işlemi, DOM modeli ayarlanırken (örneğin, bileşeni bir çerçevede oluştururken) sorunsuz bir şekilde yapılabilir veya <parentElem>.style.setProperty('--myProperty’, <value>) kullanılarak herhangi bir zamanda güncellenebilir. İ
Birkaç satır kodla bir düğmenin --theme öğesini güncelleyen, stil sorgularını ve bu özel özelliği (--theme) kullanarak stilleri uygulayan bir demoyu burada görebilirsiniz:
Stil sorguları kullanarak kartın stilini belirleyin. Ö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ıç niteliğindedir. Dinamik ve duyarlı arayüzler oluşturmanıza yardımcı olması için kapsayıcı sorgularından daha fazla şey bekleyebilirsiniz. Özellikle stil sorgularıyla ilgili olarak, hâlâ yanıtlanmamış birkaç sorun var. Biri, özel özelliklerin ötesinde CSS stilleri için stil sorgularının uygulanmasıdır. Bu özellik zaten mevcut spesifikasyon düzeyinin bir parçasıdır, ancak henüz hiçbir tarayıcıda uygulanmamıştır. Bekleyen sorun çözüldüğünde boole bağlamı değerlendirmesinin mevcut spesifikasyon düzeyine eklenmesi beklenirken spesifikasyonun bir sonraki düzeyi için aralık sorgulaması planlanır.