Memulai Kueri Gaya

Kemampuan untuk mengkueri ukuran sebaris induk, dan nilai unit kueri penampung baru-baru ini mencapai dukungan yang stabil di semua mesin browser modern.

Namun, spesifikasi penahanan mencakup lebih dari sekadar kueri ukuran; itu juga memungkinkan menanyakan nilai gaya induk. Dari Chromium 111, Anda dapat menerapkan penahanan gaya untuk nilai properti khusus dan mengkueri elemen induk untuk nilai properti khusus.

Ini berarti bahwa kami memiliki kontrol gaya yang lebih logis di CSS, dan memungkinkan pemisahan logika aplikasi dan lapisan data yang lebih baik dari gayanya.

Spesifikasi CSS Containment Module Level 3, yang mencakup kueri ukuran dan gaya, memungkinkan gaya apa pun untuk dikueri dari induk, termasuk pasangan properti dan nilai seperti font-weight: 800. Namun, dalam peluncuran fitur ini, kueri gaya saat ini hanya berfungsi dengan nilai properti khusus CSS. Ini masih sangat berguna untuk menggabungkan gaya dan memisahkan data dari desain. Mari kita lihat bagaimana Anda menggunakan kueri gaya dengan properti khusus CSS:

# Memulai kueri gaya

Katakanlah kita memiliki HTML berikut:

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

Untuk menggunakan kueri gaya, Anda harus menyiapkan elemen penampung terlebih dahulu. Ini memerlukan pendekatan yang sedikit berbeda tergantung pada apakah Anda menanyakan induk langsung atau tidak langsung.

# Menanyakan langsung kepada orang tua

Berbeda dengan kueri gaya, Anda tidak perlu menerapkan penahanan menggunakan container-type atau container properti untuk .card-container untuk .card untuk dapat menanyakan gaya induk langsungnya. Namun, kita perlu menerapkan gaya (nilai properti khusus dalam kasus ini) ke wadah (.card-container dalam hal ini) atau elemen apa pun mengandung elemen yang kita gaya di DOM. Kami tidak dapat menerapkan gaya yang kami kueri pada elemen langsung yang kami gaya menggunakan kueri itu karena ini dapat menyebabkan loop tak terbatas.

Untuk langsung menanyakan orang tua, Anda dapat menulis:

@container style(--theme: warm) 
.card 
background-color: wheat;
border-color: brown; 
...

Anda mungkin memperhatikan bahwa kueri gaya membungkus kueri dengan style(). Ini untuk membedakan nilai ukuran dari gaya. Misalnya, Anda dapat menulis kueri untuk lebar wadah sebagai @container (min-width: 200px) … . Ini akan menerapkan gaya jika penampung induk memiliki lebar minimal 200px. Namun, min-width juga bisa menjadi properti CSS, dan Anda dapat meminta nilai CSS dari min-width menggunakan kueri gaya. Itu sebabnya Anda akan menggunakan style() pembungkus untuk memperjelas perbedaannya: @container style(min-width: 200px) … .

# Menata orang tua tidak langsung

Jika Anda ingin meminta gaya untuk elemen apa pun yang bukan induk langsung, Anda harus memberikan elemen itu a container-name. Misalnya, kita dapat menerapkan gaya ke .card berdasarkan gaya dari .card-list dengan memberi .card-list A container-namedan mereferensikannya dalam kueri gaya.

@container cards style(--moreGlobalVar: value) 
.card 
...

Biasanya merupakan praktik terbaik untuk memberikan nama penampung Anda untuk memperjelas apa yang Anda tanyakan dan membuka kunci kemampuan untuk mengakses penampung tersebut dengan lebih mudah. Salah satu contoh di mana ini berguna adalah jika Anda ingin memberi gaya pada elemen di dalamnya .card secara langsung. Tanpa wadah bernama .card-containermereka tidak dapat menanyakannya secara langsung.

Tetapi semua ini lebih masuk akal dalam praktiknya. Mari kita lihat beberapa contoh:

# Kueri gaya sedang beraksi

Kueri gaya sangat berguna saat Anda memiliki komponen yang dapat digunakan kembali dengan beberapa variasi, atau saat Anda tidak memiliki kontrol atas semua gaya Anda tetapi perlu menerapkan perubahan dalam kasus tertentu. Contoh ini menunjukkan satu set kartu produk yang berbagi komponen kartu yang sama. Beberapa kartu produk memiliki detail/catatan tambahan seperti “Baru” atau “Stok Rendah”, yang dipicu oleh nama properti khusus --details. Selain itu, jika suatu produk dalam “Stok Rendah”, ia mendapat latar belakang batas merah tua. Jenis informasi ini kemungkinan besar dirender oleh server, dan dapat diterapkan ke kartu melalui gaya sebaris seperti:

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

Dengan adanya data terstruktur ini, Anda dapat meneruskan nilai ke --detaildan gunakan properti khusus CSS ini untuk menerapkan gaya:

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

Kode di atas memungkinkan kita menerapkan chip untuk --detail: low-stock Dan --detail: new, tetapi Anda mungkin telah melihat beberapa redundansi di blok kode. Saat ini, tidak ada cara untuk menanyakan keberadaan saja --detail dengan @container style(--detail), yang akan memungkinkan pembagian gaya yang lebih baik dan pengulangan yang lebih sedikit. Kemampuan ini sedang dalam pembahasan di kelompok kerja.

# Kartu cuaca

Contoh sebelumnya menggunakan satu properti khusus dengan beberapa kemungkinan nilai untuk menerapkan gaya. Tapi Anda bisa mencampurnya dengan menggunakan dan menanyakan beberapa properti khusus juga. Ambil contoh kartu cuaca ini:

Untuk memberi gaya gradien latar belakang dan ikon untuk kartu-kartu ini, cari karakteristik cuaca, seperti “mendung”, “hujan”, atau “cerah”:

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

Dengan cara ini, Anda dapat menata setiap kartu berdasarkan karakteristik uniknya. Tetapi Anda juga dapat mengatur gaya untuk kombinasi karakteristik (properti khusus), menggunakan the and kombinator dengan cara yang sama seperti untuk kueri media. Misalnya, hari yang mendung dan cerah akan terlihat seperti ini:

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

# Memisahkan data dari desain

Di kedua demo ini, ada keuntungan struktural memisahkan lapisan data (DOM yang akan dirender di halaman) dari gaya yang diterapkan. Gaya ditulis sebagai kemungkinan varian yang hidup dalam gaya komponen, sementara titik akhir dapat mengirim data yang kemudian akan digunakan untuk memberi gaya pada komponen. Anda dapat menggunakan nilai tunggal, seperti pada kasus pertama, memperbarui file --detail nilai, atau beberapa variabel, seperti dalam kasus kedua (pengaturan baik --rainy atau --cloudy atau --sunny. Dan bagian terbaiknya adalah Anda juga dapat menggabungkan nilai-nilai ini, memeriksa keduanya --sunny Dan --cloudy bisa menunjukkan gaya sebagian berawan.

Memperbarui nilai properti khusus melalui JavaScript dapat dilakukan dengan mulus, baik saat menyiapkan model DOM (yaitu saat membuat komponen dalam kerangka kerja), atau memperbarui kapan saja menggunakan <parentElem>.style.setProperty('--myProperty’, <value>). SAYA

Inilah demo yang dalam beberapa baris kode, perbarui --theme tombol, dan menerapkan gaya menggunakan kueri gaya dan properti khusus tersebut (--theme):

Gaya kartu menggunakan kueri gaya, JavaScript yang digunakan untuk memperbarui nilai properti khusus adalah:

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');
themePicker.addEventListener('input', (e) => 
btnParent.style.setProperty('--theme', e.target.value);
)

Fitur-fitur yang dirinci dalam artikel ini hanyalah permulaan. Anda dapat mengharapkan lebih banyak hal dari kueri kontainer untuk membantu Anda membuat antarmuka yang dinamis dan responsif. Khusus untuk kueri gaya, masih ada beberapa masalah terbuka. Salah satunya adalah penerapan kueri gaya untuk gaya CSS di luar properti khusus. Ini sudah menjadi bagian dari level spesifikasi saat ini, tetapi belum diimplementasikan di browser mana pun. Evaluasi konteks boolean diharapkan akan ditambahkan ke level spesifikasi saat ini saat masalah yang belum selesai diselesaikan, sementara kueri rentang direncanakan untuk level spesifikasi berikutnya.